Tabelle mit ul und li

[Martin Auer]

Ich habe auf der Seite www.protestwanderweg.at eine Tabelle von Links, die sich der Seitenbreite anpassen soll (da auch fürs mobile Internet gedacht). Ich habe das mit einer ungeordneten Liste gemacht und <li> Elementen, die links floaten. Die Tabelle sollte immer zentriert sein, egal, in wieviele Spalten sie sich anordnet. Leider krieg ich das nicht hin. Bei weniger als drei Spalten ist die Tabelle immer linksbündig statt zentriert.

Hier mein CSS für das <ul> Element:

#idQuickguideUl{  
	max-width:600px;  
	font-size:75%;  
	padding:0px;  
	margin-left:auto;  
	margin-right:auto;  
}

Und hier für die <li> Elemente:

#idQuickguideUl li{  
	width:194px;  
	padding:2px;  
	list-style:none;  
	float:left;  
	border:1px solid gray;  
	margin:0px;  
}  

Was mache ich da falsch?

Gruß und Dank

Martin aus Wien

[T-Rex]

Ist dir der Widerspruch nicht beim schreiben aufgefallen?
Du schreibst von eine Tabelle, nimmst dann aber ul. Für Tabellen gibt es table. Dem gibst du ein width: 100% und den spalten ein width: 33% und schon hast du es.

Gruß
Semantisch korrekter
T-Rex

[Gunnar Bittersmann]

@@T-Rex:

nuqneH

Ist dir der Widerspruch nicht beim schreiben aufgefallen?
Du schreibst von eine Tabelle, nimmst dann aber ul.

Soweit richtig.

Für Tabellen gibt es table.

Was dir nicht aufgefallen ist: Der OP möchte eine Liste. Dafür gibt es ul und ol.

Qapla'

[Martin aus Wien]

Hallo T-Rex,

ich habe eine Liste von 12 Links. Die sollen sich, je nach Browserbreite, in drei Spalten und vier Zeilen oder in zwei Spalten und sechs Zeilen oder in einer Spalte zu zwölf Zeilen anordnen. Das ist mit <table> leider nicht möglich. Mit meiner angeführten Methode tun sie das, was ich von ihnen will, bis auf eines: sie bleiben nicht zentriert. Mir geht es nur darum, wie ich diesen Block von <li> Elementen jeweils dazu bringen kann, zentriert zu bleiben. Wenn dir dazu eine Lösung einfällt, dann lass es mich bitte wissen.

Gruß

Martin aus Wien

[Matthias Apsel]

Om nah hoo pez nyeetz, Martin aus Wien!

ich habe eine Liste von 12 Links. Die sollen sich, je nach Browserbreite, in drei Spalten und vier Zeilen oder in zwei Spalten und sechs Zeilen oder in einer Spalte zu zwölf Zeilen anordnen. Das ist mit <table> leider nicht möglich. Mit meiner angeführten Methode tun sie das, was ich von ihnen will, bis auf eines: sie bleiben nicht zentriert. Mir geht es nur darum, wie ich diesen Block von <li> Elementen jeweils dazu bringen kann, zentriert zu bleiben. Wenn dir dazu eine Lösung einfällt, dann lass es mich bitte wissen.

text-align: center für das übergeordnete Element?

Matthias

[Martin aus Wien]

text-align: center für das übergeordnete Element?

Hab ich probiert, funktioniert nicht.

Gruß und Dank

M.

[Gunnar Bittersmann]

@@Martin Auer:

nuqneH

Was mache ich da falsch?

1. Du verwendest Breiten in px anstatt % für die li.
2. Du verwendest keine Media-Queries.

Das könnte eher so aussehen:

#idQuickguideUl li { width: 100% }  
  
@media min-width: 20em  
{  
  #idQuickguideUl li { width: 50% }  
}  
  
@media min-width: 30em  
{  
  #idQuickguideUl li { width: 33% }  
}  
  
@media min-width: 40em  
{  
  #idQuickguideUl li { width: 25% }  
}

Qapla'

[Martin aus Wien]

Hallo Gunnar,

das, was du mir vorschlägst, löst mein Problem nicht. Ich habe eine Liste von 12 Links. Die sollen sich, je nach Browserbreite, in drei Spalten zu vier Zeilen oder in zwei Spalten zu sechs Zeilen oder in einer Spalte zu zwölf Zeilen anordnen, und dieser Block von <li> Elementen soll zentriert sein. Die Schriftgröße soll gleich bleiben und die Breite der <li> Elemente soll gleich bleiben. Meine Lösung hat all das getan, nur war der jeweilige Block von <li> Elementen nicht zentriert.

Mit der Frage des Zentrierens hast du dich zwar gar nicht auseinandergesetzt, mit dem Hinweis auf media-queries hast du mich aber trotzdem auf die richtige Lösung gebracht - oder zumindest eine, die so funktioniert, wie ich es mir vorstelle - obwohl sie ganz anders aussieht als deine. Wenn man nämlich die Breite des <ul> Elements auf ein Vielfaches der Breite der <li> Elemente festlegt, kann man das <ul> Element zentrieren und der Block von <li> Elementen ist auch zentriert.

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Test</title>  
  
<style type="text/css">  
  
h3{  
	text-align:center;  
}  
  
@media all and (min-width: 620px){  
	#idQuickguideUl{  
		width:600px;  
	}  
}  
  
@media all and (min-width: 420px) and (max-width: 619px){  
	#idQuickguideUl{  
		width:400px;  
	}  
}  
  
@media all and (min-width: 220px) and (max-width: 419px){  
	#idQuickguideUl{  
		width:200px;  
	}  
}  
  
#idQuickguideUl{  
	margin-left:auto;  
	margin-right:auto;  
	display:block;  
	text-align:center;  
	padding:0px;  
}  
  
#idQuickguideUl li{  
	width:194px;  
	padding:2px;  
	list-style:none;  
	float:left;  
	border:1px solid gray;  
	margin:0px;  
}  
  
</style>  
</head>  
  
<body>  
  
<h3>Schnell zu den Stationen:</h3>  
  
<ul id = "idQuickguideUl">  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
    <li><a href="xyz.htm">Link</a></li>  
 </ul>  
  
</body>  
</html>

Gruß und Dank

Martin