Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS Layout, Padding occurring.

Dal123

Dal123

macrumors 6502a
Original poster
Oct 23, 2008
903
0
England
I was pretty sure default padding set in most browsers so overid it in my css by declaring 0. I want my logo centred (see my css), my background is generating a box, I just want it flat, no padding. :confused:
The book I bought has faulty code on it's website, I've already emailed them complaining about this.:mad:
HTML: 
#masthead {
background-image:url(Images/Graphics/Logo_Web.gif);
width:972px;
height:190px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
clear:both;
}
 

Attachments

  • Picture 1.png
    Picture 1.png
    146 KB · Views: 113
Do you want the image at the very top of the page? If so, the issue is that the background image is in a div. You need to either set the background in the body or else set positioning for the div you are using. You don't need to set the padding to 0 unless the div is inheriting padding set in a parent div, which is probably not the case here.
 
Dal123 said:
I was pretty sure default padding set in most browsers so overid it in my css by declaring 0. I want my logo centred (see my css), my background is generating a box, I just want it flat, no padding. :confused:
The book I bought has faulty code on it's website, I've already emailed them complaining about this.:mad:
HTML: 
#masthead {
background-image:url(Images/Graphics/Logo_Web.gif);
width:972px;
height:190px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
clear:both;
}
Click to expand...

Are you talking about the black 1 px border going around the outside of the pale yellowbox?
 
I want it flush with the top of the page; but wanted a different color at the top of the background too. What I don't understand is if you look at the attached image there is padding all the way around (white space). I want it all yellow. By the sound of it that's not possible with a <div> :confused:.
Was hoping to create a 'masthead' with my logo and navigation bar, that way could easily place it on my pages.
 
Is the masthead itself sitting inside another div? If it is the first element within the body, put

Code: 
body {
padding:0px;
margin:0px;
}

Remember, padding applies to a div's content not to the div itself.
 
I think I already tried that, I don't think the div is in another; it's by itself: here is my css:
Code: 
/* Masthead */
#masthead {
background-image:url(Images/Graphics/Logo_Web.gif);
width:972px;
height:190px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
clear:both;
}
/* Horizontal Navigation Bar */
#navlist li
{
font-size:20px;
font-family: 'Gill Sans', Lucidia Grande, Lucidia Sans Unicode, Arial, sans-serif;
display: inline;
list-style-type: none;
padding-right: 20px;
margin-left:auto;
margin-right:auto;
}
/* Styles for Sidebar Lists */
#sidebar
ul {
list-style-type:none;
margin: 5px;
padding:20 20px 20px 20px;
width:350px;
}
#sidebar li {
background: #DDD;
margin: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
padding:0 10px;
line-height:3em;
text-align:right;
font-size:20px;
font-family: 'Gill Sans', Lucidia Grande, Lucidia Sans Unicode, Arial, sans-serif;
font-style:none;
}


/* Footer */
#footer {
padding:10px;
border:1px solid #000;
background-color:#ffffcc
}
/*------------------------------
Header Formats Whole Document*/

h2 {
text-decoration:underline;
font-style:bold;
paddign:0;
margin:0;
font: 20px Futura, Helvetica, Arial, sans-serif;
}

Here is my html:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Concrete Stairs</title>
<link rel="stylesheet" media="screen" type="text/css" href="layout.css"/>
</head>

<body>

<div id="masthead"></div>
<ul id="navlist">
<li>home</li>
<li>previous projects</li>
<li>guarantee</li>
<li>contact us</li>
</ul>

<div id="sidebar">
<ul>
<li><h2>Staircases</h2></li>
<li>Gutter Concrete Staircase</li>
<li>2 Flight Mirrored Concrete Staircase</li>
<li>3 Flight Mirrored Concrete Stairs</li>
<li>Reinforced Concrete Staircase</li>
<li>Concrete Stairs</li>
<li><h2>Reinforced Concrete Structures</h2></li>
<li>Waterproof Concrete Basement</li>
<li>Caltite Basement</li>
<li>Retaining Wall</li>
<li>Concrete Roof</li>
<li>Concrete Frame</li>
</ul>
</div>

<div id="footer">
<ul>
<li>Precise Formwork Limited</li>
<li>Office: 01708 736500</li>
<li>Mobile: 07590657295</li>
<li>email@preciseformwork.co.uk</li>
</ul>
</div>

</body>
</html>

My navbar's need work, I'm just trying to learn and play with layout, teach myself. Can't believe the book has let me down :mad:.
Thanks for all your help so far:).
 
The size of the div, width and height, need to be the exact size of the image or else extra white space will be around it. Also, as I said before, if the image is not exactly lined up with the top then you need to set the positioning of the div that the image is in.
 
Then it's not possible to place a yellow background at the top, and a grey one in the middle of the page.
 
Yes it is. You can do anything you want. If you want a yellow background at top in the masthead div set the position to relative with top at -8 px. That gets the div touching the top like you want.

What is this gray box you are talking about now? Anyways, learn about positioning because that's how you move everything to where you want it.
 
I really don't think you need to do the positioning with top of -8px but it works. I think the actual issue is that the defined size of your div is larger than your image so that extra space shows up as white.
 
It doesn't work, I've just tried it. Thanks anyway though bud, think I need to buy another book:mad:.
 
Dal123 said:
It doesn't work, I've just tried it. Thanks anyway though bud, think I need to buy another book:mad:.
Click to expand...

What doesn't work? The -8px? I tried it and it does, at least in firefox it does. Maybe you are doing something wrong?
 
Yeah the 8px thing buddy, could you please post exactly how you did it with a line or two of my existing code so I know exactly where and how to place it.
I am using book called "Beginning CSS web development from novice to professional" contacted the publisher "Apress" and they were to lazy to forward my email to the correct department :mad:. I also did a google search on the author and contacted him directly on his personal site :).
Cheers people.
 
Dal123 said:
Yeah the 8px thing buddy, could you please post exactly how you did it with a line or two of my existing code so I know exactly where and how to place it.
I am using book called "Beginning CSS web development from novice to professional" contacted the publisher "Apress" and they were to lazy to forward my email to the correct department :mad:. I also did a google search on the author and contacted him directly on his personal site :).
Cheers people.
Click to expand...

I believe he means to try the following in your masthead.

Code: 
#masthead {
background-image:url(Images/Graphics/Logo_Web.gif);
width:972px;
height:190px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
clear:both;
position:relative;
top:-8px;
}
 
Cerebrus' Maw said:
I believe he means to try the following in your masthead.

Code: 
#masthead {
background-image:url(Images/Graphics/Logo_Web.gif);
width:972px;
height:190px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
clear:both;
position:relative;
top:-8px;
}
Click to expand...

Yup that's what I meant. I thought it was easy enough to understand without the code.
 
Cheers buddies :). -40px worked well. But why I am I having to use negative; You would think zero would be the point. Also when resizing the browser window left to right the image does centre. However it does not go to exactly to the left. There must be default padding or something like that :confused:. Why is it happening?
I really don't think you need to do the positioning with top of -8px but it works.
Click to expand...
It seems that it is not the norm! Sorry for the silly questions but I just don't understand.
How do you specify the size of the <div> I have set the size of the image correctly: 972px 190px is the correct size.
 
body width is set to 972px,
image is set to 972 px.
padding and margin all set to 0px
yet still there is padding all round background-image
 

Attachments

  • Picture 1.png
    Picture 1.png
    174.4 KB · Views: 99
Dal123 said:
body width is set to 972px,
image is set to 972 px.
padding and margin all set to 0px
yet still there is padding all round background-image
Click to expand...

You say it's set to 972, but the attached has a width of 1001. When I measure the ruler part it has a width of 900. Are you certain the image itself doesn't have padding? I base that on what I saw when you attached that image in this thread where you can see it has padding in the image itself.
 
I've just checked the image in image ready and it's 972px wide by 190px high. This is image size and canvas size, I assume if there was padding it would come up there.
I know I can get rid of the padding at the top by doing -40px but I want the container to define the width of my whole site (centred in the middle) at the moment it moves left and right but then there is a gap (padding) at the side (white colour) so deffinitely the body of the page.
 
Dal123 said:
I've just checked the image in image ready and it's 972px wide by 190px high. This is image size and canvas size, I assume if there was padding it would come up there.
I know I can get rid of the padding at the top by doing -40px but I want the container to define the width of my whole site (centred in the middle) at the moment it moves left and right but then there is a gap (padding) at the side (white colour) so deffinitely the body of the page.
Click to expand...

Here's your image in GIMP. Notice the empty space around the image and the image size in the title bar.
 

Attachments

  • dal.png
    dal.png
    123.8 KB · Views: 84
I am stunned :eek:
How do I remove this in photoshop, image ready? It says 972px by 190px in mine but I see what you're saying, image programs have their own padding too not just internet.
How do I remove this padding?:confused:
 
Dal123 said:
I am stunned :eek:
How do I remove this in photoshop, image ready? It says 972px by 190px in mine but I see what you're saying, image programs have their own padding too not just internet.
How do I remove this padding?:confused:
Click to expand...

With Gimp there's an option under the Image menu for auto-crop that did it quickly. I'm sure it's in Photoshop as well, just not sure under what menu.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back