image - bottom alignment [Archive] - Dynamic Drive Forums

View Full Version : image - bottom alignment

jhatter

02-22-2010, 10:32 AM

I have a side bar div, containing my vertical navigation, this is correctly positioned at the top.

I would like to place two separate image files side by side at the bottom of this div. The only way I can successfully do this is by putting a large margin between the bottom of the navigation and the top of the two logos.

Please can someone suggest a better, easier way to do this?

Thanks

<div id="sidebar">
<div id="nav">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Tosti</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="fb_box">
<div class="pic">
<img src="imgs/fb_logo.gif" width="28" height="28" /></div>
</div>
<div class="tw_box">
<div class="pic">
<img src="imgs/tw_logo.gif" width="28" height="28"/></div>
</div>

</div>



#nav { padding:0px 40px 0px 0px; }

#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav li {
display:block;
margin:0px;
padding-bottom:10px;
}

#nav a:link ,#navigation a:active, #navigation a:visited {
font: 13px Verdana, Arial, Helvetica, sans-serif;
color: #cb062b;
display:block;
text-decoration:none;
text-align:right;
}

#nav a:hover { color: #eba0ae; display:block; text-decoration:underline; }

#nav li.active a { color: #ffffff;}

#sidebar {
float:left;
width:200px;
height:430px;
padding:0px;
border:1px solid;
}

.fb_box {
float:right;
width: 32px;
height: 32px;
margin:0px;
vertical-align:bottom;
position:relative;
padding-top: 215px;
padding-right: 37px;
}

.tw_box {
float:right;
width: 28px;
height: 28px;
margin:0px;
vertical-align:bottom;
position:relative;
padding-top: 219px;
padding-right: 5px;
}

.pic {
height: 28px;
width:28px;
border: 0px;
position:absolute;
bottom:0;
background-color:#0066FF
}

stringcugu

02-22-2010, 11:52 AM

jhatter

02-22-2010, 03:16 PM

Thanks for your reply stringcugu.

I'm not sure what you've suggested here, maybe I haven't explained myself fully. Would you mind going through why your suggestion offers up a simpler solution than mine?

Not sure what the images you have added in your code were meant to do?

I look forward to your reply.

simcomedia

02-22-2010, 04:20 PM

You could do it using positioning. For example (and explanation), the #sidebar is the containing div into which you want to place the images. Therefore it should be set to position: relative;

Then, your two image divs should be set to position: absolute; and using the top: 100px; and left: 50px; (numbers are just examples, not specific for use) they will position themselves accordingly from the top and left borders of the container.

So, with that said:

#sidebar {
float:left;
width:200px;
height:430px;
padding:0px;
border:1px solid;
position: relative;
}

.fb_box {
float:right;
width: 32px;
height: 32px;
margin:0px;
position:absolute;
top: 215px;
right: 37px;
background-color:#0066FF
}

.tw_box {
float:right;
width: 28px;
height: 28px;
margin:0px;
position:absolute;
top: 219px;
right: 5px;
background-color:#0066FF
}

You don't really need this (.pic below) since it's not doing anything specific. The background color was added to the two div's above. The tricky part is determining the coordinates from top and side to position the divs. What you may consider doing is wrapping both these into one div that is position:absolute; so you just need one set of coordinates instead of two.

.pic {
height: 28px;
width:28px;
border: 0px;
position:absolute;
bottom:0;
background-color:#0066FF
}

You might try:

#wrapper {
position: absolute;
top: 100px;
left: 25px;
}

Then:

<div id="wrapper">
<div class="fb_box">
<img here>
</div>
<div class="tw_box">
<img here>
</div>
</div> /* end of wrapper */

stringcugu

02-23-2010, 07:01 AM

if you want the images on the bottom in side the DIV

<STYLE type=text/css>
.butover{background-color:#8e8462;color:#c9bda9;height:15px;width:15px;font-weight:bold;cursor:hand;cursor:pointer;border:0px solid black}
.butout{background-color:#c9bda9;color:#8e8462;height:15px;width:15px;cursor:hand;cursor:pointer;border:0px solid black}
</STYLE>
<DIV style="position:absolute; left:0px; top:0px; width:198px; height:360px;border:4px solid #8e8462;text-align:center;background-color:#c9bda9">
<DIV id="cont_div" style="position:absolute; left:0px; top:0px; width:150px; height:200px;clip:rect(0,150,260,0);font-size:12px;color:#808000;cursor:hand">
<div id="div_one" style="position:absolute; left:0px; top:0px; width:150px; padding:5px;filter:alpha(Opacity=100);text-align:left;background-color:#c9bda9"><ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Tosti</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
</ul></div>
<div id="div_two" style="position:absolute; left:0px; top:0px; width:150px; padding:5px;filter:alpha(Opacity=100);text-align:left;background-color:#c9bda9"></div>
</DIV>
<form style="position:relative; left:0px; top:335px">
<span style="color:#8e8462;font-size:12px">ON<span id="pause_time"> </span>THE BOTTOM</span>
<img src="imgs/fb_logo.gif" width="28" height="28" /><img src="imgs/fb_logo.gif" width="28" height="28" />
</form>
</DIV>