iyeru42 Posted September 3, 2007 Share Posted September 3, 2007 How do I position a block-level element, like a DIV, outside of the body element? If I can't, can I use XML? If I can use XML, could someone show me how? Link to comment Share on other sites More sharing options...
jlhaslip Posted September 4, 2007 Share Posted September 4, 2007 You can do that, but don't complain if it doesn't work properly or doesn't validate.I assumed you meant like this: </body><div>...</div></html> If you mean to display something off the screen using negative margins, that is different. That you can do easily, but the Bots like Google might not like it Link to comment Share on other sites More sharing options...
Kingy Posted September 4, 2007 Share Posted September 4, 2007 You do realise that if you position it outside of the body it won't show up?Why would you try and do that? Link to comment Share on other sites More sharing options...
iyeru42 Posted September 4, 2007 Author Share Posted September 4, 2007 You do realise that if you position it outside of the body it won't show up?Why would you try and do that? Is the reason. The logo I put down is the background for the HTML Tag. If you can help me make it so that I don't have to use the HTML Tag (IE: using z-indexes to make the logo go under the content parts below) that would be awesome. Below is my code so far if you wish to help.<!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=iso-8859-1" /><title>The Index</title><style>HTML { background: transparent url("images/layout/logo.gif") no-repeat; }BODY { background: #FFED65; margin:0px; margin-top:200px; border-top:4px #CC6633 solid; border-bottom:4px #CC6633 solid; }#wrapper { background: #FFED65; }#nav { background:transparent url("images/layout/navi_b.png") no-repeat; float:left; width:100px; height:40px; text-align:center; padding-top:4px; }#nav A:Link, #nav A:Active, #nav A:Visited { font-weight:bold; color:#CC6633; text-decoration:underline }#nav A:Hover { font-weight:bold; color:#CC6633; text-decoration:none; }#content { background: #FFFDC7; border:4px #CC6633 solid; width:70%; margin:20px; }.innerDIV { padding:5px; }.message { border-bottom:1px #CC6633 solid; font-weight:bold; margin-bottom:5px; float:left; width:200px;}</style><script type="text/javascript" src="media/scripts/rounded_corners_lite.inc.js"></script><script type="text/javascript" src="main.js"></script></head><body><div id="wrapper"> <div id="nav"><a href="index.htm">Home</a></div><div id="nav"><a href="http://iyeru42.ryan444123.com/board">Board</a></div><div id="nav"><a href="http://iyeru42.ryan444123.com/wiki">wiki</a></div><div id="nav"><a href="http://iyeru42.deviantart.com">dART</a></div><div id="nav"><a href="#">Gallery</a></div><div id="nav"><a href="#">About</a></div><br /><br /> <div id="content"><div class="innerDIV"> <div class="message">Welcome</div><br /><br /> This is what you're doing, this is what I want you to do. </div></div></div></body></html> It shows I already use a wrapper ID, so another master wrapper should be used if I want to do this. Link to comment Share on other sites More sharing options...
Kingy Posted September 4, 2007 Share Posted September 4, 2007 Just briefly because I have to run now use CSS to set your image position to absolute and this z-index.If I understood you correctly then maybe this might help.{position:absolute;left:0px;top:0px;z-index:-1} Link to comment Share on other sites More sharing options...
iyeru42 Posted September 4, 2007 Author Share Posted September 4, 2007 Just briefly because I have to run now use CSS to set your image position to absolute and this z-index.If I understood you correctly then maybe this might help.{position:absolute;left:0px;top:0px;z-index:-1}XHTML doesn't allow negative z-index values if I'm not mistaken. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted September 4, 2007 Share Posted September 4, 2007 z-index is CSS, not XHTML, and I think it allows negative values. Link to comment Share on other sites More sharing options...
iyeru42 Posted September 5, 2007 Author Share Posted September 5, 2007 z-index is CSS, not XHTML, and I think it allows negative values.XHTML validators check classes and IDs too you know. But still, it's not good practice to use negative values for z-index. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 5, 2007 Share Posted September 5, 2007 It's also not a good practice to put anything outside of the body. Also, background images typically go on the body element rather then the html element. You also have several divs with the same ID, that's definately not a good practice (and not valid). Link to comment Share on other sites More sharing options...
sircharlo Posted September 5, 2007 Share Posted September 5, 2007 You also have several divs with the same ID, that's definately not a good practice (and not valid).Yeah, if you want to do that, classes are better (if not essential). Link to comment Share on other sites More sharing options...
ste Posted September 6, 2007 Share Posted September 6, 2007 there is no need to code this like this HTML { background: transparent url("images/layout/logo.gif") no-repeat; }BODY { background: #FFED65; margin:0px; margin-top:200px; border-top:4px #CC6633 solid; border-bottom:4px #CC6633 solid; }#wrapper { background: #FFED65; } when you can just put this for the exact same result body {background: transparent url("images/layout/logo.gif") no-repeat #FFED65; margin: 200px 0 0 0; border-top:4px #CC6633 solid; border-bottom:4px #CC6633 solid;} you dont have to use a wrapper div unless there is a reason e.g. width and you can apply a background image and background color to the body element instead of trying to style all these things seperately Link to comment Share on other sites More sharing options...
iyeru42 Posted September 23, 2007 Author Share Posted September 23, 2007 If I do what you do STE, there will be a big white space (200px high) above the logo. So instead: BODY { background: transparent url("images/layout/logo.gif") no-repeat; padding:0px; margin:0px; }#wrapper { background: #FFED65; margin-top:200px; border-top:4px #CC6633 solid; border-bottom:4px #CC6633 solid; } Sorry about the multiple IDs, I wasn't thinking there. Link to comment Share on other sites More sharing options...
ste Posted September 24, 2007 Share Posted September 24, 2007 there doesnt have to be 200px of white space if you use padding-top rather than margin-top or you can apply the background color to the body rather than the wrapper e.g. BODY {background: transparent url("images/layout/logo.gif") no-repeat #FFED65;} Link to comment Share on other sites More sharing options...
iyeru42 Posted September 25, 2007 Author Share Posted September 25, 2007 there doesnt have to be 200px of white space if you use padding-top rather than margin-top or you can apply the background color to the body rather than the wrapper e.g. BODY {background: transparent url("images/layout/logo.gif") no-repeat #FFED65;}Padding top didn't work, because the logo was under the wrapper. Here's my new code if you want to see what I did:<!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=iso-8859-1" /><title>The Index</title><link rel="stylesheet" href="main.css" /><script type="text/javascript" src="scripts/curvyCorners/rounded_corners_lite.inc.js"></script><script type="text/javascript" src="main.js"></script></head><body><div id="wrapper2"><div id="wrapper"> <div id="affiliates"><div class="innerDIV"> <b>Affiliates</b><br /><br /> Affiliate 1<br /> Affiliate 2<br /> </div></div> <div id="copyright"><div class="innerDIV"> <p align="right">This Layout is copyright 2007~08 Ian "Iyeru" Carlson</p> </div></div> <script>document.write(nav);</script><br /><br /> <div id="content"><div class="innerDIV"> <div class="message">Welcome</div><br /><br /> New layout, tons of pages missing. I'll get right on it folks! Just, be patient and I'll have a bunch of it up in no time... I hope anyway. </div></div></div></div></body></html> And main.css: HTML { overflow:auto; } /* Fix the IE Scrollbars so they don't show when the content doesn't go past the browser window */BODY { background:transparent url("images/layout/Historic_Overlay_1_by_iyeru42.png");padding:0px; margin:0px; font-family:Courier, monospace; }P { margin:0px; }#wrapper { background: #FFED65; border-top:4px #CC6633 solid; border-bottom:4px #CC6633 solid; height:200px; height:100%; }#wrapper2 { background:transparent url("images/layout/logo.png") no-repeat; padding-top:200px; }.nav { background:transparent url("images/layout/navi_b.png") no-repeat; float:left; width:100px; height:40px; text-align:center; padding-top:4px; font-family:"Times New Roman", Times, serif; }.nav A:Link, .nav A:Active, .nav A:Visited { font-weight:bold; color:#CC6633; text-decoration:underline }.nav A:Hover { font-weight:bold; color:#CC6633; text-decoration:none; }#content { background: #FFFDC7; border:4px #CC6633 solid; width:75%; margin:20px; }.innerDIV { padding:5px; }.message { border-bottom:1px #CC6633 solid; font-weight:bold; margin-bottom:5px; float:left; width:200px;}#copyright { background: #FFFDC7; border:4px #CC6633 solid; width:30%; margin:20px; margin-bottom:0px; margin-right:0px; float:right; z-index:5; }#affiliates { text-align:center; background: #FFFDC7; border:4px #CC6633 solid; width:10%; margin:20px; margin-bottom:0px; float:right; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.