PDA

View Full Version : Question on how to position this <div> relative to it's parent...



BlackReef
Apr 3rd, 2010, 10:55 AM
Hello,

Please excuse my inexperience. I have looked at various online guides on absolute and relative positioning, and none seem to help.

In the left Nav at this URL, notice the small 'Facebook / Youtube' <div>:

http://hendersondefense.com.mytempweb.com/store/pc/home.asp

What I would like to do is position this box relative to the bottom of the site....so no matter how much the page auto-expands in height, it will always be about 15px from the bottom of the left nav. I cant quite figure out how to do this?

The name of the <div> in question is 'leftnavcell'

Here is the code:


<body onLoad="MM_preloadImages('images/FB2.jpg','images/YT2.jpg')"> <div id="wrapper"> <div id="logo"> <div id="SearchBox">Searchbox goes here &quot;#searchbox&quot;</div> </div> <div id="navigation"><a href="home.asp">Home</a> | <a href="viewContent.asp?idpage=1">Store Policies</a> | <a href="viewContent.asp?idpage=3">Shipping &amp; Returns</a> | <a href="viewContent.asp?idpage=2">Dealer Inquiries</a> | <a href="viewContent.asp?idpage=4">Contact</a></div> <div id="toplowernavigation"> <% if session("idCustomer")="0" or session("idCustomer")="" then %> <a href="CustPref.asp">Create Account</a> <% else %> <%response.write(dictLanguage.Item(Session("language")&"_CustPref_10") & session("pcStrCustName") & "!")%> <% end if %> <% if session("idCustomer")="0" or session("idCustomer")="" then %> | <a href="custpref.asp" >Log In</a> <% else %> | <a href="default.asp?action=clear">Log Off</a> <% end if %>| <a href="viewcart.asp">View Cart</a> | <a href="checkout.asp">Checkout</a> </div> <div id="bodyArea"> <div id="left"> <p><a href="viewCategories.asp?pageStyle=h&idCategory=3">+ AK-47 RIFLES &amp; CARBINES</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=4">+ Ammunition</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=5">+ AR-15 Carbines &amp; Rifles</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=6">+ AR-15 Lower Parts</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=7">+ AR-15 Rail Systems</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=8">+ AR-15 Upper Parts</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=9">+ AR-15 Upper Receivers</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=10">+ Ban Compliant Rifles / MAGS</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=11">+ BUIS Sights</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=12">+ Carbines &amp; Rifles</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=13">+ EOTech &amp; ACOG</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=14">+ Flashlights by Surefire</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=15">+ Magazines</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=16">+ Parts for AK-47</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=17">+ Pistols</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=18">+ Pre-Orders</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=19">+ Slings, Gear &amp; Tactical Items</a></p> <p><a href="viewCategories.asp?pageStyle=h&idCategory=20">+ Suppressors</a></p> <div id="leftnavcell"> <p align="center"><a href="http://www.facebook.com/pages/Henderson-NV/Henderson-Defense-Industries-LLC/112241287599?ref=mf#" target="_blank" onMouseOver="MM_swapImage('Facebook','','images/FB2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/FB1.jpg" alt="Become a fan on Facebook!" name="Facebook" width="55" height="55" border="0"> </a><a href="http://www.youtube.com/user/DoctorCheney223" target="_blank" onMouseOver="MM_swapImage('YouTube','','images/YT2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/YT1.jpg" alt="Check out our YouTube page" name="YouTube" width="55" height="55" border="0"></a></p> </div> </div> <div id="right"></div> <div id="footertop"><img src="images/hendersonlogo.png" alt="Henderson Defense Industries, LLC." width="350" height="20" /></div> <div id="footerbottom"><a href="home.asp">Home</a> | <a href="viewContent.asp?idpage=1">Store Policies</a> | <a href="viewContent.asp?idpage=3">Shipping &amp; Returns</a> | <a href="viewContent.asp?idpage=2">Dealer Inquiries</a> | <a href="viewContent.asp?idpage=4">Contact</a></div> <div id="footerblack"> 2009-2010 HENDERSON DEFENSE INDUSTRIES / ALL RIGHTS RESERVED <br /> Website by <a href="http://www.blackreefdesigns.com" target="_blank">BlackReefDesigns.com</a></div> </div> </div> <!--#include file="inc_footer.asp" --> </body> </html>

And here is the CSS:


* {
margin: 0px;
padding: 0px;
}
p {
line-height: 180%;
}
body {
background-image: url(../images/tanbg.png);
margin: 0;
}
a img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/wrapperbg.png);
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #7A6F5A;
border-right-color: #7A6F5A;
border-bottom-color: #7A6F5A;
border-left-color: #7A6F5A;
}
#wrapper #navigation {
background-image: url(../images/topmidbar.png);
height: 16px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
padding: 4px;
}
#wrapper #toplowernavigation {
background-image: url(../images/midbar.png);
height: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-align: right;
padding: 2px;
}



#wrapper #logo {
height: 80px;
background-image: url(../images/headerlarge.png);
}
#leftnavcell {
height: 53px;
width: 120px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
background-color: #484135;
border: 1px solid #7A6F5A;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7B715E;
position: relative;
bottom: -70px;
}


#wrapper #bodyArea #left {
width: 205px;
float: left;
background-color: #383229;
height: 600px;
color: #7B715E;
font-size: 11px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: normal;
line-height: inherit;
padding: 5px;
}

#wrapper #bodyArea #right {
width: 783px;
float: right;
background-color: #FFFFFF;
}
#wrapper #logo #SearchBox {
height: 50px;
width: 225px;
float: right;
padding: 0px;
top: 25px;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
#wrapper #bodyArea #footertop {
height: 22px;
clear: both;
background-color: #474136;
text-align: center;
}
#wrapper #bodyArea #footerbottom {
height: 15px;
clear: both;
background-color: #383229;
text-align: center;
color: #FFFFFF;
}
#wrapper #bodyArea #footerblack {
height: 0px;
clear: both;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #6B6353;
font-weight: bold;
text-align: center;
}


Thank you in advance very much for your help.

Excavator
Apr 3rd, 2010, 11:12 AM
Hello BlackReef,
If you make #wrapper relative like this -
#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/wrapperbg.png);
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #7A6F5A;
border-right-color: #7A6F5A;
border-bottom-color: #7A6F5A;
border-left-color: #7A6F5A;
position: relative;
}

Then #leftnavcell can be positioned absolute inside it like this -
#leftnavcell {
height: 53px;
width: 120px;
padding: 5px;
background: #484135;
border: 1px solid #7A6F5A;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7B715E;
position: absolute;
left: 35px;
bottom: 45px;
}

BlackReef
Apr 3rd, 2010, 12:49 PM
Hello BlackReef,
If you make #wrapper relative like this -
#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
background-image: url(../images/wrapperbg.png);
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #7A6F5A;
border-right-color: #7A6F5A;
border-bottom-color: #7A6F5A;
border-left-color: #7A6F5A;
position: relative;
}

Then #leftnavcell can be positioned absolute inside it like this -
#leftnavcell {
height: 53px;
width: 120px;
padding: 5px;
background: #484135;
border: 1px solid #7A6F5A;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7B715E;
position: absolute;
left: 35px;
bottom: 45px;
}


Excellent! Thank you very much for your help. That DID fix the problem as you can see it is proper here:

http://hendersondefense.com.mytempweb.com/store/pc/home.asp

Thank you!

Now I just need to figure out to fill the blank space between the nav and the facebook/youtube icons lol.

BlackReef
Apr 9th, 2010, 03:52 AM
So what should I do when the page is too short and this <div> starts overlapping the links?

Here is an example:
http://hendersondefense.com.mytempweb.com/store/pc/msg.asp?message=1

Thank you,
-Joe

Excavator
Apr 9th, 2010, 04:52 AM
So what should I do when the page is too short and this <div> starts overlapping the links?


By using absolute positioning to place #leftnavcell at the bottom of #left it is removed from the natural flow of the document. That means the p's coming down from above can't push it down when #left starts being longer than #right.

Some bottom padding should fix the issue.
Try this -

#wrapper #bodyArea #left {
float: left;
background-color: #383229;
color: #7B715E;
font-size: 11px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: normal;
padding: 5px 5px 75px;
width: 207px;
}

BlackReef
Apr 9th, 2010, 05:00 AM
By using absolute positioning to place #leftnavcell at the bottom of #left it is removed from the natural flow of the document. That means the p's coming down from above can't push it down when #left starts being longer than #right.

Some bottom padding should fix the issue.
Try this -

#wrapper #bodyArea #left {
float: left;
background-color: #383229;
color: #7B715E;
font-size: 11px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: normal;
padding: 5px 5px 75px;
width: 207px;
}


That fixed it! I am definitely humbled by your experience. I have ALOT to learn about CSS.

Thank you very much for your help,
-Joe

Excavator
Apr 9th, 2010, 05:46 AM
I have ALOT to learn about CSS.

You're in the right place - I've learned just about everything I know here in codingforums.com.