-
1. Re: Can't get top margin for header?
John Waller Jan 30, 2011 12:37 PM (in response to Budo Cat)We need to see all the code you're working with (HTML & CSS)
Even better if you upload what you've got and provide a link.
-
2. Re: Can't get top margin for header?
Budo Cat Jan 30, 2011 12:53 PM (in response to John Waller)Hi, John.
All the HTML and CSS code is below. Not much there, as I've only started building the page. (For that reason, it's not online yet, so I can't upload or give a link.)
Thanks very much for your help.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Boone Template</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="wrapper">
<div id="header">
</div><!--close header-->
<div id="navbar">
</div><!--close navbar-->
<div id="mainbody">
</div><!--close mainbody-->
</div><!--close wrapper-->
</body>
</html>CSS:
@charset "UTF-8";
body {
width: 1024px;
height: 768px;
margin: 0 auto;
background-color: #0014B2;
}
#wrapper {
height: 768px;
width: 1024px;
background-image: url(../mesh.png);
}
#wrapper #header {
height: 100px;
width: 912px;
margin: 50px 54px 0 54px;
background-color: #000032;
border: 2px solid #b3aaa1;
}
#wrapper #navbar {
background-color: #000032;
height: 540px;
width: 155px;
margin-left: 54px;
float: left;
border-width: 0 1px 2px 2px;
border-style: solid;
border-color: #b3aaa1;
}
#wrapper #mainbody {
height: 540px;
width: 755px;
float: left;
border-width: 0 2px 2px 1px;
border-style: solid;
border-color: #b3aaa1;
} -
3. Re: Can't get top margin for header?
Jens Peermann Jan 30, 2011 1:23 PM (in response to Budo Cat)Why are you adding the "wrapper" ID to the "navbar", "header" and "mainbody" rules?
-
4. Re: Can't get top margin for header?
Budo Cat Jan 30, 2011 1:55 PM (in response to Jens Peermann)I'm not sure I understand the question. The wrapper holds the textured background. If I close the wrapper before navbar/header/mainbody, I get only a page of texture.
Is there another way to do it? I've fussed with the coding, but haven't found another way to keep the header/navbar and mainbody on top of the background (nor has anything given me that 50 px margin I'm looking for at the top).
-
5. Re: Can't get top margin for header?
Jens Peermann Jan 30, 2011 2:20 PM (in response to Budo Cat)Your wrapper div gets four different sets of instructions:
1)
#wrapper {
height: 768px;
width: 1024px;
background-image: url(../mesh.png);
}2)
#wrapper #header {
height: 100px;
width: 912px;
margin: 50px 54px 0 54px;
background-color: #000032;
border: 2px solid #b3aaa1;
}3)
#wrapper #navbar {
background-color: #000032;
height: 540px;
width: 155px;
margin-left: 54px;
float: left;
border-width: 0 1px 2px 2px;
border-style: solid;
border-color: #b3aaa1;
}4)
#wrapper #mainbody {
height: 540px;
width: 755px;
float: left;
border-width: 0 2px 2px 1px;
border-style: solid;
border-color: #b3aaa1;
}Header, navbar and mainbody all reside within wrapper, but that doesn't require "#wrapper" to be added to the CSS rules that define their attributes. Every rule that has "#wrapper" in its name will be used by the div that has the id "wrapper".
Message was edited by: Jens Peermann
-
6. Re: Can't get top margin for header?
Budo Cat Jan 30, 2011 2:30 PM (in response to Jens Peermann)Thank you, Jens. I removed #wrapper from navbar, header and maincontent. Gave me cleaner code, but it still doesn't give me the top margin.
Again, I can see the 50px margin in Design view, but not when I view it in Firefox or other browsers. Any other suggestions on how to fix this?
-
7. Re: Can't get top margin for header?
Jens Peermann Jan 30, 2011 2:33 PM (in response to Budo Cat)Empty the Cashes in Firefox and Safary. Then look again.
-
8. Re: Can't get top margin for header?
Budo Cat Jan 30, 2011 2:49 PM (in response to Jens Peermann)That didn't quite work. But what did work was giving myself only a 49 pix margin in the header, and a 1 px top-padding in the wrapper. See below:
@charset "UTF-8";
body {
width: 1024px;
height: 768px;
margin: 0 auto;
background-color: #0014B2;
}
#wrapper {
width: 1024px;
height: 768px;
background-image: url(../images/mesh.png);
background-repeat: repeat-y;
padding-top: 1px;
}
#header {
height: 100px;
width: 912px;
margin: 49px 54px 0 54px;
background-color: #000032;
border: 2px solid #b3aaa1;
}I hate "work-arounds" like this. When I use them, I always feel like I'm cheating -- I haven't figured out the real answer, just a make-do. But this is better than the alternative I was considering: Give a 50 px top padding in the wrapper, then reduce the size of the entire canvass by 50 px.
Thanks very much for your help. If you or anyone else can explain how to resolve this in a cleaner fashion, I'd be very thankful.
-
9. Re: Can't get top margin for header?
Nancy O. Jan 30, 2011 4:18 PM (in response to Budo Cat)Removing compounds #wrapper #header won't solve this issue. If there is a comma between #wrapper & #header then your CSS rules apply to both. If there is no comma, #wrapper #header is treated as #header.
Re: margins, change this:
body {
width: 1024px;
height: 768px;
margin: 0 auto;
background-color: #0014B2;
}To this:
body {
width: 1024px;
height: 768px;
margin: 50px auto 0 auto;background-color: #0014B2;
}
Incidentally, you must NOT place height values on containers that will hold text. If you do, your containers will run out of room to accommodate varying amounts of page content and increased text sizes in browsers. If needed to show a background image, for example, use the min-height property.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
10. Re: Can't get top margin for header?
Budo Cat Jan 30, 2011 8:41 PM (in response to Nancy O.)Hi Nancy.
No, that didn't work either. But perhaps I misunderstood something. If I change the #body margin to 50px auto 0 auto, then what should the #header margin read?
-
11. Re: Can't get top margin for header?
osgood_ Jan 31, 2011 4:23 AM (in response to Budo Cat)Budo Cat wrote:
I hate "work-arounds" like this. When I use them, I always feel like I'm cheating -- I haven't figured out the real answer, just a make-do. But this is better than the alternative I was considering: Give a 50 px top padding in the wrapper, then reduce the size of the entire canvass by 50 px.Thanks very much for your help. If you or anyone else can explain how to resolve this in a cleaner fashion, I'd be very thankful.
It's not really a 'hack' it's a legitimate work around. Sounds as though you had two adjacent top-margins collasping, which would cause the issue. However saying that when I tested your code (the original html/css post) it worked ok for me in Firefox <shrug>
A cleaner way would have been putting a 50px top padding on the wrapper but the way you did it is just fine. Using the 1px padding causes a 'barrier' between the two adjacent margins, stopping them from collapsing.
-
12. Re: Can't get top margin for header?
Budo Cat Jan 31, 2011 11:12 AM (in response to osgood_)Thanks, osgood. I'm still very new to this, so I'm not sure what adjacent collapsing top margins are. But I'm glad to learn that my solution wasn't totally amateurish.
Maybe I'll go back and change the padding to 50px, then adjust the canvass size accordingly. I didn't do that in the first place on the remote chance that, somehow, sometime, the page would present itself as I had intended. A 1px difference in the margin and canvas size would be easier to miss than 50 px.
Thanks again for your feedback.
-
13. Re: Can't get top margin for header?
phreaddee123 Feb 3, 2011 3:48 PM (in response to Budo Cat)Nancy wrote
Incidentally, you must NOT place height values on containers that will hold text. If you do, your containers will run out of room to accommodate varying amounts of page content and increased text sizes in browsers. If needed to show a background image, for example, use the min-height property.
NOT? I believe she is wrong.
there is no "rule" saying that you must not place a height value on a container that is rediculous.
the problem you are having is due to no position value.
by default position is set to static which does not accept top left etc etc.
position:relative will fix your issue
display:inline; will render it correctly in old versions of IE if used with a float value.
there is no need for the #wrapper prefix although it will technically read it and validate that way as well.





