The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML/CSS, does not look right
junyper
post 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:
IPB Image
This is what it looks like:
IPB Image
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 12 2017, 02:07 PM
Post #2


.
********

Group: WDG Moderators
Posts: 7,499
Joined: 10-August 06
Member No.: 7



Not the image, but the MAIN element has padding. Add borders and you can see it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
junyper
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2017 - 10:59 PM