Member Avatar for Violet_82

Hi guys,
I am having some problems with the navigation of this website I am involved with.
The issue I have is on the left hand side navigation. I can't get the buttons to sit neatly on the top of each other, it looks like there is some space between them (you can in fact see the background colour).
I have tried to use the padding option (I used a lot the W3C school website) but I don't seem to be getting it right. Is it an issue with the padding or what?

Here is the code for the CSS:

h1
{
text-align:left;
font-size: 1.7em;
font-family: Arial, Verdana, sans-serif;
}

#banner
{
background:#81A594 url(typewriter.jpg);
background-repeat:no-repeat;
background-position:right;
height:120px;
padding:10px 50px 0 200px;

}
/*This is for the left hand side navigation */

#navigation ul /* for the navigation, foreground is a2c1b2 and bg is f5d9d7*/
{
list-style: none;
padding: 0;
border: 0;
margin: 4em 0 0 0;
}

#navigation li
{
margin: 0 0 0 0;
border: 0 0 0 0;
}

#navigation ul li
{
background: #f4d8c7 url("box.jpg") repeat-x scroll center bottom;
height: 2.4em;
line-height: 3.5em;
width: 10em;
display: block;
text-decoration: none;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding:10px 0 10px 0;
}

/*This is the top navigation */

#topnav ul
{
list-style: none;
margin-left: 0px; 

}

#topnav li
{
float: left;
margin: 0 1.5em 0 0;
font-family: Arial, Verdana, sans-serif;
}
body
{
background-color:#E6E6DC;

}

And here is the code for one of the pages:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Web editing</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>

<!-- BANNER STARTS HERE -->
<div id="banner">
<h1>Web editing</h1>
</div>
<!-- BANNER ENDS HERE -->

<!-- TOP NAVIGATION STARTS HERE -->

<div id="topnav">

<ul>
<li>Home</li>
<li><strong>Our web standards</strong></li>
<li>Livelink issues and fixes</li>
<li>How to's</li>
<li>Do's and don'ts</li>
<li>Reference</li>
</ul>


</div>

<!-- TOP NAVIGATION ENDS HERE -->



<!-- LEFT HAND SIDE NAVIGATION STARTS HERE -->

<div id="navigation">
<ul>
<li>Headings</li>
<li>Documents</li>
<li>Content</li>
<li>Links</li>
<li>Images</li>
</ul>
</div>

<!-- LEFT HAND SIDE NAVIGATION ENDS HERE -->


</body>
</html>

And the graphics are attached

thanks

box.jpg 0.38 KB typewriter.jpg 16.33 KB
  • 3 Contributors
  • 6 Replies
  • 98 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Violet_82
Member Avatar for shaya4207

1) Why do you have in your CSS both '#navigation li' and '#navigation ul li'

2) You gave the 'li' a bigger 'line-height' than the 'height' itself

3) You gave it a 'padding' of '10px 0 10px 0', which if I'm not mistaken gives it 10px on top and bottom

Member Avatar for Kraai

Hi

See what happens if you play around with height: 2.4em; by changing its value. I copied your code and reduced the value to 0.4 for example, and the inbetween spaces reduced. I do not see any buttons, only text, so test and see if playing around with that value helps at all.

Member Avatar for Violet_82

Hi there, yes the problem is the height. I have done what shaya4207 suggested and adjusted the line-height and height, in fact I removed altogether and now it's neater and no space between the buttons. I thought I had to have height and line-height. Did they mess my buttons up because the image I use for the buttons (which is attached in my first post next to the typewriter on the left is 6px x 40px? )

About the padding

You gave it a 'padding' of '10px 0 10px 0', which if I'm not mistaken gives it 10px on top and bottom

, yes that's right if I don't do that the buttons appear really tiny and the text a bit squashy inside. Also

Why do you have in your CSS both '#navigation li' and '#navigation ul li'

I removed

#navigation li{margin: 0 0 0 0;border: 0 0 0 0;}

. Iput it there becasue i read about it somewhere, I think it was here http://www.webcredible.co.uk/user-friendly-resources/css/css-navigation-menu.shtml

Sorry forgot to include the new CSS:

h1
{
text-align:left;
font-size: 1.7em;
font-family: Arial, Verdana, sans-serif;
}

#banner
{
background:#81A594 url(typewriter.jpg);
background-repeat:no-repeat;
background-position:right;
height:120px;
padding:10px 50px 0 200px;

}
/*This is for the left hand side navigation */

#navigation ul /* for the navigation, foreground is a2c1b2 and bg is f5d9d7*/
{
list-style: none;
padding: 0;
border: 0;
margin: 4em 0 0 0;
}

#navigation ul li
{
background: #f4d8c7 url("box.jpg") repeat-x scroll center bottom;

width: 10em;
display: block;
text-decoration: none;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding:10px 0 10px 0;
}

/*This is the top navigation */

#topnav ul
{
list-style: none;
margin-left: 0px; 

}

#topnav li
{
float: left;
margin: 0 1.5em 0 0;
font-family: Arial, Verdana, sans-serif;
}
body
{
background-color:#E6E6DC;

}
Edited by Violet_82 because: forgot file
Member Avatar for Kraai

Good stuff, glad you got sorted.

Good luck

Member Avatar for shaya4207

Great, I'm happy that I was able to help...

Member Avatar for Violet_82

thanks :), will need to do some work on this website, so will post more stuff soon. thanks for your help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.