PDA

View Full Version : Right-aligned auto width Chrome CSS DropDown Menu



luluuk
04-16-2008, 05:47 PM
1) Script Title:
Chrome CSS DropDown Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

3) Describe problem:

I'm needing a littlebit of help with Chrome CSS Menu like many people here in this forum :rolleyes:
After a bit of playing and testing the menu, i can't get it aligned to the right and have auto-width at the same time.

Right align was posible after adding align="right" to the div of the menu and changing the css to:

.chromestyle{
width: 99%;
font:bold 11px Verdana;
color:#767676;
}

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

.chromestyle ul{
border: 1px solid #BBB;
width: 60%;
background: url(chromebg3.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align:right; /*set value to "left", "center", or "right"*/
}

The menu will 'reserve' 99% of the page width and 'take' the right 60% of it.
But i would like that those 60% is set to somenthing like auto; so the menu width depends on the length of the menu items together. But width:auto; in the .chromestyle ul result in a full width menu bar.

Somebody here with a minute of time and a genius mind?;)

ddadmin
04-17-2008, 03:34 AM
Revert the width of .chromestyle itself back to 99%, and try the changes in red to .chromestyle ul:



.chromestyle ul{
border: 1px solid #BBB;
width: 60%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
margin-left: 40%;
text-align: right; /*set value to "left", "center", or "right"*/
}

luluuk
04-18-2008, 12:46 AM
Revert the width of .chromestyle itself back to 99%, and try the changes in red to .chromestyle ul:



.chromestyle ul{
border: 1px solid #BBB;
width: 60%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
margin-left: 40%;
text-align: right; /*set value to "left", "center", or "right"*/
}

I see adding a left-margin to the ul will also result in a right aligned menu bar. But my question is: How do i manage to let the menu bar get the width of the sum of width of the menu items. Maybe a little difficult explanation...
See, i use the same menu bar on multiple pages with different menu items per page. And i like the menu bar to be right aligned (succeeded already) and having a width in which case all the menu items of that page will fit precisely in the bar.

I can do this by changing the width in % by hand to the exact width needed on a page. But in this case i can't use the same css for each page and i need to make seperate css's for each page + the extra work. There must be some code to let the css define which width the menu bar needs to fit all the items of the current page?!