Member Avatar for showman13

I finally got it figured out how to use background images for a vertical CSS menu... I must be a slow learner.

anyway... Could someone tell me the trick to getting some space between each of the menu links?
I'd like them to be separated by about 5px or so.

Thought it would be simple, but not so much...

http://www.hctubs.com/index2.php

And if anyone has a clue as to what I did to offset the slider pics in the center content frame, I'd like to know what it is.

May have something to do with the tables that I'm using on the page under the holder div... but not sure.

I'm not sure exactly what you would need to see, and I don't want to pile this post up with a lot of unnecessary stuff.

Here is the navigation CSS

#navcontainer { width: 250px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navcontainer a
{
display: block;
padding: 3px;

width: 235px;
height: 35px;
background-image: url('../images/menu_blue.png');
border-bottom: 5px clear;
}

#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navcontainer a:hover
{
background-image: url('../images/menu_green.png');
color: #fff;
}

If there is anything else that would be helpful, please let me know.

Thanks in advance,

Douglas

  • 3 Contributors
  • 8 Replies
  • 181 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by showman13
Member Avatar for pritaeas

I would set the background image on the li so you can add padding-top or margin-top to the a. Adding margin-bottom to the li will get your spacing between the blocks.

Edited by pritaeas
Member Avatar for showman13

Thank you for your reply, but I'm not sure how you would do that.

My understanding was that the background image had to be on the anchor tag and on the anchor.hover tag to be able to utilize the rollover effect.

Could you give me an idea how it would be accomplished?

The CSS is above and here is the html that displays the menu:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index2.php" id="current">Home</a></li>
<li><a href="infinity.php">Infinity Walk-In Tub</a></li>
<li><a href="others.php">Other Tub/Shower Options</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="#">Get a Quote</a></li>
<li><a href="contactus.php">Contact Us</a></li>
<li><a href="#">Become a Dealer</a></li>
</ul>
</div>
Member Avatar for pritaeas

The :hover works on most elements, not just on a link.

<html>
    <head>
        <style type="text/css">
            ul {
                margin-left: 0;
                padding-left: 0;
            }
            li {
                width: 240px;
                height: 35px;
                background-image: url(menu_blue.png);
                text-align: center;
                padding-top: 5px;
                margin-bottom: 5px;
            }
            li:hover {
                background-image: url(menu_green.png);
            }
        </style>
    </head>
    <body>
        <div id="navcontainer">
            <ul id="navlist">
                <li id="active"><a href="index2.php" id="current">Home</a></li>
                <li><a href="infinity.php">Infinity Walk-In Tub</a></li>
                <li><a href="others.php">Other Tub/Shower Options</a></li>
                <li><a href="about.php">About Us</a></li>
                <li><a href="#">Get a Quote</a></li>
                <li><a href="contactus.php">Contact Us</a></li>
                <li><a href="#">Become a Dealer</a></li>
            </ul>
        </div>
    </body>
</html>
Edited by pritaeas
Member Avatar for showman13

Well, actually I think I finally got the spacing issue worked out.

I added background-repeat: no-repeat; on the anchor and the hover
and then created a li definition including a margin to separate the images

NOW... If I can just figure out how to adjust the text within that space it will be great.

This is really a learning experience. Hopefully it will all sink in and stick with me.

CSS looks like it may actually be a better way to do things, but I've been stuck using tables for so long that I thought it was the only way to go...

Glad I'm taking the time to learn this.

Member Avatar for JorgeM

NOW... If I can just figure out how to adjust the text within that space it will be great.

which text is it that you want to adjust?

Member Avatar for showman13

This is what I did in the css

li.spaced{
margin: 10px 5px 10px 5px;
background-repeat: no-repeat;
background-position: 0px 5px;
font-size:22px;
color: #000;
font-weight:bold;
  text-align: center;
  line-height: 40px; /* where the magic happens */
align:left
}

I'm not sure it all of it is necessary, but it is doing what I need and as I learn, I will probably be able to clean it up some.

Member Avatar for showman13

Actually, there are a few little alignment issues that I still need to address.

the 3 column DIVs appear to be shifted a bit to the right from the body screen below it, which is centered, so I'm assuming that I need to clarify a little of the div border / margin / etc...

and in the 3 columns, it appears that the slider in the middle is a bit closer to the third column then is it to the first one...

But nothing that I can't live with until I get the rest of the site laid out.

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.