1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

margins move my css background

Discussion in 'CSS' started by Souldesign, Feb 1, 2011.

0
  1. #1
    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!
     
    Souldesign, Feb 1, 2011 IP
  2. c4ntaloop

    c4ntaloop Greenhorn

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #2
    Post your code please, html and css.
     
    c4ntaloop, Feb 1, 2011 IP
  3. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    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> &copy; *** 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):
     
    Souldesign, Feb 1, 2011 IP
  4. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    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?
     
    Souldesign, Feb 1, 2011 IP
  5. c4ntaloop

    c4ntaloop Greenhorn

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    13
    #5
    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.
     
    c4ntaloop, Feb 1, 2011 IP
  6. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Always use margins first. Positioning should only be used in rare cases when everything else fails, or you've several layers overlapping each-other.
     
    steelfrog, Feb 1, 2011 IP
  7. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #7
    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?
     
    AtSeaDesign, Feb 1, 2011 IP
  8. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #8
    http://quantumforceproject.com/
     
    Souldesign, Feb 2, 2011 IP
  9. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #9
    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! ;)
     
    Last edited: Feb 2, 2011
    Souldesign, Feb 2, 2011 IP
  10. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #10
    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.
     
    AtSeaDesign, Feb 2, 2011 IP
  11. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #11
    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? :)
     
    Souldesign, Feb 2, 2011 IP
  12. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #12
    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.
     
    AtSeaDesign, Feb 3, 2011 IP
  13. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #13
    Yeah. Good idea! I [edit]did[/edit] that with the nav and footer!

    How? Are you thinking about IE's old box model?
     
    Last edited: Feb 3, 2011
    Souldesign, Feb 3, 2011 IP
  14. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #14
    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.
     
    AtSeaDesign, Feb 3, 2011 IP
  15. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #15
    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.
     
    Souldesign, Feb 3, 2011 IP
  16. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #16
    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.
     
    AtSeaDesign, Feb 3, 2011 IP
  17. Souldesign

    Souldesign Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #17
    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?
     
    Souldesign, Feb 3, 2011 IP
  18. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #18
    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.
     
    AtSeaDesign, Feb 3, 2011 IP