Styling the footer

All Forums >> [Web Development] >> Cascading Style Sheets

Message

vision2000 -> Styling the footer (6/29/2005 8:09:41)
Hi, How can I make the right hand image be parrellel to the left one with the text left aligned between the 2 images in the footer? http://discount-real-estate-listings-md.com/index3.shtml Please scan my css style sheet to see if anything is wrong (it validates) I am just beginning to layout my web sites using css exclusively. Thank you

Tailslide -> RE: Styling the footer (6/29/2005 8:25:44)
Do you want the images to be within the black border of the footer or outside? If you want them within the black footer border then I'd remove the Footerleft and footer-right div names and do this: Add this to the CSS: #footer img {float:left; padding-right:5px;} .floatright{float:right; padding-left:5px;} Change your HTML to this: <div id="footer"> <img src="lennphotot.jpg" /><span class="floatright"><img src="FairHousing.gif" /></span> Homefinders.com Broker: Lenn Harley Licensed real estate broker in Maryland and Virginia Homes@Homefinders.com 800-711-7988 Copyright © 2005 Discount Real Estate Listings Maryland All Rights Reserved </div> BTW - It'll make life a lot easier for you if you stick all that CSS into a separate CSS file - that way it will apply globally throughout your site and you only have to edit it once! Edit: forgot to say - you'll need to give your footer a specific height say height:100px because otherwise the border won't encompass the images in Standards compliant browsers. Also possibly worthwhile giving your footer a margin-bottom: 10px just to take it off the bottom of the page a bit - just a thought that last bit!

vision2000 -> RE: Styling the footer (6/29/2005 10:23:45)
Thanks for the tips - how can I center the footer on the page and left align the text without it hitting the image http://discount-real-estate-listings-md.com/index3.shtml I left the css visible so it is easier to troubleshoot...but will place in an external style sheet later.

Tailslide -> RE: Styling the footer (6/29/2005 11:11:41)

Hi

It's a case of playing with the margins - so you'd need to do this:

#footer{
height:100px;
width: 567px;
background-color: #E6E6DC;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding:5px;
text-align:center;	
margin:0 auto 5px auto;    
border: 1px solid #000000;
}

vision2000 -> RE: Styling the footer (6/29/2005 11:20:50)
Thanks that worked great!

Page: [1]

6.201172E-02