Skip to main content ↑ ↓
Main Menue Started by Ruth · · Read 8404 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Main Menue

Hello!

Is there any possibility to get the buttons in the main menue centered?

Re: Main Menue

Reply #1 –

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.

Re: Main Menue

Reply #2 –

Thank you very much, Spuds!

It works this way...but not exactly as I would like it... ;)

Code: [Select]
#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.

Re: Main Menue

Reply #3 –

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

Code: [Select]
.listlevel1#collapse_button, .listlevel1#button_profile {
	/*float: right;*/
	display: inline-block; 
}

Re: Main Menue

Reply #4 –

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. ;))
Bugs creator.
Features destroyer.
Template killer.

Re: Main Menue

Reply #5 –

You mean a picture, as I would like it to have, emanuele?

All the buttons on this line should be centered...

Re: Main Menue

Reply #6 –

And the dropdowns there in main menue and the poster should stay as before...

Re: Main Menue

Reply #7 –

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

Re: Main Menue

Reply #8 –

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?

QuoteThe profile and upshrink I think will require more than just css :( but maybe eman will have an idea

I am sure he will.... ;)

Re: Main Menue

Reply #9 –

Try just this:
Code: [Select]
#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.
Bugs creator.
Features destroyer.
Template killer.

Re: Main Menue

Reply #10 –

Great! It worked, emanuele!

In index_light.css I added "text-align: left;" - and the dropdowns are not centered now.

Code: [Select]
.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...

Re: Main Menue

Reply #11 –

@emanuele put that code somewhere safe and easy to find :P

Re: Main Menue

Reply #12 –

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;"

Code: [Select]
.listlevel1#button_profile img {
max-width: 1.5em;
max-height: 1.4em;
margin: 0;
margin-right: 0.6em;
position: relative;
top: 4px;
}

Re: Main Menue

Reply #13 –

Anyone using Be Social! variant and dropdown got centered then use this:
Code: [Select]
.linklevel2, .linklevel3 {
	position: relative;
	display: block;
	padding: 0 7px;
	text-align: left;
}

Re: Main Menue

Reply #14 –

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:
Code: [Select]
#menu_nav .linklevel2, #menu_nav .linklevel3 {
	position: relative;
	display: block;
	padding: 0 7px;
	text-align: left;
}

;)
Bugs creator.
Features destroyer.
Template killer.