Martin aus Wien: Tabelle mit ul und li

Beitrag lesen

SELF-Forum

Tabelle mit ul und li

Martin aus Wien
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln