Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Aligning Image

  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Aligning Image

    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>

  • #2
    New Coder twistedsoul's Avatar
    Join Date
    Jul 2008
    Location
    UK
    Posts
    94
    Thanks
    3
    Thanked 1 Time in 1 Post
    whats ur css code?

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }
    Last edited by Asimof; 05-17-2009 at 11:20 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    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 -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •