sepoto Posted September 4, 2011 Share Posted September 4, 2011 I just want my header to have a simple two column layout with the logo on the left and the menu on the right laying horizontally. I have followed the two column layout example out of the CSS Cookbook. I can't seem to get it to work properly. The page can be viewed in its current state at http://www.sepserver.net/dsg/. Please help! <?phprequire_once('d_login.php');require_once('i_rsslib.php');require_once('f_lib.php');$db = new mysqli($db_hostname, $db_username, $db_password, $db_database);$cemail = $_COOKIE['dsgemail127'];$cpassword = $_COOKIE['dsgpassword127'];if($cemail) { logIn($db, $cemail, $cpassword); }?><!DOCTYPE HTML><html><head><title>Daily Sports Guide</title><style>body { background-color: black; text-align: center; }img { border: none; margin: 0; padding: 0; }a:visited { color: red; }#wrapper { width: 800px; margin: 0 auto; background-color: black; height: auto; text-align: left;border: 1px solid #EBEBEB; padding: 5px 5px 5px 5px; }#header { margin: 0; padding: 0; width: 100%; }#hcolumnLeft {float: left;width: 300px;background: #black;margin: 0;padding: 0;}#hcolumnRight {width: 490px;margin: 0;padding: 0;}</style><style>#nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1;}#nav a { color: white; background-color: black; text-align: center; display: block; width: 8em;}#nav a:hover { display: block; background: blue; width: 8em;}#nav li { /* all list items */ float: left; width: 8em; /* width needed or else Opera goes nuts */} #nav li ul { /* second-level lists */ position: absolute; border: 1px solid green; background: black; width: 8em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */} #nav li ul ul { /* third-and-above-level lists */ margin: -1em 0 0 10em;} #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em;} #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */ left: auto;}</style></head><body><div id="wrapper"><!-- Wrap in a center aligned div --><div id="header"><!-- The Header --><div id="hcolumnLeft"><img src="img/logo.jpg"></div><div id="hcolumnRight"> <!-- Suckafish navigation menu --> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">My Profile</a> <ul> <li><a href="#">My Guide</a></li> <li><a href="#">DSG Sports Bars</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul><!-- End #nav --></div></div><!-- End #header --></div><!-- End #wrapper --></body></html> Link to comment Share on other sites More sharing options...
Drycodez Posted September 5, 2011 Share Posted September 5, 2011 ... Link to comment Share on other sites More sharing options...
sepoto Posted September 5, 2011 Author Share Posted September 5, 2011 Thank you for your reply. I will try that in the future. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.