Resolved Logo and Nav Links Changing Position With Browser Window Expansion

WebLizzard · 12-12-2011, 06:37 PM

I'm back again... I am working on this site for a friend, and I notice my logo and header links kind of get moved over to the left hand side of the site when the browser window is expanded to it's fullest.

The content seems to stay the same in the middle, positioned perfectly, no matter how big or small the browser window is.

I have tried playing around with the absolute and relative positioning, but nothing seems to be working. I am basically trying to get the logo and navigation to stay in the exact spot when the browser window is expanded. I have a header div with my navigation within that header. My logo is also within the header div. This all comes before my body.

Code:

<div id="header">
  <div id="Imghead"><p>&nbsp;</p></div>
<div id="navtabs">
                        <ul id="navCircle">
<!-- CSS Tabs -->
<li><a href="http://www.ventime.com">home</a></li>
<li><a href="http://www.ventime.com/venT-on-muppets.html">venT on it!</a></li>
<li><a href="http://www.ventime.com/daily-therapy.html">daily therapy</a></li>

    </ul>
  </div>
  
</div>

This is my CSS code. I am thinking I have to change positioning somewhere in here... just stuck on what and where. Any ideas? Thanks in advance for everyone's help. This forum has saved me a number of times!

Code:

#header{width:100%; height:130px; position:relative; margin:0 auto; background-color: #000;}
#header #Imghead{
	width:177px;
	height:186px;
	color:#666;
	position:absolute;
	top:0px;
	left:71px;
	padding:0 0 0 30px;
	background-image: url(images/bigger-clock-logo.png);
}

#header #Imghead p{
	color: #FFF;
}
#header #Imghead img{width:301px; height:78px;}


#navtabs {

        width: 280px;
        padding: 15px;
        margin-top: 63px;
		margin-left: 600px;
position: fixed;
       background-color: #000;
		
 }

/* circle */

#navCircle {
        margin: 0;
        padding: 0 0 20px 15px;
        border-bottom: 1px solid #9FB1BC;

}

#navCircle li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
		        
}

#navCircle a:link, #navCircle a:visited {
        float: left;
        font-size: 11px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #FFF;
		        background: #000;
}

#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
        padding-bottom: 6px;
        color: #CFC;
        background: url(tabs/nav-underscore.gif) no-repeat bottom center;
	
}

Excavator · 12-12-2011, 06:50 PM

Hello WebLizzard,
If you nest #header in another container you can make #header center like the rest of your content and still have your black bar across the top.

Look how it acts when you do this -

Code:

#header {
    background-color: #000000;
    height: 130px;
    margin: 0 auto;
    position: relative;
    width: 750px;
}

WebLizzard · 12-12-2011, 07:05 PM

It took me a good 20 minutes, but I finally got it. I had to make a container like you told me to. You definitely helped me, so thank you so much.

~Liz

Excavator · 12-12-2011, 07:13 PM

Oh yes, that works much better.
Interesting site...

WebLizzard · 12-12-2011, 07:15 PM

Thanks - I am actually making it for a friend. He had some really good ideas. Feel free to vent on it if you want :-)

P.S.- I am still learning CSS and all that fun stuff. I'm sure you can tell. I appreciate all your help.