twilitegxa Posted June 22, 2011 Share Posted June 22, 2011 I need advice on two aspects of this website I'm working on. 1) I want my gray bar to extend across the entire browser and not the size of the container. 2) My hover images are lining up the way I want them to. I want to hover image to align with the bottom of the gray bar, but I can't seem to get it to move with margin-top. What else can I try? Here is my site: <!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>Untitled Document</title> <link href="./css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main_container"> <div id="logo"><> <div id="nav_container"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Train With Us</a> </li> <li> <a href="#">Personal Training</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Resources</a> </li> <li> <a href="#">Gallery</a> </li> <li> <a href="#">Contact Us</a> </li> <ul> <> <div id="header"> <div id="header_video_container"> <iframe width="437" height="237" src="http://www.youtube.com/embed/nZMwKPmsbWE" frameborder="0" allowfullscreen></iframe> <> <div id="follow_container"> <div id="follow_icon"> <a href="#"><img src="images/bing.png" /></a> <a href="#"><img src="images/facebook.png" /></a> <a href="#"><img src="images/twitter.png" /></a> <> <> <> <> <div id="first_headline"><h1>Testin</h1><p> Hello and Welcome </p><> </body> </html> And me CSS: html,body { width: 100%; height: 100%; margin: 0px; } #main_container { width: 1259px; margin: 0 auto; } #logo { margin-left: 147px; height: 54px; width: 166px; background: url('../images/logo.png') no-repeat; } #nav_container { width: 100%; height: 30px; background: url('../images/menu_bg.png') repeat-x; margin: 0px; padding: 0px; overflow: visible;} #header { width: 958px; height: 330px; margin: 0 auto; background: url('../images/header.png') no-repeat; margin-top: 10px; } #header_video_container { background: #000; width: 437px; color: #fff; height: 237px; margin-left: 459px; margin-top: 36px; position: absolute; } #follow_container { width: 365px; height: 58px; background: url('../images/follow_us.png') no-repeat; margin-left: 38px; margin-top: 265px; position: absolute; } #follow_icon { margin-left: 150px; margin-top: 9px; position: absolute; width: 365px; } #follow_icon img { margin-left: 20px; border: 0px; } #nav_container li { display: inline-block; height: 33px; margin: 4px; text-align: center; width: 121px; } #nav_container ul li:hover { background: url('../images/menu_hover.png') no-repeat; display: inline-block; height: 33px; margin: 4px; text-align: center; width: 121px; } #first_headline { width: 898px; height: 146px; background: url('../images/first_headline_container.png') no-repeat; margin: 0 auto; } Can anyone help? Link to comment https://forums.phpfreaks.com/topic/240054-simple-fix-i-just-cant-figure-out/ Share on other sites More sharing options...
jasonc Posted June 22, 2011 Share Posted June 22, 2011 Hey, Can you also supply the images. Link to comment https://forums.phpfreaks.com/topic/240054-simple-fix-i-just-cant-figure-out/#findComment-1233184 Share on other sites More sharing options...
cssfreakie Posted June 22, 2011 Share Posted June 22, 2011 Hi twilitexa, an online example would be much more easier to work with. Link to comment https://forums.phpfreaks.com/topic/240054-simple-fix-i-just-cant-figure-out/#findComment-1233339 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.