PDA

View Full Version : (Solved) Website Help



t_arnold
Apr 21st, 2009, 06:01 AM
Ok, i'm making myself a website and i am running into a few problems.

1. I am having a hard time getting my menu to center.
2. The mouse-over is different for ie and ff. I wanted it to sit right on top of the black part. Works fine in ff but not IE.
3. Also my menu buttons look squished, is something wrong with the css that is causing that?

Please Help Here it my site. (http://www.digitalconcoction.com)

TinyScript
Apr 21st, 2009, 06:46 AM
i think you have to include auto with the margin 0, but it's just a guess

Excavator
Apr 21st, 2009, 06:51 AM
Hello t_arnold
This will center your menu -

#menu {

width:325px;/*adjust width to fit*/
margin: 0 auto;/*centers menu*/
background: #f00; /*for testing only*/
overflow: auto; /*to clear the floats*/
font-size:93%;
line-height:normal;

}


This will unsquish your buttons maybe -

#menu li {
display:inline;
margin:0;
padding:0 10px;
color:#FFFFFF;
}
You'll need to adjust the width on #menu to account for the wider buttons.

TinyScript
Apr 21st, 2009, 06:58 AM
you have taught me well Excavator!

abduraooft
Apr 21st, 2009, 10:13 AM
Or Try the following

#menu {
float:left;
font-size:93%;
line-height:normal;
overflow:hidden;
position:relative;
width:100%;
}
#menu ul {
clear:left;
float:left;
left:50%;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:10px 0 0 5px;
position:relative;
text-align:center;
}
#menu li {
color:#FFFFFF;
display:block;
float:left;
margin:0;
padding:0;
position:relative;
right:50%;
}
#menu a {
background:transparent url(images/left.png) no-repeat scroll left top;
color:#FFFFFF;
display:block;
margin:0;
padding:0 4px 0 9px;
text-decoration:none;
}

Refer http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

t_arnold
Apr 21st, 2009, 04:13 PM
Alright thanks everyone. I went with abduraooft's css code. Works great in FF and IE now. The button squishing was solved by editing the " padding in the #menu a span " and then moving it up with the " padding in #menu ul "

This is perfect, solved all my problems (so far).

Thanks again!!! :thumbsup:

Excavator
Apr 22nd, 2009, 05:12 AM
A couple ways of centering a ul menu -
This one is centered with percentages and has an unknown width http://nopeople.com/CSS/menu-h_centered-ul/index.html

I was just playing around once and made this one that uses text-align:left/center/right; to position it http://nopeople.com/CSS/ul-menu-positioned-with-text-align/index.html

And, like I showed you, if you can give it a width then margin:0 auto; works fine.