The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Site Header + Navbar design
Barons
post Nov 9 2010, 06:10 PM
Post #1


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



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;
  }


This post has been edited by Barons: Nov 9 2010, 06:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Nov 13 2010, 03:47 AM
Post #2


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



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/

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th November 2014 - 08:10 PM