Simple Fix I Just Can't Figure Out

twilitegxa · 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?

jasonc · June 22, 2011

Hey,

Can you also supply the images.

cssfreakie · June 22, 2011

Hi twilitexa, an online example would be much more easier to work with.

Sign In

Simple Fix I Just Can't Figure Out

Recommended Posts

twilitegxa

Link to comment

Share on other sites

jasonc

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information