HTML/CSS, does not look right |
HTML/CSS, does not look right |
junyper |
Mar 12 2017, 11:34 AM
Post
#1
|
Group: Members Posts: 2 Joined: 12-March 17 Member No.: 26,342 |
I can't figure out why there is like a padding around my image for my homework.
It should look like this according to the book: This is what it looks like: This is my HTML: <!DOCTYPE html> <html lang="en"> <head> <title>JavaJam Coffee House</title> <meta charset="utf-8"> <link rel="stylesheet" href="javajam.css"> </head> <body> <div id="wrapper"> <header> <h1>JavaJam Coffee House</h1> </header> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="Menu.html">Menu</a><li> <li><a href="Music.html">Music</a><li> <li><a href="Jobs.html">Jobs</a><li> </ul> </nav> <main> <div id="hero"> <h2>Follow the Winding Road to JavaJam</h2> <ul> <li>Specialty Coffee and Tea</li> <li>Bagels, Muffins, and Organic Snacks</li> <li>Music and Poetry Readings</li> <li>Open Mic Night Every Friday Night</li> </ul> <div> 54321 Route 42<br> Ellison Bay, WI 54210<br> 1-888-555-5555<br><br> </div> </div> </main> <footer> Copyright © 2016 JavaJam Coffee House<br> <a href="mailto:holly@schilling.com">holly@schilling.com</a> </footer> </div> </body> </html> This is my CSS: body {background-color: #F5F5DC; background-image: url(images/javabackground.gif); color: #230000; font-family: Verdana, Arial, sans-serif;} header {background-color: #D2B48C;} nav {font-weight: bold; text-align: center; padding: 10px; float: left; width: 160px;} nav a {text-decoration: none;} nav ul {list-style-type: none; padding-left: 0; font-size: 1.2em;} nav a:link {color: #795240;} nav a:visited {color: #A58366;} nav a:hover {color: #F5F5DC;} main {padding: 20px; display: block; background-color: #F5F5DC; margin-left: 175px;} main img {float: left; padding-right: 2em;} main ul {list-style-image: url(marker.gif); list-style-position: inside;} main div {overflow: auto; font-size: 90%; padding-left: 5%; padding-right: 5%;} h1, h2 {font-family: Georgia, "Times New Roman", serif;} h1 {background-image: url(images/javalogo.gif); background-position: center; background-repeat: no-repeat; text-indent: -9999px; height: 100px; margin: 0;} h3 {background-color: #E6D6A9; text-transform: uppercase;} dt {font-weight: bold;} footer {background-color: #D2B48C; color: #000000; font-size: .60em; text-align: center; font-style: italic; padding: 10px;} footer a:link {color: #2E0000;} footer a:visited {color: #000000;} footer a:hover {color: #F5F5DC;} #wrapper {background-color: #E2D2B0; margin-left: auto; margin-right: auto; width: 80%; min-width: 960px; max-width: 2048px; box-shadow: 3px 3px 3px #2E0000;} #hero {height: 300px; color: #F5F5DC; background-image: url(images/heroroad.jpg); background-size: 100% 100%; background-repeat: no-repeat;} .news {margin-left: 20%; margin-right: 20%;} Validator confirmed that there were no errors, but my image seems to have some sort of padding. What am I doing wrong? |
Christian J |
Mar 12 2017, 02:07 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Not the image, but the MAIN element has padding. Add borders and you can see it.
|
junyper |
Mar 12 2017, 03:59 PM
Post
#3
|
Group: Members Posts: 2 Joined: 12-March 17 Member No.: 26,342 |
Thank you! I took that out and it looks similar, still has an edge but much closer. I appreciate your help.
|
Lo-Fi Version | Time is now: 19th April 2024 - 06:28 AM |