Div Layer Coding Help Options

[TheRedWindmill]

Okay, so I'm making a div layout [which I've done before, but with Imapping and no navigation section], but this time I want to have a navigation section. My problem is that when I try to make the two separate layers, my navigation always goes inside of my blog instead of where I want it to go. So, basically, how do make my navi and my blog both go where they're supposed to?

[Uhm...that made sense, right? *sigh*]

[Pulchritude]

Well first use this for your blogs

<!-- begin code provided by createblog.com --><br /><br /><div style="position:static; margin-left: #px; margin-top: #px;border: 0px solid #ffffff; width: #px; height: #px;"><br /><!-- end code provided by createblog.com -->

and use this for your navi

<!-- begin code provided by createblog.com --><br /><div id="particulars" style="position:absolute; width:#; height:#; top:#; left:#; z-index:2; overflow: auto; border: 1px #000000 solid;<br />INFO GOES HERE!<br /></div><br /> <br /><!-- end code provided by createblog.com -->

There put both of them in your custom header in your look and feel

[talcumpowder]

Make sure the navigation layer comes BEFORE the blog.... I find that the order image stuff, navigation stuff, stylesheet, and then blog layer works the best.
Also, don't be afraid to use negative numbers when you're positioning the layers~!

[TheRedWindmill]

Thanks! Only, my navi is refusing to be positioned where I want it to be. No matter what I put in for the margins, it's just hanging out directly underneath the picture to the far left. So...now what?

[talcumpowder]

This sounds like fun, may I see your code?

[TheRedWindmill]

Sure. I just left the navi "your info goes here" for now. I'm really just worried about positioning right now.

<!-- begin code provided by createblog.com --><br /><img src="http://img.photobucket.com/albums/v223/TheRedWindmill/Shiva2.jpg" alt="Image hosted by Photobucket.com"><br /><br /><br /><div id="particulars" style="position:static; width:100px; height:100px; top:300px; left:300px; z-index:1; overflow: auto;"><br />INFO GOES HERE!<br /></div><br /><br /><style type='text/css'><br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer<br />{display: none;}<br /></style><br /><br /><br /><br /><style type='text/css'><br />/*Shiva*/<br />/*by TheRedWindmill*/<br />body {<br />background-image:url();<br />background-color: #FFFFFF;<br />scrollbar-face-color: transparent;<br />scrollbar-shadow-color: #FFFFFF;<br />scrollbar-highlight-color: #FFFFFF;<br />scrollbar-3dlight-color: #FFFFFF;<br />scrollbar-darkshadow-color: #FFFFFF;<br />scrollbar-track-color: #transparent;<br />scrollbar-arrow-color: #FFFFFF;<br />}<br /><br />#rblEprops, #pnlEnabled table, #pnlEprops table {<br />width: auto !important;<br />}<br /><br />table.blogbody {<br />width:300px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 10pt;<br />color: #FFFFFF;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br /><br />.caption, .blogheader {<br />width: 300px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 13pt;<br />text-align: center;<br />color: #FFFFFF;<br />background-color: none;<br />text-transform: lowercaps;<br />margin-top: 10px;<br />}<br /><br />P, B, I, TD, TH<br />{font-family: Arial;<br /> color: #FFFFFF;<br /> font-size: 8pt;<br />}<br />A:link, A:visited, A:active{<br /> color:#FFFFFF;<br /> text-decoration:none;<br /> font-size:8pt;<br />}<br />a:hover{<br /> text-decoration: underline; <br /> color:#FFFFFF; <br /> font-size: 8pt;<br /> cursor: crosshair;<br /> border-bottom: #FFFFFF;<br /> border-left: #FFFFFF;<br /> border-right: #FFFFFF;<br /> border-top: #FFFFFF;<br />}<br /><br />b, strong, i, u, {<br />/* edit colors when bold italic underline */<br />font-family: arial;<br />font-size: 8pt;<br />color: #FFFFFF;<br />font-weight: bold;<br />text-transform: lowercaps;<br /></style><br /><br /><div style="position:static; overflow: auto; margin-left: -10px; margin-top: -575px;border: 0px solid #ffffff; z-index:0; width: 375px; height: 450px;"><br /><!-- end code provided by createblog.com -->

[talcumpowder]

You may wantto fine-tune this, I kinda edited a lot of stuff. For future refrence, however... Use margin-left and margin-top instead of just left and top. ^_^

<!-- begin code provided by createblog.com --><br /><img src="http://img.photobucket.com/albums/v223/TheRedWindmill/Shiva2.jpg"><br /><br /><br /><div id="particulars" style="position:absolute; width:250px; height:70px; margin-top:-550px; margin-left:420px; overflow: auto;"><br />INFO GOES HERE!<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br /></div><br /><br /><style type='text/css'><br />/*Shiva*/<br />/*by TheRedWindmill*/<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer<br />{display: none;}<br />body {<br />background-image:url();<br />background-color: #FFFFFF;<br />scrollbar-face-color: transparent;<br />scrollbar-shadow-color: #FFFFFF;<br />scrollbar-highlight-color: #FFFFFF;<br />scrollbar-3dlight-color: #FFFFFF;<br />scrollbar-darkshadow-color: #FFFFFF;<br />scrollbar-track-color: #transparent;<br />scrollbar-arrow-color: #FFFFFF;<br />}<br />#rblEprops, #pnlEnabled table, #pnlEprops table {<br />width: auto !important;<br />}<br />table.blogbody {<br />width:300px;<br />font-family: Arial;<br />font-weight: none;<br />font-size: 10pt;<br />color: #FFFFFF;<br />text-align: justify;<br />padding: 0px;<br />margin-top: 2px;<br />}<br />.caption, .blogheader {<br />width: 300px;<br />padding: 3px;<br />font-family: Arial;<br />font-size: 13pt;<br />text-align: center;<br />color: #FFFFFF;<br />background-color: none;<br />text-transform: lowercaps;<br />margin-top: 10px;<br />}<br />P, B, I, TD, TH<br />{font-family: Arial;<br /> color: #FFFFFF;<br /> font-size: 8pt;<br />}<br />A:link, A:visited, A:active{<br /> color:#FFFFFF;<br /> text-decoration:none;<br /> font-size:8pt;<br />}<br />a:hover{<br /> text-decoration: underline; <br /> color:#FFFFFF; <br /> font-size: 8pt;<br /> cursor: crosshair;<br /> border-bottom: #FFFFFF;<br /> border-left: #FFFFFF;<br /> border-right: #FFFFFF;<br /> border-top: #FFFFFF;<br />}<br />b, strong, i, u, {<br />/* edit colors when bold italic underline */<br />font-family: arial;<br />font-size: 8pt;<br />color: #FFFFFF;<br />font-weight: bold;<br />text-transform: lowercaps;<br /></style><br /><br /><div style="position:static; overflow: auto; margin-left: -10px; margin-top: -15px;width: 375px; height: 450px;"><br /><!-- end code provided by createblog.com -->

[TheRedWindmill]

Nyah-nek0, I am officially your new biggest fan. Lol. It's great. Depending on which browser you have, you should check it out.

http://www.xanga.com/TheRedWindmill

[hi-C]

Nyah-nek0, I am officially your new biggest fan. Lol. It's great. Depending on which browser you have, you should check it out.

http://www.xanga.com/TheRedWindmill

Hm, well I guess this can be closed. If you need any further help with this topic, PM me or another Xanga staff and we'll re-open it.

Topic closed