I've got this annoying problem; I have to reset margins to avoid having an ugly space between the nav bar and the content area of a page I'm making. How do I fix this without replacing margin with padding? Thanks in advance! PS: I manage to make to site look good, but I think it's smart to have a logical css without all those pesky workarounds!
I tried to fix it by putting the background in a separate div. Didn't work. I guess I'll redo the entire thing to make the code a tad neater! 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> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> </head> <body> <div id="wrapper"> <div id="logo"></div> <div id="nav"> <ul> <li><a href="bio.html">Bio</a></li> <li><a href="history.html">History</a></li> <li><a href="">Pictures</a></li> <li><a href="">Contact</a></li> </ul> </div> <div id="text-area-bg"> <div id="text-area"> <h2>Blabloble</h2> <img class="float-right" src="img/example-pic.png" /> <p>ipsum lipsum</p> </div> </div> </div> <div id="footer"> <p>Web design: ***</p> <p> © *** 2011</p> </div> </body> </html> Code (markup): CSS: * {margin:0;} p, h1, h2, h3, li {margin: 0 2em;} img {margin: 0 2em;} h2 {padding:0.5em 0;} body {background:url(../img/stars.png) #000;color:#fff; font:Arial, Helvetica, sans-serif 1,2em;} div {margin:0;} li a {text-decoration:none;} li a:hover {text-decoration:none; border-bottom:1px solid #CCC; } a {color:#FFF;} a:hover {color:#CCC;} .float-right {float:right;} div#wrapper { width:960px; min-height:620px; margin:0 auto; background:url(../img/logo-bg.png); background-repeat:no-repeat; background-position:center top; } div#logo { height:220px; position:relative; top:79px; margin:0 auto; background:url(../img/logo.png); } div#nav { height:30px; background:url(../img/nav.png); margin:0 auto; white-space:nowrap; overflow:hidden; text-align:center; } div#nav ul {list-style:none;position:relative;} div#nav ul li {display:inline; font-weight:bold; line-height:30px; font-size:1.5em; padding: 0 1em;} div#text-area-bg { min-height:600px; background:url(../img/text-area-bg.png); } div#text-area { min-height:600px; text-indent:24px; } div#footer {height:80px;width:100%;min-width:960px; text-align:center; line-height:40px;color:#CCC;} div#footer a {color:#CCC;} div#footer a:hover {color:#FFF;} Code (markup):
for the record, I use position:relative to move a picture above the navbar, and use pos:rel to make the links float on top of the picture. Is that good practice?
Do you have link to the actual site? it probably has something to do with position:relative in nav ul. For me I would use padding or margin, only use position when everythingelse fail. Not sure though if it is a good practice.
Always use margins first. Positioning should only be used in rare cases when everything else fails, or you've several layers overlapping each-other.
I agree with steelfrog. Using positioning can get you in trouble real quick. Best to take baby steps with margins and padding. Can you post the URL to the page?
Lol. The coding is starting to get a tad messy. I need to stop designing in dreamweaver. x) (In codes really. But DreamWeavers auto-correction, etc. is darn handy!) I agree with regards to wieving positioning as an effect to use in special situations only! But I need the logo to overlap the nav-bar, so I position it relatively a bit down. And logically enough I want the nav-bar links to sit on top of that picture. So I put an "empty" position:relative there!
is it fixed? Looks like the image is but up against the nav bar. One suggestion. It's hard to distinguish your nav bar links from the background. Not sure if you're using any opacity or anything but you may want to make the navigation stand out more for easier readability.
Nah. I still use padding instead of margins. It just seems a bit hack'ish. And since paddings don't collapse, I'm worried it might look bad. What do you mean with the nav bar. Too me, they appear visible! :S The nav- and text-background-png is 80% opaque. Got any suggestions on how to increase visibility?
with the navbar at 80% it's hard to read the lettering. What if you up the opacity of it to 100%. Is the text more legible? Also make sure to check on multiple browsers as padding and margins can be different.
Yeah. Good idea! I [edit]did[/edit] that with the nav and footer! How? Are you thinking about IE's old box model?
might be. What browsers do you have on your machine? I have 1 PC with FF3.6.13, IE6 (Although I really don't code for that anymore) and Chrome. Another PC with Win 7 IE 8. On my mac I have FF3.6.13 and Safari. This was brought to my attention last week. An online IE emulator. http://expression.microsoft.com/en-us/dd565874.aspx Another one is the browser check in DW CS5 if you have that. I don't believe they can handle javascript functionality but at least it will work for layout issues.
That tool looks neat! Thanks! I have FF, Chrome and IE8. Safari is webkit based, right? So I guess don't need that when I have Chrome. I should get Opera though.
that's correct. Safari is webkit based. But I would check it out on that browser if you can to be sure. There is a windows version that's suppose to be the same but I found it to be buggy last I checked. Check your user stats on your site before dealing with Opera. If it's under 10% I wouldn't worry about it.
I'm working on getting enough skills to be a free-lancer, so I'll need it anyways! Do you find the nav-links easier to read now?
Much better. What if you added color to the navigation? That way it separates from the rest of the content on the page. Just a suggestion.