CSS Menu layout help!

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
devildog3261
New Member
New Member
Posts: 2
Joined: Fri Feb 17, 2012 10:02 am

CSS Menu layout help!

Post by devildog3261 »

I am new to CSS and I am trying to make my menu stretch 959pixles. My website is centered in the page and is 959px wide. My menu is on the right but i can't get it to stretch all the way to the left side. i want everything to be evenly proportioned, with no spaces. but i can't seem to get it to work. Any help would appreciated!

My CSS code is bellow:

#menu {
position: absolute;
top: 219px;
right: 1px;
z-index:99
}

#menu > li {
float: left; margin: 0 0 0 0px; position:relative
}

#menu > li > a {
background: url(images/menu-span.gif) repeat-x 0% 0%;
display: inline-block;
height: 38px;
line-height: 28px;
overflow: hidden;
font-size: 1.333em;
font-weight: bold;
text-decoration: none;
color: #636464;
}

#menu > li > a span {
background: url(images/menu-left.gif) no-repeat 0% 0%;
display: inline-block;
}

#menu > li > a span span {
background: url(images/menu-right.gif) no-repeat 100% 0%;
display: inline-block;
height: 29px;
overflow: hidden;
padding: 0 15px 0 15px;
}

#menu > li:hover > a {
cursor: pointer;
color: #2b8eb8;
}

#menu > li.act > a {
color: #2b8eb8;
}

#menu .submenu_1{ position:absolute; top:37px; left:0; width:229px;}
#menu .box_menu{ background:#363636;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; position:relative; padding:4px 0;}
#menu .submenu_1 li{ position:relative; border-bottom:1px solid #313131; line-height:32px;}
#menu .submenu_1 .end{ border:none}
#menu .submenu_1 li a{ padding-left:27px; font:14px Georgia, "Times New Roman", Times, serif; color:#888e94; line-height:32px; background:url(images/menu_marker.gif) 15px 13px no-repeat; display:block; text-decoration:none}
#menu .submenu_1 li:hover > a{ background-position:15px -20px; color:#47c0ef}

#menu .submenu_2{ position:absolute; top:-4px; left:230px; width:229px;}

#menu div{ display:none}
mcDavid
Power Poster
Power Poster
Posts: 377
Joined: Tue Mar 31, 2009 8:45 pm

Re: CSS Menu layout help!

Post by mcDavid »

Don't use floats. Use inline-block style in combination with text-allign:justify.
devildog3261
New Member
New Member
Posts: 2
Joined: Fri Feb 17, 2012 10:02 am

Re: CSS Menu layout help!

Post by devildog3261 »

Thank you for the reply, how exactly should i change it? i'm very new with CSS.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: CSS Menu layout help!

Post by Dr.CSS »

I wouldn't use position unless absolutely needed, a link to the site would help...
Post Reply

Return to “Layout and Design (CSS & HTML)”