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> Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/ Share on other sites More sharing options...
gevans Posted June 1, 2009 Share Posted June 1, 2009 CSS issue not php Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-846832 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? Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-846869 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 Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-847144 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> Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-847342 Share on other sites More sharing options...
williamZanelli Posted June 2, 2009 Author Share Posted June 2, 2009 anybody? Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-847622 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 Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-847965 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. Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-847985 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. Link to comment https://forums.phpfreaks.com/topic/160474-css-display-issue/#findComment-848644 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.