Member Avatar for mariko

I want words on my buttons but the words won't center. And left to right isn't the issue it's up and down. Well, here's the HTML:

<ul id="navbutton">
<li id="onpage"><a href="index.html">Home</a></li>
<li style="margin-top:5px"><a href="another.html">Name of my button<span></span></a></li>
<li style="margin-top:5px"><a href="services.html">Services</a></li>
<li style="margin-top:5px"><a href="another.html"></a></li>
<li style="margin-top:5px"><a href="another.html"></a></li>
</ul>

And here's the external css:

#navbutton a {   
display: block;   
background:  url(button.gif); 
text-decoration: none;
text-align: center;
font: 0.7em Tahoma, sans-serif;
font-size: 16px;
font-padding:5px 5px 5px 10px;
font-weight: bold;
width: 150px;
height: 45px;
}

#navbutton a:hover {   
background:  url(buttonn.gif);   
width: 150px;   
height: 45px;   
}

#onpage a {
display: block;
background: url(buttonn.gif);
width: 150px;
height: 45px;
}

And I'll add a screenshot pic as an attachment. (It's not aesthetically pleasing yet. I'll change that once I can get it to work.)

Thanks all!

Screenshot-2.png 4.8 KB
  • 1 Contributor
  • 1 Reply
  • 94 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by mariko
Member Avatar for mariko

Never mind. I added

line-height: 45px;

into my css and it works!

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.