Navigation issues

Question

Violet_82 89 Posting Whiz in Training

13 Years Ago

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

web-design

3 Contributors
6 Replies
98 Views
3 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Violet_82

All 6 Replies

shaya4207 8 Junior Poster

13 Years Ago

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

Kraai 56 Senior Poster

13 Years Ago

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.

Reply to this topic

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.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2010-12-23T21:09:23+00:00

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;

}

Kraai 56 Senior Poster Featured Poster · Answer 2 · 2010-12-23T21:14:15+00:00

Kraai 56 Senior Poster

13 Years Ago

Good stuff, glad you got sorted.

Good luck

shaya4207 8 Junior Poster · Answer 3 · 2010-12-23T23:33:00+00:00

shaya4207 8 Junior Poster

13 Years Ago

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

Violet_82 89 Posting Whiz in Training · Answer 4 · 2010-12-27T00:13:09+00:00

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

Navigation issues

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers