/    Sign up×
Community /Pin to ProfileBookmark

Center text on top of image button

Copy linkTweet thisAlerts:
Feb 14.2010

Hi everyone,

I have been working on my web site for some time and have figured most of it out. I now have an issue that foir the last 2 days has really had me scratching my head. On my web page I decided to change the navigation bar to an image and have the image changes when you hover or click on it. My issue is i’m unable to get the text to center over each image.

Have a look here [url]www.hackitz.ca/about[/url]

here is my html
——————html————————–
<div class=”menu”>
<div class=”bg_menu”>
<div class=”indent_menu”>
<ul>
<li><a href=”/” title=”Home”>Home</a></li>
<li><a href=”/about” title=”About Me”>About Me</a></li>
<li><a href=”/contact” title=”Contact Me”>Contact Me</a></li>
<li><a href=”/testimonials” title=”Testimonials”>Testimonials</a></li>
</ul>
<div class=”clear”></div>
</div>
</div>

—————-css————————————
.menu { background:url(images/butn/menu_l_b.png) 0 0 no-repeat; height:40px; margin-bottom:-20px; }
.bg_menu { background:url(images/butn/menu_r_b.png) right top ; width:100%; height:40px;}
#header .menu .indent_menu {padding:8px 20px 0 0;}
#header .menu li {display:inline; width:130px; margin:0px -12px 0px 0px; }
#header .menu li a {display:inline; text-decoration:none; font:bold 13px Arial ;color: white;width: 79px;height: 23px;float: left;display: block;padding:9px 0px 9px 42px;background-image: url(images/butn/cdbg.png);background-repeat: no-repeat;position: relative;top: -8px;}
#header .menu li a:hover { background-position: 0 -40px;color: #46D3FF;}
#header .menu li a:active {background-position: 0 -40px;color:#fff;}
—————-end——————————–

If some can shed some light on this it would be much appreciated.

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@josephbm91Feb 14.2010 — Heya!

First off, it's always good to validate before you post a question.

http://validator.w3.org/check?uri=http://www.hackitz.ca/about&charset=(detect+automatically)&doctype=Inline&group=0

Also, the semantics behind your CSS are flawed. Classes are styles that are expected to be called multiples times throughout the page. IDs are defining regions of the page. Almost all of your classes should be IDs.

To actually fix the issue, I'll let you know the process. You were using padding to try to estimate where the links should fall into place. The best thing to do here set the link (<a>) equal to the width of the <li>, or the background behind it. In this case it was 130px. After that, use margin: 0px auto and text-align: center to center it.

Replace your #header .menu li a{ with this:


[CODE]#header .menu li a {margin: 0px auto; text-align: center;display:inline; text-decoration:none; font:bold 13px Arial ;color: white;width: 130px;height: 23px;float: left;padding:9px 0px 9px 0px;background-image: url(images/butn/cdbg.png);background-repeat: no-repeat;position: relative;top: -8px;}[/CODE]


Note: You had display:block and display: inline in the same style.
Copy linkTweet thisAlerts:
@HackitauthorFeb 14.2010 — Heya!

First off, it's always good to validate before you post a question.

http://validator.w3.org/check?uri=http://www.hackitz.ca/about&charset=(detect+automatically)&doctype=Inline&group=0

Also, the semantics behind your CSS are flawed. Classes are styles that are expected to be called multiples times throughout the page. IDs are defining regions of the page. Almost all of your classes should be IDs.

To actually fix the issue, I'll let you know the process. You were using padding to try to estimate where the links should fall into place. The best thing to do here set the link (<a>) equal to the width of the <li>, or the background behind it. In this case it was 130px. After that, use margin: 0px auto and text-align: center to center it.

Replace your #header .menu li a{ with this:


[CODE]#header .menu li a {margin: 0px auto; text-align: center;display:inline; text-decoration:none; font:bold 13px Arial ;color: white;width: 130px;height: 23px;float: left;padding:9px 0px 9px 0px;background-image: url(images/butn/cdbg.png);background-repeat: no-repeat;position: relative;top: -8px;}[/CODE]


Note: You had display:block and display: inline in the same style.[/QUOTE]

Thanks so much, I used the validator and really need to do some more reading on how css works.

Thank you so much.

Great forum. : -)
×

Success!

Help @Hackit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...