zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontale Liste zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.02.2006, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2004
Beiträge: 22
campylobacter befindet sich auf einem aufstrebenden Ast
Standard Horizontale Liste zentrieren

Hallo,

Ein Problem, das ich jetzt nach Stunden immer noch nicht lösen kann:

Ich will eine Navigation machen, die in der Mitte der Seite zentriert dargestellt werden soll. Die einzelnen Elemente stehen nebeneinander. Da ich die Seite auch übersetzen will auf eine andere Sprache, kann ich keine fixen Angaben zur Breite der Elemente machen.

Mein erster Ansatz war:
Code:
li {
  display: inline;
  margin: 0px;
  padding: 0px;
}
Allerdings hatte gab es dann im Browser zwischen den Elementen einen sonderbaren Abstand von ein paar Pixeln. Bei meiner Fehlersuche hab ich auch gelesen, das ein Screenreader "display: inline" ohne zeitliche Unterbrechung vorliest, als wäre es ein Satz.

Mein zweiter Ansatz:
Code:
li {
  display: block;
  margin: 0px;
  padding: 0px;
  float:left;
}
Jetzt ist zumindest der Abstand weg. Allerding ist das Menü nicht mehr in der Seitenmitte. Kann mir da jemand weiterhelfen?

Vielen Dank!

Hier noch der "ganze" Code:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
  /* <![CDATA[ */
#nav_top {
  background-color:#FFFFFF;
  text-align: center;
  padding-top: 70px;
}
#nav_top ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
#nav_top ul li {
  display: block;
  background-color: #74A81C;
  margin: 0px;
  padding: 0px;
  float:left;
}

  /* ]]> */
  </style>
</head>
<body>
    <div id="nav_top">
      <ul>[*]Element 1[*]Element 2[*]Element 3[*]Element 4[/list]  </div>
</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.02.2006, 14:46
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Code:
#nav_top ul {margin:0 auto; }
sollte helfen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.02.2006, 15:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2004
Beiträge: 22
campylobacter befindet sich auf einem aufstrebenden Ast
Standard

Leider nicht. Das Menü (die Liste) ist immer noch links und nicht in der Mitte. Auch nicht mit einem zusätzlichen div+text-align: center;
Mit Zitat antworten
  #4 (permalink)  
Alt 17.02.2006, 17:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

wenn ein Blockelement keine definierte width hat, wird es bei margin: 0 auto; nicht zentriert, da es bereits den vollen Platz einnimmt und der margin überall 0 ist. Gib der <ul> eine Breite kleiner als das Elternelement und dann margin: 0 auto;
Dafür kannst Du das bei den[*]s wieder rausnehemen.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.02.2006, 18:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2004
Beiträge: 22
campylobacter befindet sich auf einem aufstrebenden Ast
Standard

Ok danke, alles klar; Würde auch funktionieren. Es wäre aber nicht der Idealfall, weil ich nicht weiß, wie breit ein einzelnes Element wirklich sein darf.

Vielleicht wäre der "inline" Ansatz doch nicht so schlecht. Aber da ist halt ein Abstand zwischen den Menüpunkten (li hat einen Farbwert). Wieso ist das eigentlich der Fall? Auf die schnelle würde mir nur einfallen, einen span mit der gleichen Farbe einfach darüber zu legen, dann fällt es nicht auf. Aber ist das die perfekte Lösung?
Mit Zitat antworten
  #6 (permalink)  
Alt 17.02.2006, 18:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von campylobacter
Ok danke, alles klar; Würde auch funktionieren. Es wäre aber nicht der Idealfall, weil ich nicht weiß, wie breit ein einzelnes Element wirklich sein darf.
Eine prozentuale Breite passt sich immer an.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.02.2006, 19:46
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 campylobacter
Vielleicht wäre der "inline" Ansatz doch nicht so schlecht. Aber da ist halt ein Abstand zwischen den Menüpunkten (li hat einen Farbwert). Wieso ist das eigentlich der Fall?
Weil ein Abstand oder Umbruch im Quelltext zwischen inline-Elementen ein Blank erzeugt. Schreib die LIs direkt hintereinander.
Mit Zitat antworten
  #8 (permalink)  
Alt 24.05.2006, 22:53
Neuer Benutzer
neuer user
 
Registriert seit: 12.12.2004
Beiträge: 3
@vatar befindet sich auf einem aufstrebenden Ast
Standard

entfern mal die XML - Deklaration im Kopf deiner Seite. Diese verhindert bei mir (im IE6) ebenfalls das Zentrieren eines DIV - Blocks per CSS.
__________________
kostenlose Referate!
Mit Zitat antworten
  #9 (permalink)  
Alt 28.08.2010, 01:45
Benutzer
neuer user
 
Registriert seit: 15.04.2008
Ort: Niedersachsen
Beiträge: 49
Muckel befindet sich auf einem aufstrebenden Ast
Standard

Guten Abend zusammen,

habe da leider das gleiche Problem. Und zwar gibt es bei meinem Layout am Anfang gleich ein Listen-Menü, welches die wichtigsten Seiten enthalten soll. Den Aufbau habe ich so vorgenommen:
HTML-Code:
#menue {
	display:block;
	padding:0.25em;
	margin:0em;
	text-align:center;
	font-size:1em;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:solid #000 0.05em;
}

/* Listen Menue */

#menue ul {
	list-style-type:none;
	padding:0em;
	margin:0 auto;
	width:95%;
	text-align:center;
}

#menue li {
	float:left;
	padding:0.25em;
	margin:0em 0.5em 0em 0.5em;
	font-size:0.8em;
	font-weight:bold;
	border-top:solid #000 0.05em;
	border-left:solid #000 0.05em;
	border-right:solid #000 0.05em;
	border-bottom:none;
}

#menue li a {color:#000000;}
#menue li a:hover {color:#CCCCCC;}
Die Listen Einträge sind schön Nebeneinander. Doch die gesamte Liste hätte ich nun gerne auch zentriert. Doch wie kann ich das machen?

Hoffe ihr könnt mir helfen.
Vielen Dank
Muckel
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.08.2010, 01:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Hier solltest Du etwas finden: http://xhtmlforum.de/296439-post2.html
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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
horizontale Liste mit Block-Elementen Hustler CSS 4 29.09.2011 22:34
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 11:23
Horizontale Liste mit Dropdown zentrieren Amnesys (X)HTML 4 13.10.2010 09:53
horizontale liste - zeilenumbruch geht nicht outofrulez CSS 10 01.04.2010 15:13
Horizontale Liste mit breiteren Unterpunkten Korasu CSS 3 12.05.2009 10:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:40 Uhr.