Results 1 to 2 of 2
Related
-
divs being positioned incorrectly on some browsers Forum: Myspace Forum
Replies: 1 -
Relative Positioning Forum: CSS Forum
Replies: 1 -
Centering and Absoluted Positioned Div Forum: CSS Forum
Replies: 1
-
08-01-2006, 09:45 AM #1
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
-
04-02-2007, 04:35 AM #2
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>
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
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum