Text offset command in CSS

Heey guys,

I have another question for you.

I have this very nice table for my nav menu, its build entirely on CSS including the rollover effect.

My question is this:

I’d like to offset the text in the table for about 20px, where and how in the CSS file do i do this?

the reason for this is that my background image has a small picture in the beginning of the image. here is teh CSS code:


CSS stylesheet

/* Ok, not so pretty so now we specify styles for these. For the table (.menu) we specify the following: */
table.menu a {
width:125px;
height:25px;
padding: 2px;
display: block;
}

/* The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. Told you we need it! */
div.menu a {
width:115px;
height:22px;
background:url(../images/buttons/bground.gif);
text-align:left;
text-decoration:none;
font-size:11px;
line-height:16px;
font-family: verdana, sans-serif;
padding: 2px;
}

/* We then specify the link colours including the hover styles which creates our highlight effect: */
div.menu a:link {
background:url(../images/buttons/bground.gif);
}

div.menu a:active {
background:url(../images/buttons/bground.gif);
}

div.menu a:visited {
background:url(../images/buttons/bground.gif);
}

div.menu a:hover {
background:url(../images/buttons/bground_hover.gif);
}
/* IE can be a little slow changing styles on links so we have to specify the following for the outer div: */
div.menu {
position:absolute;
width:115px;
top:0;
left:0;
}

Thanks Sebastiaan

In this style rule (div.menu a) you’ll want to add text-indent: 20px; to your code.

And based on what I’m seeing, you’re using DIVs for something an unordered list would be better capable of doing.

Thanks :slight_smile:

The problem with UL (atleast the problem that i have. Is that i cant set the text to be in the middle of the image that im using.)

Or is this done with margins?

When using a list, you have to kill the margins and padding on everything (I like to do this via the universal selector - so I can remove them from everything else as well). Then you can set the background images on the links like you were before.

Setting the line-height to be the same as the image height will achieve this.