zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden grafische Navigation horizontal zentrieren, klappt nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.11.2010, 09:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Beitrag grafische Navigation horizontal zentrieren, klappt nicht

Hallo,

ich bin noch CSS Anfänger und habe ein grafisches Navi gebaut, funktioniert auch prima, dank der tollen Anleitung in den FAQs

Jetzt sollte das Ganze horizontal zentriert werden. Ich habe es mit der display-table Variante probiert, was leider nicht klappt.

Mit margin: 0 auto im #navi sollte es doch funktionieren? Ich habe wegen des grafischen Menüs noch width Angaben im CSS, die ich aber nicht weglassen kann???

Bin mittlerweile ziemlich ratlos. Ich hoffe es kann mir jemand weiterhelfen.

Hier liegt die Testseite

Und hier kommt der HTML code:

HTML-Code:
<div id="pageheader">
      <div id="header1"> </div>
      <div id="header2">
        <div id="navi">
          <ul>
            <li id="home"><a href="index.html">Home<span></span></a></li>
            <li id="ueberuns"><a href="#">Ueber uns<span></span></a></li>
            <li id="produkte"><a href="#">Produkte<span></span></a></li>
            <li id="anfahrt"><a href="#">Anfahrt<span></span></a></li>
            <li id="kontakt"><a href="#">Kontakt<span></span></a></li>
          </ul>
        </div>
      </div>
      <!--ende header 2-->
    </div>
    <!-- Endepageheader-->

Und hier das CSS
Code:
#navi {
	float: left;
	display: table;
	margin: 0 auto;
}
#navi ul {
	display: table-row;
}
#navi li {
	float: left;
	width: 100px;
	padding-left: 20px;
	list-style-type: none;
	display: table-cell;
}
#navi #home, #navi #ueberuns, #navi #produkte, #navi #anfahrt, #navi #kontakt {
	width: 100px;
}
#navi a, #navi strong {
	display: block;
	height: 26px;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#navi span {
	display: table-cell;
	position: absolute;
	width: 100%;
	height: 26px;
	top: 0px;
	left: 0px;
	background: url(images/navi_1611_hg_nichttransparent.png);
	cursor: pointer;
}
#navi a span {
	cursor: pointer;
}
/* Navi home */ 			
	#navi #home a span {
	background-position: 0 0;
}
#navi #home a:hover span, #navi #home a:active span, #navi #home a:focus span {
	background-position: 0 -26px;
}
/* Navi ueberuns */ 
	#navi #ueberuns a span {
	background-position: -120px -0px;
}
#navi #ueberuns a:hover span, #navi #ueberuns a:active span, #navi #ueberuns a:focus span {
	background-position: -120px -26px;
}
/* Navi produkte */
	#navi #produkte a span {
	background-position: -240px 0;
}
#navi #produkte a:hover span, #navi #produkte a:active span, #navi #produkte a:focus span {
	background-position: -240px -26px;
}
/* Navi anfahrt */
	#navi #anfahrt a span {
	background-position: -360px 0;
}
#navi #anfahrt a:hover span, #navi #anfahrt a:active span, #navi #anfahrt a:focus span {
	background-position: -360px -26px;
}
/* Navi kontakt */
	#navi #kontakt a span {
	background-position: -480px 0;
}
#navi #kontakt a:hover span, #navi #kontakt a:active span, #navi #kontakt a:focus span {
	background-position: -480px -26px;
}
Vielleicht kann mir noch jemand verraten, warum links nicht auf sich selber zeigen sollen? Darüber habe ich bisher keine Informationen gefunden.

Danke für eure Hilfe
lila_3
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.11.2010, 09:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von lila_3 Beitrag anzeigen
Mit margin: 0 auto im #navi sollte es doch funktionieren?
Nicht bei einem gefloateten Element. Dem sagst du schließlich, es soll so weit links wie möglich stehen.

Zitat:
Ich habe wegen des grafischen Menüs noch width Angaben im CSS, die ich aber nicht weglassen kann???
Dann brauchst du diese Zentriermethode gar nicht. Du kannst deine Breiten ausrechnen und im Prinzip einfach einen linken Abstand angeben.

Zitat:
Vielleicht kann mir noch jemand verraten, warum links nicht auf sich selber zeigen sollen? Darüber habe ich bisher keine Informationen gefunden.
Google mal nach "Deppenlinks".
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.11.2010, 10:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Standard

Hallo fricca,

habe ich das richtig verstanden, dass ich für jeden link den Abstand nach links angeben soll. Dann kann ich die width angaben weglassen und die Navi sollte zentriert sein?

Danke für die Tipps

lila_3
Mit Zitat antworten
  #4 (permalink)  
Alt 30.11.2010, 10:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Nein, gar nicht.
Wenn du feste Breiten hast brauchst du keine Zentriermethode für unbekannte Breiten. Du kannst einfach rechnen und dem umgebenden Element einen linken Abstand geben.

Oder du gibst den li-Elementen nicht nur ein linkes Padding, sondern verteilst es auf rechts und links. Dann kannst du die Gesamtbreite ausrechnen und dem umgebenden Element zuweisen und dieses zentrieren.
Mit Zitat antworten
  #5 (permalink)  
Alt 30.11.2010, 10:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2009
Beiträge: 15
lila_3 befindet sich auf einem aufstrebenden Ast
Standard

jetzt habe ichs kapiert

Vielen lieben Dank!
lila_3
Mit Zitat antworten
Antwort


Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
navigation will sich nicht horizontal zentrieren lassen mrParker CSS 24 30.05.2006 20:03
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 18:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:09 Uhr.