Log in

View Full Version : vertical list navigation problems


stevedc
06-09-2008, 12:32 AM
Hi all,

I'm having trouble creating a vertical list navigation with images as backgrounds.

the CSS:

<style type="text/css">

#secondary_nav {
float: left;
clear: both;
width: 200px;
height: 360px;
background-color:gray;

}

#nav li {
list-style: none;
float:left;
clear: left;
}

#nav li a {
display: block;
text-indent: -5000px;
height: 20px;
width: 200px;
}

#nav li a#about_us {
background: url(../images/buttons/about_us.jpg) no-repeat;
}
#nav li a#about_us:hover{
background: url(../images/buttons/about_us_over.jpg) no-repeat;
}
#nav li a#process{
background: url(../images/buttons/process.jpg) no-repeat;
}
#nav li a#process:hover{
background: url(../images/buttons/process_over.jpg) no-repeat;
}

</style>



<!-- the HTML -->

<body>

<div id="secondary_nav">
<ul id="nav">
<li><a href="#" id="about_us">Home</a></li>
<li><a href="#" id="process">Archive</a></li>
</ul>
</div>


</body>
</html>


<!-- the problem -->
The list boxes look as though they have margin-left and margin-top to them. They are moved to the right and down?? I'm sure it has something to do with "display: block;" but if I remove that it messes up the menu.

The look in Safari and Dreamweaver (http://www.stevencasedesign.com/html/list_test.html)
Minos
06-09-2008, 12:33 PM
It's because of <ul>and <li>.

Those tags are for unordered lists, which automatically layout items like:

ul
---li
---li
Medyman
06-09-2008, 12:56 PM
It's because of <ul>and <li>.

Those tags are for unordered lists, which automatically layout items like:

ul
---li
---li

Right...but there is a solution. You're not tied into that format.


@stevedc
You'll need to remove that padding/margin from the unordered list. To do so add the following CSS:


#secondary_nav {
float: left;
clear: both;
width: 200px;
height: 360px;
background-color:gray;
margin:0;
padding:0;
list-style:none;
}

If you were using that float to try to fix this issue, you won't need it.
stevedc
06-09-2008, 01:46 PM
Minos and Medyman, thanks for the quick reply! However, Minos, I just added the CSS exactly as you have it and still no fix : (. I also tried removing the float property, adding 0 margin and padding to other areas of the CSS list and still nothing.
Minos
06-09-2008, 04:41 PM
Right...but there is a solution. You're not tied into that format.


I never said he was tied to it :P. And while removing the padding from the list is a solution, I don't quite see the point (in this case). It's the same effect as <b></b> a word and then using css to remove the bold.

Why not just replace them with divs?


<div id="nav">
<div><a href="#" id="about_us">Home</a></div>
<div><a href="#" id="process">Archive</a></div>
</div>

If there is another motive for using and altering the unordered list, by all means, I'll help work around it.
boogyman
06-09-2008, 06:08 PM
Why not just replace them with divs?


<div id="nav">
<div><a href="#" id="about_us">Home</a></div>
<div><a href="#" id="process">Archive</a></div>
</div>
.

putting them within divs is not using correct coding... navigational menus are best defined as unordered lists, then using CSS styles to remove the bullets, and apply the appropriate background margins/padding to fit with the background image wanted.



I never said he was tied to it :P. And while removing the padding from the list is a solution, I don't quite see the point (in this case). It's the same effect as <b></b> a word and then using css to remove the bold.

Navigation / Menus are lists (ul/ol), not blocks of code (div)

On a side note... <b></b> tags should be used only for a "presentational" bolding effect. If you actually want that word/phrase to be emphasized or pronounced, the correct code is <strong></strong>

same goes for <i></i> and <em></em>

Medyman was about 80% correct in his styling.
You need to 2 different styles here to do this correctly.
You need to first apply a styling to the <ul> to rid the list of bullets, and you could use the float property if you are coding the menu to be as its own column .... eg... dont waste an extra <div> to declare a left/right column.

you would then need to apply a style to the list items ( <li> ) to get rid of the default margin/padding then apply margins/padding for a background image (ps they should all be the same size)



ul#nav {
float:left;
list-style-type: none;
}
ul#nav li {
margins: 0;
padding: 5px 0 5px 20px; /* 5top 0right 5bottom 20left */
}
ul#nav li a#about_us {
background: transparent url('/images/buttons/about_us.jpg') no-repeat top left;
}
ul#nav li a#about_us:hover {
background: transparent url('/images/buttons/about_us_over.jpg') no-repeat top left;
}
ul#nav li a#process {
background: transparent url('/images/buttons/process.jpg') no-repeat top left;
}
ul#nav li a#process:hover {
background: transparent url('/images/buttons/process_over.jpg') no-repeat top left;
}
stevedc
06-11-2008, 06:02 PM
Boogyman,

Excellent! I have it working the way I want now. Thank you all for helping me think this one through.

~ Regards
Steve Case