31 users online (0 members and 31 guests)  


  Results 1 to 2 of 2

Related

  1. Replies: 1
  2. Relative Positioning    Forum: CSS Forum
    Replies: 1
  3. Centering and Absoluted Positioned Div    Forum: CSS Forum
    Replies: 1
  1. #1
    artdog's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2006
    Posts
    3

    relative positioned layer problem

    The site is http://www.evocreative.com/easternbabes
    I have set the layer #nav to relative positioning and placed mark up <div id="nav"></div> right after the main content div. I wanted it to render relative to the top left corner of this div. I can't understand why it is rendering above it. Anyone know what I am doing wrong? Obviously I am not understanding something pretty basic.

    CSS:

    Code:
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    
    #wrapper {
    	font-family: Arial, Helvetica, sans-serif;
    	width: 800px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    }
    #content {
    	font-family: Arial, Helvetica, sans-serif;
    	margin: 0px;
    	padding: 0px;
    	height: auto;
    	width: 800px;
    }
    #top {
    	margin: 0px;
    	height: 265px;
    	width: 100%;
    }
    #top #header {
    	height: 64px;
    	border-top-color: #D30D0F;
    	border-bottom-color: #D30D0F;
    	border-top-style: solid;
    	border-bottom-style: solid;
    	border-bottom-width: 2px;
    	border-top-width: 2px;
    	background-image: url(images/logo.jpg);
    }
    #tagline {
    	background-color: #D30D0F;
    	float: left;
    	height: 36px;
    	width: 600px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #FFFFFF;
    	padding-left: 200px;
    }
    #bottom {
    	margin: 0px;
    	padding: 0px;
    	float: left;
    	height: auto;
    	width: 100%;
    }
    #bottom #left {
    	float: left;
    	height: auto;
    	width: 183px;
    	padding-left: 11px;
    }
    #bottom #right {
    	width: 606px;
    	margin-left: 194px;
    }
    #right #topbabes {
    	float: left;
    	height: 260px;
    	width: 95%;
    	padding-top: 11px;
    	padding-left: 25px;
    }
    .bigbabes {
    	float: left;
    	height: auto;
    	width: auto;
    	margin-right: 45px;
    }
    .bigbabename {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	font-weight: bold;
    	color: #8A8C8D;
    	text-align: center;
    	padding-top: 5px;
    }
    .bigbabesright {
    
    	float: left;
    	height: auto;
    	width: auto;
    	margin-right: 0px;
    }
    #homethumbs {
    	background-color: #F2F2F2;
    	float: left;
    	height: 235px;
    	width: 575px;
    	padding-left: 25px;
    }
    .homethumb img {
    	border: 1px solid #CE0C0C;
    }
    #homethumbs .homethumb {
    	float: left;
    	width: 50px;
    	margin-right: 33px;
    	margin-top: 10px;
    }
    .thumbtext {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 8pt;
    	font-weight: bold;
    	color: #666666;
    	text-align: center;`
    	padding-top: 5px;
    	line-height: 9pt;
    }
    #homethumbs .homethumblast {
    	float: left;
    	width: 50px;
    	margin-top: 10px;
    }
    #signup {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	color: #D30D0F;
    	background-color: #E3E3E3;
    	height: 170px;
    	width: 167px;
    }
    #nav {
    	left:5px;
    	width:178px;
    	height:335px;
    	z-index:1;
    	background-image: url(images/nav_back.png);
    	background-repeat: no-repeat;
    	position: relative;
    }
    Last edited by vinyl-junkie; 04-02-2007 at 11:26 AM. Reason: Added code tags

  2. #2
    micromedia's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2007
    Posts
    1

    Smile Re: relative positioned layer problem

    A layer, is an absolutely positioned div. Position is taken from the top left of the browser window. You will never get a layer made site to centre in a browser window!
    <div>'s require you to tell them what to do via your styles and can be centred in a browser window.
    Copy and paste the codes below.
    CSS

    Code:
    <style type="text/css">
    <!--
    body { text-align:center; }
    #container { text-align:left; width:760px; margin:0 auto;position:relative;
    background-color: #CCCCCC;
     }
    -->
    </style>
    XHTML

    Code:
    <body>
    
    <div id="container">
    <p>this is content<br />
    And some more content</p>
    <p>and just some more</p>
    </div>
    
    </body>
    Last edited by vinyl-junkie; 04-02-2007 at 11:27 AM. Reason: Added code tags



Tags for this Thread