...

View Full Version : Aligning Image



Asimof
05-17-2009, 08:05 PM
Hi,

I have an img in a sidebar, which i want to align at the bottom of the page. Instead of inserting a string of " <p>&nbsp;</p>" as in the code below, how else can i do it.

Thanks.


<div id="sidebar-b">
<h2>Squadron News</h2>
<div class="scroll">
<h3>Jan 01 2009</h3>
<p class="news"> Matthew has joined our squadron, and will be getting his uniform soon </p>
<h3>Dec 02 2005</h3>
<p class="news"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<img src="img/next_gen.jpg" alt="Next Generation" title="Next Generation" height="80" width="170" />
</div>

twistedsoul
05-17-2009, 09:43 PM
whats ur css code?

Asimof
05-17-2009, 10:17 PM
I have copied it below for you. It is the Div #sidebar-b that i want the img in.

body {
margin : 20px;
padding : 0;
font : 73% "Trebuchet MS", verdana, arial, sans-serif;
color : #666;
background : #003250 url("img/img/bgd.png") repeat;
}
#container {
width : 750px;
border : 5px solid #fff;
margin-left : auto;
margin-right : auto;
padding : 10px;
color : #666;
background : #f2f2f5;
}
/*TOP BANNERs*/
#banner {
float : left;
width : 510px;
height : 160px;
padding : 0;
margin-bottom : 15px;
color : #666;
background : inherit;
}
#bannerb {
float : right;
width : 200px;
margin : 0 0 15px 10px;
padding : 0;
color : #666;
background : #f2f2f5;
}
/*TOP MENU*/
#navcontainer {
clear : both;
width : 100%;
}
#navcontainer ul {
float : left;
width : 100%;
padding-left : 0;
margin-left : 0;
background : #036;
color : #fff;
}
#navcontainer ul li {
display : inline;
}
#navcontainer ul li a {
float : left;
padding : 0.2em 1em;
text-decoration : none;
border-right : 1px solid #fff;
background : #036;
color : #fff;
}
#navcontainer ul li a:hover {
background : #a1aac9;
color : #fff;
}
#active a:link, #active a:visited, #active a:hover {
background : #a1aac9;
color : #fff;
}
/*CENTRE CONTENT*/
#content {
padding : 10px;
margin-left : 190px;
margin-right : 190px;
background : inherit;
color : #666;
}
/*LEFT CONTENT*/
#sidebar {
float : left;
width : 170px;
margin : 0 0 0 0;
padding : 10px;
color : #666;
background : #f2f2f5;
}
/*LEFT MENU*/
#menu {
width : 160px;
padding : 10px 0 0 0;
}
#menu ul {
margin : 0;
padding : 0;
list-style-type : none;
}
#menu li {
margin : 0 0 0.1em 0;
}
#menu a {
display : block;
width : 140px;
padding : 0.1em 0.8em;
text-decoration : none;
color : #fff;
background : #003366;
}
#menu a:hover {
background : #a1aac9;
color : #fff;
}
/*RIGHT CONTENT*/
#sidebar-b {
float : right;
width : 170px;
margin : 0;
padding : 10px;
background : #f2f2f5;
border-left : 1px solid #999;

color : #666;
}
/*RIGHT SCROLLBAR*/
div.scroll {
overflow : auto;
height : 15em;
width : 140px;
padding : 1ex;
color : #333;
background : #f2f2f5;
border : 1px solid #eee;
margin : 20px 0 25px 10px;
}
/*FOOTER*/
#footer {
clear : both;
padding : 5px;
margin-top : 5px;
color : #bbd2e0;
background : #003366;
}
#footer a:link, #footer a:visited {
background : inherit;
color : #eee;
text-decoration : none;
}
#footer a:hover {
border-bottom : 1px dashed #f2f2f5;
background : inherit;
color : #f2f2f5;
}
/*TYPOGRAPHY*/
h1, h2 {
margin : 0 0 10px 5px;
letter-spacing : 3px;
font-size : 120%;
color : #003366;
background : inherit;
}
h3 {
font-size : 110%;
color : #826c45;
background : inherit;
}
/*LINKS*/
a {
color : #826c45;
font-weight : bold;
text-decoration : none;
background : inherit;
}
a:hover {
color : #697899;
background : inherit;
}
/*CLASSES*/
.news {
font-size : 100%;
background : inherit;
color : #333;
}
.sitename {
font-size : 180%;
margin : 0 0 10px 0;
color : #826c45;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}

Excavator
05-18-2009, 12:03 AM
Hello Asimov,
Have you tried making that a background image? Pretty easy to put it at the bottom of a fluid height column like yours.
Try this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#sidebar-b {
float : right;
width : 170px;
margin : 0;
padding : 10px;
background : #f2f2f5 url(img/next_gen.jpg) no-repeat bottom;
border-left : 1px solid #999;
color : #666;
}
</style>
</head>
<body>
<div id="sidebar-b">
<h2>Squadron News</h2>
<div class="scroll">
<h3>Jan 01 2009</h3>
<p class="news">
Matthew has joined our squadron, and will be getting his uniform soon
</p>
<h3>Dec 02 2005</h3>
<p class="news">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit
tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante.
</p>
<!--end scroll--></div>
<!--end sidebar-b--></div>
</body>
</html>


You can go back and edit your last post so your code is in a little scroll box like mine. Just add
around your code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum