✔ Text-Align:Center nicht möglich?!

[2secret]

Hallo zusammen,

nach vielen verschiedenen Google & Foren Suchaktionen habe ich mich nun doch entschlossen ein eigenes Thema zu erstellen.

Ich habe ein CSS jQuery Dropdown Menü gefunden und soweit auf meine Bedürfnisse angepasst. Lediglich das zentrieren der Nav Button Texte will mir nicht gelingen. Ich glaube es hat etwas mit dem gestzten "float:left" zu tun, bin mir aber nicht ganz sicher.

CSS

ul.sdt_menu li span span.sdt_link{
	color:#FF9B00;
	font-size:20px;
	float:left;
	clear:both;
z-index:1000;
}
ul.sdt_menu li span span.sdt_descr{
	color:#FFFFFF;
	float:left;
	clear:both;
	width:155px; /*For dumbass IE7*/
	font-size:10px;
	letter-spacing:1px;
z-index:1000;
}

HTML

	<ul id="sdt_menu" class="sdt_menu">
				<li>
					<a href="index.php?site=news"><img src="Hover1.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span align="center" class="sdt_link">NEWI</span>
							<span class="sdt_descr">Good to know</span>
						</span>
					</a>
				</li>

"margin:0 auto" und "text-align:center" habe ich schon ohne Erfolg versucht.

Hat jemand eine Idee?

Gruß aus Hessen

 

[djheke]

Wenn du text-align:center auf li anwendest, sollte es gehen. Trotz float:left.

 

[Netzwerkidi]

Was genau soll da zentriert sein? Oder hat es sich schon erledigt?

<ul style="background:gray" id="sdt_menu" class="sdt_menu">                
  <li style="background:blue" >                    
    <a style="background:yellow" href="index.php?site=news">
      <img src="http://style.tutorials.de/v10/images/buttons/post_thanks.png" alt=""/>                        
      <span style="background:green" class="sdt_active">
      </span>                        
      <span style="background:cyan" class="sdt_wrap">                            
        <span style="background:red" align="center" class="sdt_link">NEWI
        </span>                            
        <span style="background:orange" class="sdt_descr">Good to know
        </span>                        
      </span>                    
    </a>                
  </li>   
</ul>

 

[2secret]

@djheke

auf LI anwenden, hat leider nichts gebracht

@Netzwerkidi

auf span class="sdt_link" und span class class="sdt_descr"

Hier die URL um die es geht http://test.be-inSide.eu/

 

[SpiceLab]

Centering Float Left Menus ist hier wohl eher dein Anliegen.

 

[Netzwerkidi]

Ja ok, aber was genau soll nun mittig sein?
Die Menüeinträge auf der Seite sehen m. E. ok aus.

 

[2secret]

@ spicelab

ich hoffe mit meinen doch so geringen Grundkentnissen konnte ich die Anweisungen richtig umsetzen, jedoch funktioniert es noch nicht

In CSS den Outercontainer hinzugefügt:

navouter{
	width:100%;
	overflow:hidden;
}

In HTML folgendes geändert:

	<div id="navouter">
	<ul id="sdt_menu" style="position:relative, left:50%" class="sdt_menu">
				<li style="position:relative right:50%">
					<a href="index.php?site=news"><img src="http://www.tutorials.de/images/Hover1.png" alt=""/>
						<span class="sdt_active"></span>
						<span class="sdt_wrap">
							<span align="center" class="sdt_link">NEWSCENTER</span>
							<span class="sdt_descr">Good to know</span>
						</span>
					</a>
				</li>

@ Netzwerkidi

die Beschriftungen der Hauptnavi Buttons möchte ich gerne zentrieren.
Also NEWSCENTER, BE.INSIDE, COMMUNITY...
und ihre Untertexte wie GOOD TO KNOW, BACKSTAGE...

Danke schonmal für Eure hilfe

 

[djheke]

Hier die benötigten Änderungen, die du auf alle Spans anwenden kannst. Allerdings n i c h t als inline-styles. Ist nur zum Testen. Hat alles funktioniert. Du solltest aber deine Schriftgröße etwas verkleinern.

<span class="sdt_link"style="display:block;width:140px;margin-left:6px;padding:0;">NEWI</span>

 

[SpiceLab]

@ spicelab

ich hoffe mit meinen doch so geringen Grundkentnissen konnte ich die Anweisungen richtig umsetzen, jedoch funktioniert es noch nicht



In HTML folgendes geändert:

	<div id="navouter">
	<ul id="sdt_menu" style="position:relative, left:50%" class="sdt_menu">
				<li style="position:relative right:50%">

Das notierte Komma nach der ersten position-Regel, und das Leerzeichen nach der zweiten position-Regel ist durch ein Semikolon zu ersetzen.

Da in dem Menü noch weitere <li>-Tags folgen, die CSS-Regeln im globalen Stylesheet aufnehmen, damit's letzlich mit dem kompletten Menü funktioniert!

 

[2secret]

@ spicelab:

oh danke, hab ich irgendwie in meiner unkonzentriertheit übersehen.
Habs nun geändert und mein Navi sieht jetzt ziemlich zerfetzt aus