PDA

View Full Version : Making a re-sizeable header in css



json2001
Aug 22nd, 2007, 01:32 AM
Hello - great forums! Most active css/html forums i have seen yet!

I am new to css. I have been able to hack and slash together some css and html that looks good when viewed optimally - for me that is in firefox on a 1920x1200 monitor and at my default font size in firefox.

My main problem at the moment is getting my heading correct. When I load it in firefox my List navigation menu appears aligned at the bottom left corner of my heading div region. IE seems to always interpret the margins slightly differently and not put the menu where I want. Also when i scale the text of the entire page the look does not stay the same - in fact when you go large enough on the text size the entire navigation bar disappears.

Here is the css:


* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;

}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #999999;
height: 150px;
margin: 10px 0px 5px 0px;
background-color: #CCCCCC;
}
#leftcolumn {
color: #333;
border: 1px solid #666666;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 600px;
width: 753px;
float: left;
background-color: #FFFFFF;
}
#rightcolumn {
float: right;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 600px;
width: 120px;
display: inline;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #666666;
margin: 0px 0px 10px 0px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: center;
}h1 {
text-decoration: none;
font-size: 64px;
margin-top: 16px;
}
/*Navigation and header items*/
#menu
{
padding:0;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
white-space:nowrap;
list-style-type:none;
margin-top: 46px;
margin-left: -10px;
}
#menu li {
display:inline;
}
#menu li a
{
padding:0.2em 0.5em;
color:#000;
text-decoration:none;
float:left;
background-color: #CCCCCC;
font-weight: bold;

}



#menu li a:hover
{
background-color: #EEEEEE;
}
#menu li#active a{
background-color:#B7B7B7;
}
#login {
float:right;
display:inline;
}
img{
float:left;
}


And here is the Html snippet i am working with I have a 110x110px image as a place holder in the heading:


<div id="wrapper">

<!-- Begin Header -->
<div id="header">

<div id="login">
<form method="post" action="*login.php">
Name <input type="text" id="username" />
Password
<input type="password" id="password" />
<input type="submit" name="submit" value="Log In" />
</form>
</div>
<img alt="logo" width="110" height="110" id="Logo" style="background-color: #333333" />
<h1>Heading 1</h1>
<ul id="menu">
<li id="active"><a href="*.php">List 1</a></li>
<li><a href="#nogo">List 2</a></li>
<li><a href="#nogo">List 3</a></li>
</ul>

</div>
<!-- End Header -->

<!-- Begin Left Column -->
<div id="leftcolumn">

</div>
<!-- End Left Column -->

<!-- Begin Right Column -->
<div id="rightcolumn">

Advertising
<!-- End Right Column -->

<!-- Begin Footer -->
</div>
<div id="footer">

<p>Contact | Privacy | Copyrights| Advertise</p>
</div>
<!-- End Footer -->

</div>


Any help would be greatly appreciated! Set me straight!

Thanks!:)

garydarling
Aug 23rd, 2007, 08:20 AM
The fixed height of your header div is causing the menu to get pushed below the 150px limit of the div when you increase the text size. You can achieve better results by allowing #header to grow with the text. The height declaration is unnecessary as the div will wrap around its contents by default. Try these CSS adjustments:

#header {
color: #333;
width: 900px;
float: left;
padding: 10px 10px 0 10px;
border: 1px solid #999999;
/*height: 150px;*/
margin: 10px 0px 5px 0px;
background-color: #CCCCCC;
}

#menu
{
padding:0;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
white-space:nowrap;
list-style-type:none;
/*margin-top: 46px;*/
margin-left: -10px;
clear:both;
}


Gary

json2001
Aug 23rd, 2007, 08:25 AM
Thanks gary!


I fixed it by making the navigation in its own div. Is that an appropriate fix or will it bring me headache down the road?

garydarling
Aug 23rd, 2007, 08:39 AM
That was going to be my first suggestion; nothing wrong with that approach. I just like tweaking code I guess. :thumbsup:

Gary

json2001
Aug 23rd, 2007, 08:41 AM
Excellent :) Really appreciate the help gary! Day 3 of css is treating me pretty well but teaching me quite a few hard, agonizing lessons along the way.