MyBB Community Forums

I am trying to add words next to my navigation icons in my header. I also would like to center the icons...

For instance, I want "Home" next to the home icon..... All of the navigation links work, I just can't figure out how to add the text...

Here is the pic:
http://img714.imageshack.us/img714/2964/headerfr.jpg

And here is the code:

<div id="container">
	<div id="menu"> 
           
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com"><img src="images/home.png" alt="Home" class="menu-item"  /></a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/donate.php"><img src="images/upgrade.png" alt="Upgrade" class="menu-item" /></a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/ezgallery.php"><img src="images/icon_gallery.gif" alt="Gallery" class="menu-item" /></a> 
<div class="menu-seperator"></div> 
<a href="mailto:[email protected]"><img src="images/contact_us.png" alt="Contact Us" class="menu-item" /></a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/search.php"><img src="images/search.png" alt="Habbo Guides" class="menu-item" /></a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/memberlist.php"><img src="images/memberlist.png" alt="Goodies" class="menu-item" /></a> 
<div class="menu-seperator"></div> 
<a href="http://www.facebook.com/pages/Michigan-Gun-RackCom/115535798564742"><img src="images/fb.png" alt="Facebook" class="menu-item" /></a> 
<div class="menu-seperator"></div> 

<a href="http://www.migunrack.com/misc.php?action=syndication"><img src="image/rss.gif" alt="RSS" class="menu-item" /></a> 
<div class="menu-seperator">

</div></div> 

Any help would greatly be appreciated!!

And Happy Holidays![/quote]

Reserved. I am working on the code.

EDIT:

<div id="container">
    <div id="menu"> 
           
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com"><img src="images/home.png" alt="Home" class="menu-item"  />Home</a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/donate.php"><img src="images/upgrade.png" alt="Upgrade" class="menu-item" />Donate</a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/ezgallery.php"><img src="images/icon_gallery.gif" alt="Gallery" class="menu-item" /></a> 
<div class="menu-seperator"></div> 
<a href="mailto:[email protected]"><img src="images/contact_us.png" alt="Contact Us" class="menu-item" />Contact Us</a>
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/search.php"><img src="images/search.png" alt="Habbo Guides" class="menu-item" />Search</a> 
<div class="menu-seperator"></div> 
<a href="http://www.migunrack.com/memberlist.php"><img src="images/memberlist.png" alt="Goodies" class="menu-item" />Member List</a> 
<div class="menu-seperator"></div> 
<a href="http://www.facebook.com/pages/Michigan-Gun-RackCom/115535798564742"><img src="images/fb.png" alt="Facebook" class="menu-item" />Facebook</a> 
<div class="menu-seperator"></div> 

<a href="http://www.migunrack.com/misc.php?action=syndication"><img src="image/rss.gif" alt="RSS" class="menu-item" />RSS</a> 
<div class="menu-seperator">

</div></div>

Should work.

(2011-12-25, 07:24 AM)GamerVoid Wrote: [ -> ]Reserved. I am working on the code.

Thank you a ton. I have made these changes on my other sites, but the code was different. So I tried my best on this code, but can't seem to get it.

Thanks a TON man, you have been a great help!

well, add the links text before </a> !!

See my edited post now.

Glad to help! Let me know if you need any changes.

(2011-12-25, 07:28 AM)GamerVoid Wrote: [ -> ]See my edited post now.

Glad to help! Let me know if you need any changes.

Here is what I got, it didnt work.



Close, but not next to the icons.

He also wanted them centered. But that is easy. Jmilch, just change

<div id="menu"> 

to

<div id="menu" style="margin-left:auto;margin-right:auto"> 

inb4 inline styles are bad, I did it to simplify things for him.

(2011-12-25, 07:42 AM)HermXIV Wrote: [ -> ]He also wanted them centered. But that is easy. Jmilch, just change

<div id="menu"> 

to

<div id="menu" style="margin-left:auto;margin-right:auto"> 

inb4 inline styles are bad, I did it to simplify things for him.

Check my post above your last, the words did not come out next to the icons, so it didnt work the way I wanted.

can you give it a shot?

I hate when this happens to me when I am coding. Seems like CSS sometimes messes up displays of some elements, but I won't blame it...

I didn't nest anything wrong, so there is something else at play. If anything, I expected the text to be right up against the image... But this is sort of unusual. I bet it has to do with the divs that separate the images. Divs and divitis often mess things up.

Will look at it again tomorrow morning. (remember: I am Pacific time)

jmilch:

This is really hard to do without seeing your CSS. Could you give me a link to your site? The menu items could be floating left. That seems most likely, but I really would need to look at your CSS. This is a very trivial problem