Forum Moderators: not2easy
I am setting up a new website. I decided upon a leftside vertical navigation bar. I have done navigation bars in the past with images but this time I wanted to give CSS a try. I used an example from an excellent CSS website and whilst I don't know too much about CSS (other than basic font and heading stuff) I was able to change the look of the navigation bar to suit my site.
The bar is pretty simple. It has a few headings which do not highlight when hovered over by the mouse. Under each heading there is a list of links. When the mouse goes over these they change colour. It looks quite nice and I was happy with this.
Underneath the navigation bar I have a few images for adverts. I didn't have these linked when I first did the page. Now when I change them so that they link, they ruin the whole look of the navigation bar. Basically what happens is they protrude out and are surrounded by the same colour link from the nav bar. I don't want them to have this effect. I want the images to remain as they are.
I have tried unsuccessfully to change this. I have fiddled about with the CSS and put a new class for these links. It still doesn't work and uses the properties from the links above. It is all very frustrating and here's me thinking CSS was easy.
If anyone would kindly offer a solution to this I would very much appreciate it. It is giving me a headache. I'm sure the solution is simple, but I just don't know it.
I include the parts of the CSS stylesheet relevant to the nav menu and image links. I won't bother to include the general text/links as I don't think these effect it. I assume.
Note: leftmenu1 = the part of the nav bar which isn't highlighted as there is no link. leftmenu2= the links on the nav bar, the parts i want highlighted. imagelink = my unsuccessful attempt to remove the effect from the images.
Here goes:
#leftmenu2 ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#leftmenu2 li { margin: 0 0 .2em 0; }
#leftmenu2 a
{
display: block;
color: #FFF;
background-color: #3366FF;
width: 10em;
padding: .2em .8em;
text-decoration: none;
}
#leftmenu2 a:hover
{
background-color: #369;
color: #FFF;
}
#leftmenu1 ul
{
margin: 0;
padding: 0;
list-style-type: none;
margin: 0 0 .0em 0;
display: block;
color: #FFF;
background-color: #0000CC;
width: 10em;
padding: .2em .8em;
text-decoration: none;
font: 11px verdana, arial;
color: #FFFFFF;
}
#imagelink ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#imagelink li { margin: 0 0 .0em 0; }
#imagelink a
{
margin: 0;
padding: 0.0em;
list-style-type: none;
width: 5em;
margin: 0 0 .0em 0;
text-decoration: none;
font: 11px verdana, arial;
}
#imagelink a:hover
{
background-color: #3366FF;
color: #FFF;
}
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Here is the HTML code:
<table border="0" cellpadding="0" cellspacing="0" width="760">
<tr>
<td width="129" valign="top">
<div id="leftmenu1">
<ul>
<li>Widgets Heading</li>
</ul>
</div><div id="leftmenu2">
<ul>
<li><a href="link">Widgets</a></li>
</ul>
<li><a href="link">Widgets</a></li>
<li><a href="link">Widgets</a></li>
</ul>
<div id="leftmenu1">
<ul>
<li>Widgets Heading</li>
</ul>
</div><div id="leftmenu2">
<ul>
<li><a href="link">Widgets</a></li>
<li><a href="link">Widgets</a></li>
<li><a href="link">Widgets</a></li>
</ul>
</div></div>
<table width="129" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/main/bluebackground.gif">
<br>
<div id="imagelink">
<p align="center"><a href="link">
<img src="/image.jpg" width="120" height="60" border="0"></a></p>
<p align="center"><img src="/image.jpg" width="120" height="120"></p>
</td>
</tr>
</table>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
As you can see, i've tried to change the padding on the imagelink class so that it doesn't do what it currently does. However it isn't working.
Thanks in advance,
Tim
P.S. I hope this is clear and makes sense.
.leftmenu2 {
PROPERTY:VALUE;
}
...and in the html like this...
<div class="leftmenu2">
So start by making all the IDs that are used more than once into classes.
Your div nesting also looks a little wonky to me. Although, again, I don't suspect it's the cause of your problem, it could have something to do with it. I'm going to add some line breaks in order to get multiple tags off the same line. This makes looking at opening and closing tags much easier. I'm color coding #leftmenu1 tags blue and leftmenu2 tags red so you can see how they open and close around your menu...
<td width="129" valign="top">
<div id="leftmenu1">
<ul>
<li>Widgets Heading</li>
</ul>
</div>
<div id="leftmenu2">
<ul>
<li><a href="link">Widgets</a></li>
</ul>
<li><a href="link">Widgets</a></li>
<li><a href="link">Widgets</a></li>
</ul>
<div id="leftmenu1">
<ul>
<li>Widgets Heading</li>
</ul>
</div>
<div id="leftmenu2">
<ul>
<li><a href="link">Widgets</a></li>
<li><a href="link">Widgets</a></li>
<li><a href="link">Widgets</a></li>
</ul>
</div>
</div>
You can see that the first leftmenu1 div is outside of the lefmenu2 divs, but the second one is nested inside of a leftmenu2, along with another leftmenu2 div. Everything closes, but it's just a little odd. Double check your code to be sure all of this is intentional. You might be able to get better, cleaner results with something like this...
<div class="leftmenu">
<ul>Widget Category
<li><a href="#">Widget</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Widget</a></li>
</ul>
<ul>Widget Category
<li><a href="#">Widget</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Widget</a></li>
<li><a href="#">Widget</a></li>
</ul>
</div>
In the css, style the UL how you want the category text to look, and the LI and LI A how you want the links to look. Style .leftmenu to control the overall width, background, etc of the menu.
It's far less code, easier to manipulate, and less likely to cause problems than the method you've used of setting up a new div and list just to display a list header.
I'll keep looking at your code to see if I can spot the reason for your image problem, but you should seriously consider making some changes to the code. Also, try running your code through the W3C Validators for HTML [validator.w3.org] and CSS [jigsaw.w3.org]. It will show you errors and potential pitfalls in your code that could take hours of staring until your eyes bleed to find by hand.
cEM
I have done as you said and the image links now work fine. Thanks for that.
I do however have trouble getting the heading for each category in the nav bar to look as it did before.
I have used the HTML you suggested above and now changed the CSS to this:
.leftmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
margin: 0 0 .0em 0;
display: block;
color: #FFF;
background-color: #369;
width: 100%;
border-right: 1px solid #000;
padding: .6em .0em;
text-decoration: none;
font: 11px verdana, arial;
color: #FFFFFF;
}
.leftmenu li {
margin: 0;
border-bottom: 1px solid #90bade;
padding: 0;
list-style-type: none;
margin: 0 0 .0em 0;
display: block;
color: #FFF;
background-color: #3366FF;
width: 100%;
padding: .0em .0em;
text-decoration: none;
font: 11px verdana, arial;
}
.leftmenu li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #3366ff;
color: #fff;
text-decoration: none;
width: 100%;
}
.leftmenu li a:hover
{
background-color: #369;
color: #FFF;
}
>>>>>>>>>>>>>>>>>>>>>>>>
I've changed other bits of the CSS to make it look a little better.
The heading for each category is displayed to the very left hand side. I want it sticking out a bit but if i change the margin or padding then this moves the links below out aswell. I have managed to padd it out a little but the text stays at the bottom. Do you know what the CSS code is to make the text align in the centre? (edited: by centre I mean vertical centre not horizontal).
Another problem I have is the links in the nav bar are not displaying in white text as I want them to. The funny thing is, when i leave the links as "#" then they are white. When I put in a webpage as the link, they turn the same colour as the background. All very strange.
Thanks,
Tim
