Hello, Right now I am in the process of converting a psd to html and css. Everything is done, however with my top bar (will give a link to the site) is giving me issues. The problem is the positioning of the elements in the top bar (logo and text) changes depending on the size of your screen. What I need is a solution to stop this issue from happening. Does anyone know how I can do this in a practical way? I will include the codes for my index page where this top div appears and my css file. Let me know if you guys know what I can do to get a static position... The website I am working on: Client Area I need this solved soon... Please help! Index.php (up until where div top appears): <!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=utf-8" /> <title><?php echo $sitename; ?> - Client Login</title> <link rel='stylesheet' href='style.css' /> <link rel='stylesheet' href='default.css' /> <script type="text/javascript" src="js/liveval.js"></script> </head> <body> <div id='container'> <div id='top'> <div id='logo'><a href='index.php'><img src='images/logo.png' alt='Kuddle.net' border='0' /></a></div> <p class='right'><?php if(isset($_SESSION["auth_username"])) { ?>Logged in as <?= $_SESSION["auth_username"]; ?> - <a href='logout.php'>Logout</a><?php } else { ?>Client <a href='index.php'>Login</a> or Admin <a href='http://dan.kuddle.net/cworks/admin'>Login</a><? } ?></p> </div> Code (markup): And in style.css (default.css does not apply): @charset "utf-8"; /* CSS Document */ body { background: url(images/background.jpg); font-family: "Lucida Grande",Verdana,sans-serif; font-size: 12px; color: rgb(245,245,220); margin: 0px; } h1, h2 { padding: 0px; margin-bottom: 10px; margin-top: 0px; } #container { width: 100%; height: 100%; margin: 0px; } #top { width: 1165px; height: 59px; padding-left: 100px; padding-right: 100px; background: url(images/tint.png) repeat-x; margin: 0px; } #logo { padding-top: 8px; float: left; display: inline-block; } .right { padding-top: 22px; float: right; } #cont-top { width: 960px; padding: 0px; margin-top: 35px; margin-left: auto; margin-right: auto; } #cont-bottom { width: 960px; padding: 0px; margin: 0px; margin-left: auto; margin-right: auto; background: url(images/bottom.png) no-repeat; } #content { width: 960px; height: 500px; margin-left: auto; margin-right: auto; font-size: 12px; color: black; background: url(images/mid.png) repeat-y; } #sidebar { width: 224px; height: 490px; padding-top: 10px; border-left: 1px solid gray; background: url(images/sidebar.png) repeat-y; float: right; } #sidebar h2 { font-size: 1.8em; padding-left: 10px; } #sidebar p { padding-left: 10px; } #main { float: left; height: 100%; padding-top: 10px; padding-left: 10px; width: 700px; } Code (markup): Thanks for the help! -Brett
If you specify a px value (960px same as cont_top) rather than 100% to the container you should have more luck
Also change: #logo { padding-top: 8px; float: left; display: inline-block; } to #logo { padding-top: 8px; float: left; width: ???px; (specify logo width here) }
I would.. the problem with that is I want that top bar to take up your whole screen regardless of your screens width. If I set the container width, then the top bar will no longer take up the entire top area of the screen. Any solutions that would provide me with that result? Thanks for the help!
UPDATE: For anyone that might find this topic in the future, I found a solution to my problem. Instead of having the width defined in CSS, I simply added the following javascript code to my html file and made some minor modifications to the original code... <script type='text/javascript'> function GetWidth() { var x = 0; if (self.innerHeight) { x = self.innerWidth; } else if (document.documentElement && document.documentElement.clientHeight) { x = document.documentElement.clientWidth; } else if (document.body) { x = document.body.clientWidth; } return x; } </script> Code (markup): And then I changed my top div to say the following: <div id='top' style='width: GetWidth()'> <div id='logo'><a href='index.php'><img src='images/logo.png' alt='Kuddle.net' border='0' /></a></div> <p class='right'><?php if(isset($_SESSION["auth_username"])) { ?>Logged in as <?= $_SESSION["auth_username"]; ?> - <a href='logout.php'>Logout</a><?php } else { ?>Client <a href='index.php'>Login</a> or Admin <a href='http://dan.kuddle.net/cworks/admin'>Login</a><? } ?></p> </div> Code (markup): Works like a charm! Thanks for the help!
After reading your post, actually your post is very useful for me. I save your post in my mind , actually i had a problem with me also thanks for sharing.