Chrome CSS Drop Down Menu

**aduh** · 06-23-2012, 05:24 PM

I'm using "Chrome CSS Drop Down Menu" on my site:
http://nonameclan.pl/

I would like to set permanent width of menu buttons regardless of the number of characters. With that my Menu will have 100% width and it will fit better to my site.
Now as you can see last button "CONTACT" is to short and I can't fix it by changing padding value.

Thank you for your help.

**bernie1227** · 06-23-2012, 10:56 PM

Originally Posted by aduh

I'm using "Chrome CSS Drop Down Menu" on my site:
http://nonameclan.pl/

I would like to set permanent width of menu buttons regardless of the number of characters. With that my Menu will have 100% width and it will fit better to my site.
Now as you can see last button "CONTACT" is to short and I can't fix it by changing padding value.

Thank you for your help.

Hiya aduh, could you please post the specific coded for the nab bar?
Bernie

**aduh** · 06-23-2012, 11:33 PM

Code:

.chromestyle{
width:100%;
font-weight: bold ;
font:10px Verdana;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{

width: 100%;
background: url(chromebg4.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 12px 0;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #FFFFFF;
padding: 12px 26px;
margin: 0;
text-decoration: none;
border-right: 1px solid #1c1c1a; /*THEME CHANGE HERE*/
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg4-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #be0c00; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 10px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 175px;
visibility: hidden;
filter:alpha(opacity=92);
opacity: 0.92;
-moz-opacity:0.92;
}


.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border: 1px solid #FFFFFF; /*THEME CHANGE HERE*/
padding: 3px 0;
text-decoration: none;
font-weight: bold;
color: #242424;
filter:alpha(opacity=92);
opacity: 0.92;
-moz-opacity:0.92;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #292929;
color: #ffffff;
filter:alpha(opacity=92);
opacity: 0.92;
-moz-opacity:0.92;
}

**bernie1227** · 06-24-2012, 01:43 AM

Thanks aduh,
As a side note, please encase your code in [CODE] tags when posting it on the forum.
Now in:

Code:

.chromestyle ul li{
display: inline;
}

Try setting width as a number of pixels. For example:

Code:

.chromestyle ul li{
display: inline;
width: 100px;
}

This will set the width of each li as a fixed amount that will not change.
In order to change the width of "contact" individually, you could set that particular li an id and then in the CSS specify the width for that id.
Bernie

**aduh** · 06-24-2012, 09:02 AM

Originally Posted by bernie1227

Try setting width as a number of pixels. For example:

Code:

.chromestyle ul li{
display: inline;
width: 100px;
}

Thanks bernie1227 but it didnt works.
Can't see any different ...

**bernie1227** · 06-24-2012, 10:42 AM

Originally Posted by aduh

Thanks bernie1227 but it didnt works.
Can't see any different ...

I think that there may be a conflicting CSS rule in the class:
Dropmenudiv

Bernie

**jscheuer1** · 06-24-2012, 02:33 PM

The width is set hard coded in the page's HTML. For the contact drop down, that's here:

Code:

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="index.php?site=contact">WYŚLIJ EMAIL</a>
<a href="index.php?site=joinus">DOŁĄCZ DO NAS</a>
<a href="index.php?site=challenge">RZUĆ WYZWANIE</a>
<a href="index.php?site=guestbook">KSIĘGA GOŚCI</a>
</div>

I think about 116px would look good there.

Or you can use overriding style in the stylesheet for that one drop down:

Code:

.dropmenudiv#dropmenu3 {
	width: 116px !important;
}

Other drop downs may be set similarly. Or if you want them all the same, don't set any in the HTML and use the stylesheet here:

Code:

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #be0c00; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 10px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 175px;
visibility: hidden;
filter:alpha(opacity=92);
opacity: 0.92;
-moz-opacity:0.92;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

**aduh** · 06-24-2012, 08:07 PM

jscheuer1 it's not about dropdown menu width
it's about menu buttons width
As you can see hole menu didnt fit 100% with the site.
Last button (KONTAKT) is to short.
I would like to set same widht for all buttons like on this page:
http://nonameclan.pl/2

... or set specify widh for last button (KONTAKT) to fit 100% to the site width

**jscheuer1** · 06-24-2012, 09:32 PM

OK, the padding is set for all here:

Code:

.chromestyle ul li a{
color: #FFFFFF;
padding: 12px 26px;
margin: 0;
text-decoration: none;
border-right: 1px solid #1c1c1a; /*THEME CHANGE HERE*/
}

But if you increase the left/right padding (26px), the overall addition is too great and the menu wraps.

Again we can go inline to the element:

Code:

<div class="chromestyle" id="chromemenu" >
<ul>
<li><a href="index.php?site=news">HOME</a></li>
<li><a href="index.php?site=calendar">KALENDARZ</a></li>
<li><a href="index.php?site=files">POBIERANIE</a></li>
<li><a href="#" rel="dropmenu2">KLAN</a></li>
<li><a href="#" rel="dropmenu1">FORUM</a></li>
<li><a href="index.php?site=links">LINKI</a></li>
<li><a href="index.php?site=server">SERWERY</a></li>
<li><a href="index.php?site=videos">WIDEO</a></li>
<li><a href="#" style="padding: 12px 28px;" rel="dropmenu3">KONTAKT</a></li>
</ul>
</div>

**aduh** · 06-24-2012, 09:45 PM

jscheuer1 almost perfect but as you can see
now the red button "chromebg4-over.gif" from "KONTAKT" button is to short

Code:

<li><a href="#" style="padding: 12px 28px;" rel="dropmenu3">KONTAKT</a></li>

when I set: padding: 12px 27px; button is little bit to short ...
any ideas ?

full code:

Code:

<div class="chromestyle" id="chromemenu" >
<ul>
<li><a href="index.php?site=news">HOME</a></li>
<li><a href="index.php?site=calendar">KALENDARZ</a></li>
<li><a href="index.php?site=files">POBIERANIE</a></li>
<li><a href="#" rel="dropmenu2" style="padding: 12px 29px;">KLAN</a></li>
<li><a href="#" rel="dropmenu1">FORUM</a></li>
<li><a href="index.php?site=links" style="padding: 12px 27px;">LINKI</a></li>
<li><a href="index.php?site=server">SERWERY</a></li>
<li><a href="index.php?site=videos" >WIDEO</a></li>
<li><a href="#" style="padding: 12px 28px;" rel="dropmenu3">KONTAKT</a></li>
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv" style="width: 150px;">
<a href="index.php?site=forum">NO NAME CLAN</a>
<a href="http://nonameclan.pl/forum/" target="_blank">2012 APOCALYPSE NNC</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="index.php?site=squads">DRUĹ»YNY</a>
<a href="index.php?site=clanwars">KLANĂ“WKI</a>
<a href="index.php?site=members">SKĹAD</a>
<a href="index.php?site=history">HISTORIA</a>
<a href="index.php?site=awards">NAGRODY</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 124px;">
<a href="index.php?site=contact">WYĹšLIJ EMAIL</a>
<a href="index.php?site=joinus">DOĹÄ„CZ DO NAS</a>
<a href="index.php?site=challenge">RZUÄ† WYZWANIE</a>
<a href="index.php?site=guestbook">KSIÄ˜GA GOĹšCI</a>
</div>

EDIT
when I have add code:

Code:

<div class="chromestyle" id="chromemenu" style="width: 1001px;" >

then menu is 1px to wide but button KONTAKT is fine :-)

Thread: Chrome CSS Drop Down Menu

Thread Tools

Search Thread

Chrome CSS Drop Down Menu

Bookmarks

Bookmarks

Posting Permissions