Can't shift text within li element

Hi everyone,

I have a set of links (see below) styled to look like navigation buttons.

<div id="sidebar">
<ul class="navbar">
<li><a href="services.html" class="services"></a>Services</li>
<li><a href="technology.html" class="tech"></a>Technology</li>
<li><a href="about.html" class="about"></a>About Us</li>
<li><a href="contact.html" class="contact"></a>Contact</li>
</ul>


The li element is given the following css rules to style it into a box:

.navbar li {
list-style-type: none;
width: 79px;
height: 84px;
text-align: center;
padding-bottom: 50px;
}

Each of the a elements were given a class and styled like this to insert an image within the a elements:

.navbar a.services {
background-image: url(images/services.gif);
}

.navbar a.tech {
background-image: url(images/tech.gif);
}

.navbar a.about {
background-image: url(images/about.gif);
}

.navbar a.contact {
background-image: url(images/contact.gif);
}

These are the rules for the overall a element:

.navbar a {
width: 100%;
height: 100%;
color: #000;
background-repeat: no-repeat;
background-position: -76px 14px;
display: block;
background-color: #fff;
border: 10px solid #CCCCCC;
text-align: center;
}

The problem is that the text within the li elements, ie. services, technology, about us and contact all sit below the li and a element and they're not centred. I need them to be centred and sit up just below the image in the a element white section. I've tried negative margins and padding to shift the text up but nothing works. It won't centre either. Just wondered if someone could take a look to see what I might be doing wrong?



Thanks for any help offered.

 

edit: (I misunderstood)

Put the text inside the <a> element and add a top or margin-top value based on where you want the text.

 

Thanks for the suggestion. I just tried that, ie. code looks like this now:

<ul class="navbar">
<li><a href="services.html" class="services">Services</a></li>
<li><a href="technology.html" class="tech">Technology</a></li>
<li><a href="about.html" class="about">About Us</a></li>
<li><a href="contact.html" class="contact">Contact</a></li>
</ul>

Then I put the margin top in here:

.navbar a {
width: 100%;
height: 100%;
color: #000;
background-repeat: no-repeat;
background-position: -76px 14px;
display: block;
background-color: #fff;
border: 10px solid #CCCCCC;
text-align: center;
margin-top: 20px;
}

Problem is the whole li element, ie. the visual white box with border and text within it - it all moves down together. I only need the text to move down so it's underneath the picture in the white area of the box.

Any idea how to do this?

 

You want a list with pictures on top and the actual clickie parts on the bottom?

The li element is your whole box. Make it tall enough to fit both the image and the text. Keep the text within the <a>s like krt said.

Where you list your background images, set the background-position to top center

If your li is tall enough, the image will stay on the top. The background colour is seen on the bottom, with the text sitting on it. Because you will set the padding-top for the <a> (and thus the text) to whatever to keep it low. Set the bottom padding accordingly though or you'll find that maybe it looks okay before mousehover, but after mousehover there's suddenly a bigger box (padding to move the text down will normally make the text box even bigger, not just move it down within the box... pain in the ass).

If the background image is still sitting behind the text, keep making the height of the li until it can accomadate both the text and the image with room in between.

If I understood you correctly : )

 

Stomme_poes has it... LI element is the whole box. If for whatever reason you can't figure it out, use good old &nbsp; to space it out the way you want it to look

 

A whole new solution I tried in Opera 702, IE 60, FF20
U just have to manipulate with the numbers to get the desired width and height.
Hope it's helpful.
This is my first reply on this forum.

<style type="text/css">

#sidebar {
border: 1px dotted red;
padding: 10px;
width: 200px;
}

.gray {
background-color: #CCC;
border: 1px solid #CCC;
width: 180px;
height: 180px;
margin-top: 10px;
}

.whitebox {
width: 140px;
height: 140px;
margin: 20px;
background-color: white;
}


.services, .tech, .about, .contact {
}
img {
border: 0;
margin: 20px 0 0 20px;
width: 100px;
height: 100px;
}
.blabla {
display: block;
text-align: center;
}
</style>

</head>
<body>
<div id="sidebar">
<div class="gray"><div class="whitebox"><a href="services.html" class="services"><img src="picture.gif"></a><span class="blabla">Services</span></div></div>
<div class="gray"><div class="whitebox"><a href="technology.html" class="tech"><img src="picture.gif"></a><span class="blabla">Technology</span></div></div>
<div class="gray"><div class="whitebox"><a href="about.html" class="about"><img src="picture.gif"></a><a href="#"><span class="blabla">About Us</span></a></div></div>
<div class="gray"><div class="whitebox"><a href="contact.html" class="contact"><img src="picture.gif"></a><a href="#"><span class="blabla">Contact</span></a></div></div>

</div>
</body>

 

Thanks everyone for the suggestions