Hello!
Is there any possibility to get the buttons in the main menue centered?
As a start you will need to do a couple of things.
1) Add text-align: center to #main_menu css declaration
2) remove the float: left from .listlevel1 and add display: inline-block; Thinking about that you will want to add a
#main_menu .listlevel1 {float: none; display:inline-block;} which should target just the main menu and leave all the other menus alone.
As always this is untried, just some quick thoughts.
Thank you very much, Spuds!
It works this way...but not exactly as I would like it... ;)
#main_menu {
position: relative;
text-align: center;
}
#main_menu .listlevel1 {float: none; display:inline-block;}
/* Wrapper for primary admin/profile/etc menus. */
.admin_menu {
padding: 0 3px;
}
/* Wrapper for secondary admin/profile/etc menus. */
#adm_submenus {
overflow: auto;
padding: 3px 0px;
}
/* Level 1 button positioning. */
/* 1px padding gives slight gap between buttons, and drop menus. */
.listlevel1 {
position: relative;
/*float: left;*/
display: inline-block;
margin: 0 2px;
padding: 2px 0;
font-size: 0.929em;
line-height: 2.077em;
}
.poster .listlevel1 {
line-height: 1.667em;
padding: 0;
}
.listlevel1:hover {
z-index: 6;
}
.listlevel1#collapse_button, .listlevel1#button_profile {
float: right;
}
.listlevel1#button_profile img {
max-width: 1.5em;
max-height: 1.5em;
margin: 0;
margin-right: 0.6em;
position: relative;
top: 4px;
}
The Profile-Button and the Collapse-Button are not centered , I would like to have them centered.
The links at the drop-downs are centered now. (but this is not so important)
But this changes disturbed the alignment of the Poster-Information, it was centered before.
I think, I should change here something, but I don't know how...
For example, if I try this, I get very funny results like that ;D
.listlevel1#collapse_button, .listlevel1#button_profile {
/*float: right;*/
display: inline-block;
}
Can you describe exactly what you would like to obtain? (An example image copy&pasting the buttons would be probably the best way to explain. ;))
You mean a picture, as I would like it to have, emanuele?
All the buttons on this line should be centered...
And the dropdowns there in main menue and the poster should stay as before...
The poster area can be fixed, simply do not change .listlevel1 at all and leave the new line (#main_menu .listlevel1 {float: none; display:inline-block;} ) Sorry I was not clear in my original post about that.
The profile and upshrink I think will require more than just css :( but maybe eman will have an idea
I have tried this, Spuds - but without "text-align: center" nothing will happen, the buttons will not get centered.
(edit: Sorry...I was wrong! It works together with "text-align: center"! And the poster area is, as it should be)
Before I have asked here I have tried to do something in the index.template.php - surrounding the main menue with a table, wich should center the menue. But it didn' t work. ;)
It looks like this now. Maybe the dropdowns can be changed to be not centered?
I am sure he will.... ;)
Try just this:
#top_section {
position: relative;
text-align: center;
}
#top_section #main_menu {
float: none;
display:inline-block;
width: auto;
}
#menu_nav {
padding-bottom: 0;
}
What I get is the attached, that looks pretty much what you want. ;)
The active buttons look a bit bigger than the others, but it seems an effect of the shadows.
Great! It worked, emanuele!
In index_light.css I added "text-align: left;" - and the dropdowns are not centered now.
.linklevel2:link, .linklevel2:visited, .linklevel3:link, .linklevel3:visited {
border: 1px solid transparent;
color: #666;
text-align: left;
}
I am so glad now! :) Thank you very much, emanuele and Spuds, for your help!
The profile button looks now a bit different to me, but maybe I can change there something...
@emanuele put that code somewhere safe and easy to find :P
The profile button is getting the same height as the other buttons,
if I change in index.css "max-height: 1.5em;" to "max-height: 1.4em;"
.listlevel1#button_profile img {
max-width: 1.5em;
max-height: 1.4em;
margin: 0;
margin-right: 0.6em;
position: relative;
top: 4px;
}
Anyone using Be Social! variant and dropdown got centered then use this:
.linklevel2, .linklevel3 {
position: relative;
display: block;
padding: 0 7px;
text-align: left;
}
Pay attention on using "wise" declaration, because linklevel and listlevel classes are used on
any dropdown in the template, so to access only the main men you'd better use a #menu_nav in front of them:
#menu_nav .linklevel2, #menu_nav .linklevel3 {
position: relative;
display: block;
padding: 0 7px;
text-align: left;
}
;)
I don't think your code actually worked. I inteded of positioning left whole menu, except the core part.