(2011-12-25, 07:55 AM)GamerVoid Wrote: [ -> ]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)
Sounds good man. I agree, it is something else at play, which means I cant figure it out. I will just check the thread tomorrow, thanks guys
(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.
I did that, and it made no difference. The alignment of the icons did not change.
Jmilch, please read my last post. I will append it to this post as well:
"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."
(2011-12-25, 08:07 AM)HermXIV Wrote: [ -> ]Jmilch, please read my last post. I will append it to this post as well:
"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."
is the url
find below code in your global.css
img.menu-item {
float: left;
margin-top: 11px;
}
change to below code ( commenting out float: left; )
img.menu-item {
/* float: left; */
margin-top: 11px;
}
then you can add the links text as suggested earlier ; it might need further modification ..
Yeah, I assumed it was floating left. If you remove the float, the earlier code from gaming guy should work.
Almost guys! The text now IS next to the icons, but they are going vertical, not horizontal...
Here is the code I have now..
<div id="container">
<div id="menu" style="margin-left:auto;margin-right:auto">
<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>
And the result:
http://img717.imageshack.us/img717/9986/header3be.jpg
it is not a regular menu with <ul> & <li> code !!
anyway, you have to remove all occurrences of <div class="menu-seperator"></div>
(2011-12-25, 08:50 AM)ranjani Wrote: [ -> ]it is not a regular menu with <ul> & <li> code !!
anyway, you have to remove all occurrences of <div class="menu-seperator"></div>
Perfect!! My only issue is it is not centered. But the icons are horizontal, and have the words next to them
How can I center?
^ instead of making it center, its better to use some space between the menu links !
try below code in global.css (you can add this at bottom of global.css)
#menu a {
margin-right: 25px;
}