Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ General Web Design _ Site Header + Navbar design

Posted by: Barons Nov 9 2010, 06:10 PM

Hi guys,

I'm wondering if there is a cleaner way to do what I've done with the top of my site. Below is what my goal was.

[----------------------------------------------------------]
[----------------------------------------------------------]
[---------<image>-<h1 tagged site name>-<Image>---------]
[----------------<navigation bar with links>----------------]
[----------------------------------------------------------]

With my current code i can't get the images on the left and right to center vertically without pushing the nav bar to low. Also the whole page isn't right in the center but you don't really notice it until you get screen res's with a small width. Its not all that bad and it's so close enough to being the way i want it that i can live with it. The main problem i think I'm having is how messing my css code is. It doesn't really seem like my head and nav wrap tags even do anything. I'd like to here any advise to pull this off without so much code. I think it may even show some light on my alignment problems if it was cleaner. If you want to see the site its at wararmada dot com. Just keep refreshing when you get the 500 internal server error its a free host.

Thanks!

HTML

CODE

<div id="wrap">

  <div id="headwrap">
    <ul id="header">
      <li><img src="image/corpicon.png" alt="Corp Logo" width="86" height="86" /></li>
      <li><h1>War Armada</h1></li>
      <li><img src="image/corpicon.png" alt="Corp Logo" width="86" height="86" /></li>
    </ul>
  </div>

  <div id="navwrap">
    <ul id="nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Forums</a></li>
      <li><a href="#">Killboards</a></li>
      <li><a href="#">Videos</a></li>
      <li><a href="#">Screenshots</a></li>
    </ul>
  </div>

</div>

CSS

CODE

h1 {
  font-size:30px;
  padding-top:20px;
  margin: 0;
  text-align:center;
  }
#wrap {
  width: 886px;
  height:170px;
  margin-top:100px;
  margin-left:auto;
  margin-right:auto;
  background-color: #000;
  filter:alpha(opacity=80);
  opacity:0.8;
  }
#headwrap {
  margin:auto;
  }
#header {
  list-style: none;
  width:850px;
  margin-left:auto;
  margin-right:auto;
  }
#header li {
  float: left;
  }
#header h1 {
  text-decoration: none;
  line-height:0px;
  padding-top:90px;
  margin-left:250px;
  margin-right:220px;
  }
#header img {
  margin-top:43px;
  }
#navwrap {
    margin:auto;
  }
#nav {
  width: 459px;
  margin-left:auto;
  margin-right:auto;
  list-style: none;
  }
#nav li {
  float: left;
  }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  }
#nav li a:hover {
  color: #000;
  background-color: #FFF;
  }

Posted by: Barons Nov 13 2010, 03:47 AM

I found this site and i think it's helped me get a lot of my alignment problems sorted out.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/