williamZanelli Posted June 1, 2009 Share Posted June 1, 2009 Hey guys, I'm trying to achieve something relativly simple. I have a menu bar, across the top of my webpage, I want the logo to be on the left, and the text to be on the right, This i can achieve via float. The problem is I want the text to be at the bottom of the block and not the top.. any ideas on how I can achieve this? Thanks in advance for your thoughst, my code is below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #wrap{ width: 990px; margin: 0 auto; border: #CCCCCC 1px; border-style: solid; } #top_banner { width: 725px; margin: 0 auto; } #logo img{ height: 100px; width: 200px; float:left; } #topMenu ul li{ float:right; padding-right: 20px; list-style:none; display: inline; text-decoration: none; border: solid 2px #FF0000; } #topMenu { display:block; } #top_bar{ border-top: solid 2px #999999; display:block; } body { color: purple; /*background-color: #d8da3d */} </style> </head> <body> <div id="wrap"> <div id="top_banner"> <img src="images/aa banner.jpg" /> </div> <div id="top_bar"> <div id="logo"> <img src="images/txt_logo.jpg" /> </div> <div id="topMenu"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
gevans Posted June 1, 2009 Share Posted June 1, 2009 CSS issue not php Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted June 1, 2009 Author Share Posted June 1, 2009 Thanks for that Gevans. How do I change from PHP to CSS forum? Quote Link to comment Share on other sites More sharing options...
lonewolf217 Posted June 1, 2009 Share Posted June 1, 2009 the topic has already been moved to the CSS form on-topic, can you try using "vertical-align:bottom;" to see if it solves your problem Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted June 1, 2009 Author Share Posted June 1, 2009 Thanks for the message LoneWolf I've tried your suggestion, but still cant get iut right, here's my code, simplified. Where am I going wrong?! ??? ??? i'm pretty sure it's an issue with vertical-aligh. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #logo img{ height: 100px; width: 200px; float:left; } #topMenu ul li{ float:right; padding-right: 20px; list-style:none; text-decoration: none; border: solid 2px #FF0000; font-weight:bold; } #topMenu { vertical-align:bottom; } </style> </head> <body> <div id="top_bar"> <div id="logo" > <img src="images/txt_logo.jpg" /> </div> <div id="topMenu" > <ul > <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted June 2, 2009 Author Share Posted June 2, 2009 anybody? Quote Link to comment Share on other sites More sharing options...
williamZanelli Posted June 2, 2009 Author Share Posted June 2, 2009 I still dont have a solution for this.. can some help please.. Thanks Will Quote Link to comment Share on other sites More sharing options...
Axeia Posted June 2, 2009 Share Posted June 2, 2009 Float the ul to the right along with the li's, should free up space for the image to float left, I think. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted June 3, 2009 Share Posted June 3, 2009 Why not simply use some positioning? Instead of css float? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> #wrap { width: 990px; margin: 0 auto; border: #CCCCCC 1px; border-style: solid; } #top_banner { width: 725px; margin: 0 auto; min-height: 120px; } #logo img{ height: 100px; width: 200px; float: left; } #topMenu li{ float: right; padding-right: 20px; list-style-type: none; text-decoration: none; border: solid 2px #FF0000; } #topMenu { position: absolute; bottom: 0; right: 0; clear: both; margin: 0; padding: 0; } #top_bar{ position: relative; border-top: solid 2px #999999; clear: both; min-height: 120px; } body { color: purple; } </style> </head> <body> <div id="wrap"> <div id="top_banner"> <img src="images/aa banner.jpg" /> </div> <div id="top_bar"> <div id="logo"> <img src="images/txt_logo.jpg" /> </div> <div id="topMenu"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> </div> </div> </div> </body> </html> There is no need to apply display: block; to elements that are blocks by default. Also remember to clear your floats, so that the parant dosn't collapse. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.