CSS/HTML Help please

Discussion in 'HTML & Website Design' started by Christian Patti, Jan 2, 2009.

0
  1. #1
    Hi, I'm creating a new design for myself and I'm running into a bit of an issue.

    xiist.com/new/ is the site so far (won't let me post live link)

    As you can see the white #page div is right against the top even though margin-top is there in the css. Margin-left seems to be working fine, but margin top isn't. If anyone knows what the problem is do share.

    Heres the source code:

    <!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>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>

<body>
	<div class="background">
    	<img src="images/frozentree.jpg" width="100%" height="100%" alt="" />
	</div>
    <div id="container">
    	<div id="wrapper">
        	<div id="page">
            	sss<div style="background: #eeeeee;">dsds</div>
        	</div>
   		</div>
    </div>
</body>
</html>
    Code (markup):
    Here is the CSS:

    @charset "UTF-8";
/* CSS Document */
body
{
	margin: 0;
	padding: 0;
}
.background
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#container
{
	position: relative;
	z-index: 2;
}
#wrapper
{
	background: #000000;
	width: 820px;
	height: 800px;
	margin: 100px auto;
}
#page
{
	background: #ffffff;
	width: 800px;
	height: 780px;
	margin-top: 10px;
	margin-left: 10px;
}
    Code (markup):
     
    Christian Patti, Jan 2, 2009 IP
  2. fairuz.ismail

    fairuz.ismail Peon

    Messages:
    232
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    use padding-top instead of margin-top
     
    fairuz.ismail, Jan 2, 2009 IP
  3. ideamonk

    ideamonk Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    put a padding-top into the wrapper, this works :)

    @charset "UTF-8";
/* CSS Document */
body
{
	margin: 0;
	padding: 0;
}
.background
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#container
{
	position: relative;
	z-index: 2;
}
#wrapper
{
	background: #000000;
	width: 820px;
	height: 800px;
	margin: 100px auto;
       [B][I] padding-top:10px;[/I][/B]
}
#page
{
	background: #ffffff;
	width: 800px;
	height: 780px;
	margin-top: 10px;
	margin-left: 10px;
  
}
    Code (markup):
     
    ideamonk, Jan 2, 2009 IP
  4. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #4
    Padding is the answer see above.

    And get rid of all that absolute crap.

    Learn to do it right.
     
    Colbyt, Jan 2, 2009 IP
  5. Christian Patti

    Christian Patti Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hmmm lets see you make a fixed background image that automatically sizes to the size of the browser without using some alternate techniques, oh and no javascript allowed. Also I only noticed fixed and relative positioning. Get your facts straight or piss off.

    And thanks for the padding suggestion guys I'll try that out.
     
    Christian Patti, Jan 2, 2009 IP