Site Header + Navbar design |
Site Header + Navbar design |
Barons |
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 |
Barons |
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/ |
Lo-Fi Version | Time is now: 19th April 2024 - 02:51 PM |