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...

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
  • 201 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by showman13

Dani AI

Generated

Good progress — the rules you discovered (stop the background from tiling and add spacing to the list items) are exactly the right direction. was correct that putting the visual tile on the list item gives you easy spacing, and ’s experiments show the practical fixes. A couple of focused tips to finish this cleanly:

  • Make each anchor fill its li so the whole tile is clickable. Don’t rely on table layout for positioning; use the list as the layout container and make the anchor a block-level element (or a flex container) so you can center text reliably. Avoid the invalid declaration you had earlier (that border-bottom: 5px clear — remove or replace it with a valid border rule).
  • For vertical centering: the line-height trick works only for single-line labels. Use flexbox for robust centering (wrap, multi-line support and consistent behaviour across browsers).
  • To space tiles, add a small bottom margin on the li (5px is fine). Keep the background on whichever element you prefer (li or a) but pair it with background-repeat: no-repeat and background-position (or background-size for responsive/retina).

Example (compact, modern approach):

#navlist { margin:0; padding:0; list-style:none; }
#navlist li { margin-bottom:6px; } /* spacing between tiles */
#navlist a {
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 12px;
  background: url("images/menu-blue.png") left center no-repeat;
  text-decoration:none;
  color:#222;
}
#navlist li:hover a { background-image: url("images/menu-green.png"); color:#fff; }

Troubleshooting the centered slider: inspect with DevTools (computed box model). Common culprits are default body margins, table cell cellpadding/cellspacing, floated elements not cleared, or images left as inline (use img { display:block; } and margin:0 auto; to center). Temporarily add colored outlines to containers (outline:1px solid red) to see what’s shifting. Fix those and the slider will line up with the rest of the page.

Recommended Answers

All 8 Replies

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

I think I have it figured out.... but thanks for the response...

What do you think about the look ?

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.