Menu
Hey All,
I’m pretty new to CSS (three weeks), and I’m having trouble trying to position
an image at the bottom of my leftnav div.
Here’s a link to the test page…
[URL=”http://www.buffalosoftware.net/newtest4.htm”]http://www.buffalosoftware.net/newtest4.htm
Here is the image I am trying to use…
[code=html]<a href=”http://www.lunarpages.com/id/buffsoft” onmouseover=”window.status=’http://www.lunarpages.com’;return true” onMouseOut=”window.status=”;return true”>
<img style=”border: none” src=”http://www.lunarpages.com/banners/images/static_125x40_01.gif” alt=”Lunarpages.com Web Hosting” /></a>
When I get it at the bottom using – position: absolute; – then I can’t get
it inside the leftnav div…When I get it inside the div, then I can’t get it to
go to the bottom.
I don’t know…I’m about to give up and forget it.
Thanks in advance for any help with this,
Ron
<div style="width:200px; height:400px; border:1px solid gray; [B]position:relative;[/B] padding-bottom:110px;">
this is the relative-positioned DIV
<img alt="This is the image" src="#" style="width:200px; height: 100px; background-color:blue; [B]position:absolute; left:0; bottom:0;[/B]" />
</div><!-- end "container" -->[/QUOTE]
Hey WebJoel,Do both, float:left; if it needs to be, and "position:relative;". I think that this would work. Here, 'relative' is not really 'positioning' anything (there are not left or right position coordinates given), you are merely setting-up that container to accept an absolute-positioned element to [I]it's[/I] 0,0 corner.
If I change the leftnav div from float: left; to position:relative, then the page
gets screwed up. Do I need to place another div inside the leftnav div to
accomplish this...if so how can I line it up?[/QUOTE]
[CODE]
#leftnav {
float:left;
position:relative;
overflow: hidden;
margin: 10px 0px 0px 12px;
width: 170px;
height: 96.4%;
text-align: center;
background-color: #808080;
border: 2px solid #9CB1C2;
background-image: url(images/leftnav.gif);
background-repeat: repeat-x;
background-position: top;
}
[/CODE][CODE]
position: relative;
float:left;
[/CODE][CODE]
margin: 10px 0px 0px 12px;
[/CODE][CODE]
left: 12px;
top: 10px;
[/CODE]yes...talking about the white 'lunarpages' image at the bottom of "left"
this works in firefox 2.0.0.4 for me...this doesn't show for you?
http://www.buffalosoftware.net/newtest6.htm [/QUOTE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd ">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
<style type="text/css">
/* body styles */
* {
margin: 0;
padding: 0;
}
html, body {
height: 101%; padding-bottom:10px;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #9CB1C2;
}
#wrapper {
min-height: 100%; height:100%;
width: 760px;
background-color: #F5F5F5;
border: 2px solid #74899A;
margin: 10px auto 2px auto;
}
/* font styles */
h1 {
font-size : 100%;
font-weight: bold;
text-align : center;
line-height: 300%;
color: #000078;
margin: 0px 0px 0px 0px;
}
h2 {
font-size : 100%;
font-weight: bold;
text-align : center;
color: #780000;
margin: 10px 0px 0px 0px;
}
p.mainleft {
/*font-family : sans-serif,arial,geneva,helvetica;*/
font-size : 100%;
font-weight: normal;
text-align : left;
text-indent : 20px;
color: #000000;
}
p.maincenter {
/*font-family : sans-serif,arial,geneva,helvetica;*/
font-size : 100%;
font-weight: normal;
text-align : center;
color: #000000;
}
/* space styles (1=16px) */
#sp8 {
height: 128px;
}
/* content styles */
#content {
position: relative;
text-align : center;
background-color: #F5F5F5;
/*background-color: #800000;*/
height: 96.4%;
width: 530px;
margin: 10px 25px 0px 207px;
}
* html #content {
margin: 10px 12px 0px 204px;
}
#content img {
position: absolute;
top: auto;
bottom: 25px;
left: 180px;
height: 69px;
border: 0;
}
/* navigation styles */
#leftnav {
position: relative;
float:left;
/*margin: 10px 0px 0px 12px;*/
left: 12px;
top: 10px;
width:170px;
height:96%;
text-align: center;
border: 2px solid #9CB1C2;
background: #808080 url(http://www.buffalosoftware.net/images/leftnav.gif ) repeat-x;
}
/*
* html #leftnav{
margin: 10px 0px 0px 6px;
}*/
#leftnav a:link {
color: #D2D2D2;
}
#leftnav a:visited {
color: #D2D2D2;
}
#leftnav a:hover {
color: #E6E6E6;
font-weight: bold;
}
p.nav {
font-size : 100%;
font-weight: normal;
text-align : center;
line-height: 220%;
}
.imglogo {
position:relative;
margin-top:4px;
margin-left: 1px;
margin-bottom: 30px;
height: 112px;
}
.imglunar {
bottom: 6px;
left: 5px;
height: 45px;
width: 130px;
border: 0;
}
* html .imglunar{
bottom: 3px;
}
/* bottom nav styles */
#navlinks {
position: absolute;
top: auto;
bottom: 0px;
left: 0px;
background-color: #F5F5F5;
height: 10px;
width: 530px;
}
/* footer styles */
#footer {
clear: both;
width: 760px;
text-align: center;
background-color: #9CB1C2;
height: 20px;
margin: 8px auto 0 auto;
}
p.smfont{
font-size : 80%;
font-weight: normal;
text-align : center;
color: #000000;
}
</style>
<base href="http://www.buffalosoftware.net/ " />
</head>
<body>
<div id="wrapper" style="position:relative;">
<div id="leftnav">
<img src="images/buffsoftlogo.gif" alt="Buffalo Software" style="margin-top:10px; width:113px; height:112px;" />
<p class="nav"><a href="index.htm">Home</a></p>
<p class="nav"><a href="products.htm">Products</a></p>
<p class="nav"><a href="contact.htm">Contact</a></p>
<a href="http://www.lunarpages.com/id/buffsoft " style="position:absolute; left:10px; bottom:20px; width:140px; height:40px; padding:0; margin:0; border:2px solid blue; background-color:gray; background-image:url(http://www.lunarpages.com/banners/images/static_125x40_01.gif)"></a >
</div>
<div id="content" style="">
<h1>Buffalo Software</h1>
<p class="mainleft">Welcome to the home of Buffalo Software. Thank you for your interest in our products. We take pride in creating innovative, high quality, and easy to use software. By the way, all of our software is FREE! So, take them for a test drive, and see what you think. Enjoy!</p>
<div id="sp8"></div>
<h1>coming soon...</h1>
<p>The PC Timer 5.0</p>
<p>The Patriot 3.0</p>
<p><a href="http://www.buffalofieldcampaign.org"><img src="images/savebuffalo.gif" alt="Save the Buffalo!" width="170" height="69"/></a></p>
<div id="navlinks"><p class="smfont"><a href="index.htm">Home</a> •
<a href="products.htm">Products</a> •
<a href="contact.htm">Contact</a></p>
</div>
</div>
<div id="footer" style="position:relative; top:4px; width:756px; padding:7px 0 2px 0; border:2px solid #f5f5f5; border-top:5px solid f5f5f5; margin-bottom:10px;"><p class="smfont">Copyright © 2007 Buffalo Software - All rights reserved. Please read our <a href="privacy.htm">Privacy Statement.</a></p></div>
</div>
</body>
</html>[/QUOTE]
0.1.9 — BETA 6.17
