Computer Hope
Internet & Networking => Web design => Topic started by: Typhoon on December 16, 2010, 04:05:44 AM
-
Hello,
Im wondering if anyone would be able to help me. I've got a jQuery menu bar and its coded in. but as my computer screen is big i need to find a way to make it good for an normal small screen.
Here is the CSS: hope it helps
/* menu::base */
#menu_container{
margin:0 auto;
width:auto;
height:50px;
}
#menu {
left: 388px; top: 8px; width: 915px;
width: 1140px;
position:relative;
z-index:100;
height:32px;
}
#menu .menu {
margin:auto;
position:absolute;
width: 1140px;
}
#menu * {
margin:auto;
list-style:none;
border:0;
padding:0;
margin:0;
}
#menu a {
margin:auto;
display:block;
padding:7px 14px 7px 14px;
white-space:nowrap;
}
#menu li {
margin:auto;
float:left;
background:#fff;
}
#menu li li {
margin:auto;
float:none;
_border:1px solid #494949; /** fix for ie6 */
}
#menu div {
margin:auto;
visibility:hidden;
position:absolute;
background:url(images/pix.gif);
}
#menu div div {
margin:-24px 0 0 -1px;
left:100%;
}
#menu li:hover>div { visibility:visible; }
/* menu::special styles */
/* menu::level 1 */
#menu a {
text-decoration:none;
color:#fff;
position:relative;
z-index:77;
}
#menu a:hover {
background:url(images/back.png);
color:#6bb90d;
}
#menu a:hover span { color:#6bb90d; }
#menu>ul>li:hover>a {
background:url(images/back.png);
color:#6bb90d;
}
#menu>ul>li:hover>a span { color:#6bb90d; }
#menu span {
text-transform:uppercase;
font:14px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
color:#fff;
}
#menu li { background:none; }
/* menu::level >= 2 */
#menu li li a {
padding:0;
position:static;
}
#menu li li a:hover { background:#57ac3c; }
#menu li li a span { color:#fff; }
#menu li li a:hover span { color:#ffffff; }
#menu li li a.parent span { background:url(images/pointer.gif) no-repeat right 9px; _background-position:right 10px; }
*+html #menu li li a.parent span { background-position:right 10px; }
#menu li li span {
display:block;
text-transform:none;
line-height:16px;
padding:4px 25px 4px 14px;
font-size:14px;
}
#menu li div { background:url(images/back.png); }
/** <fix for ie6> */
#menu div div {
_margin-top:-25px;
_background:#393939;
}
#menu li li li { _border:1px solid #393939; }
#menu div div div { _background:#292929; }
#menu li li li li { _border:1px solid #292929; }
/** </fix for ie6> */
-
Well, here's a big problem:
Trying to imagine what HTML looks like based on CSS is insane. Especially when it has stuff like "#menu .menu". Huh?
Posting the pertinent HTML would be excellent.
In lieu of HTML, it looks like the only thing explicitly defining the size of your menu is
#menu {
left: 388px; top: 8px; width: 915px;
width: 1140px;
position:relative;
z-index:100;
height:32px;
}
#menu .menu {
margin:auto;
position:absolute;
width: 1140px;
}
(width: 1140px)
Make that a bit smaller and it should work fine. If it wraps, or does something funky, then I would imagine either: A) you have too many menu options or B) your font is set way too large. However:
#menu span {
text-transform:uppercase;
font:14px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
color:#fff;
}
Makes it seem like you've got a fairly reasonable font size.
One last note for thought:
Using pixels is *typically* poor practice. It locks a user into a look that you deem acceptable. If they have their size set larger (for vision impaired, etc.), the changes won't take affect. Using "ems" is a better idea. It's not too hard to pick up on, and I highly recommend it.
Just google "design with em not px" to get some info.
Hope this helps,
-rockerest
p.s.
Pixels do have their place in many parts of web design, but for things like a nav bar, or other general sizes, ems are the way to go (even for absolute positioning! [which is not good practice either]).