First Attempt at CSS redesign

**daniel_eastley** · Sep 16, 2003, 03:46

I'm having a few problems with my first attempt at converting a site to all CSS.

My style sheet is as follows:

Code:

body {
 background-image: url(bg.gif);
 margin: 0px
 }
#header { 
 position: absolute;
 left: 50%;
 margin-left: -375px;
 width: 750;
 background-color: #990000;
 border-bottom: solid white 1px;
 }
#logo {
 display: inline;
 width: 448;
 height: 120px;
 }
 
#nav {
 display: inline;
 width: 151px;
 height: 120px;
 padding: 10px;
 border-left: solid white 1px;
 }
#navitem {
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
 }
#navitem A {
 font-weight: bold;
 font-family: verdana;
 font-size: 8pt;
 color: #ffffff;
 text-decoration: none;
 }

my HTML page is as follows

Code:

<div id="header">
  <div id="logo"><img src="header.jpg" width=448 height=120 alt="Ewebbed Design"></img></div>
  <div id="nav">
   <div id="navitem"><a href="index.html">Web Design</a></div>
   <div id="navitem"><a href="index.html">Web Development</a></div>
   <div id="navitem"><a href="index.html">Web Services</a></div>
   <div id="navitem"><a href="index.html">E-Commerce</a></div>
   <div id="navitem"><a href="index.html">Printed Media</a></div>
  </div>
  <div id="nav">
   <div id="navitem"><a href="index.html">Home</a></div>
   <div id="navitem"><a href="index.html">About Us</a></div>
   <div id="navitem"><a href="index.html">Portfolio</a></div>
   <div id="navitem"><a href="index.html">Contact Us</a></div>
  </div>
</div>

but the output looks like:

if you notice - there is a space at the top of the 2 nav sections, and 1 below the logo section. any idea on how I would do this.

Also - on another note - how would I make the navitem div's change background colour when rolled over, their CSS looks like this:

**daniel_eastley** · Sep 16, 2003, 03:46

sorry - I mean, any idea on how I would get rid of those spaces - and what causes them?

**mcg_sg** · Sep 16, 2003, 05:39

I believe its the 10px padding in your
#nav
...

**daniel_eastley** · Sep 16, 2003, 06:01

nope - I've tried removing that, but thats not it - as the padding is internal within the div box, and that white line - the left border will go all the way up the side of it.

this seems to be outside of the box.

Cheers

**mcg_sg** · Sep 16, 2003, 06:36

Um, for the gap, i suspect its the
{ display:inline }
because i fiddled with your code, used
{ float:left }
and the gaps were gone...

Don't count on me for this...

For that little gap below your logo image, I believe its caused by IE's unnecessary extra space creation.

To test this gap, try putting in the image alone and a div that has borders and
{ margin-top: #px }
then use mspaint to count the pixel gaps...

I used this to test this extra space:
<img src="header.png" />
<div style="border:1px solid #000000;margin-top:10px">
try
</div>

PS i'm new, so i'll need time to learn the forum's features...

**daniel_eastley** · Sep 16, 2003, 08:04

because i fiddled with your code, used
{ float:left }
and the gaps were gone...

Genius - this worked fine, not actually sure what this float attribute does though. can anyone explain.

Any ideas on what syntax I need to get the #navitem divs to change background colour on mouse over. - I guess this will only work in IE - but thats no problem.