Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren

Alien · #1 (**permalink**) 17.03.2011, 13:28

Hallo,

nach zwei Tagen recherche und ausprobieren bin ich jetzt verzweifelt und hoffe hier kann mir einer helfen.

Ich habe eine unbestimmte Anzahl (kann sich bei jedem Seitenaufruf ändern) von Div-Tags. Diese sollen innerhalb eines Divs als Liste angezeigt werden. Die Höhe des äußeren Divs ist fest definiert. Sollen mehr Divs angezeigt werden, als die Höhe des Äußeren zulässt, muss eine zweite Listenspalte erzeugt werden. Alle angezeigten Divs sollen als Liste gesamtbetrachtet vertikal und horizontal zum Äußeren Divs zentriert angezeigt werden. Der umgekehrte Fall wäre auch ok, wenn die Liste sich von links nach rechts aufbaut und wenn in einer Zeile kein Platz mehr ist, die weiteren Divs in eine neue rutschen.

Ich weiss nicht, ob man das textuell versteht, deshalb hab ich noch ein Bild angehängt. Mein Problem ist, dass bei allen versuchen entweder das Zentrieren klappt oder das Auflisten. Beides scheint sich auszuschließen

Hier nochmal ein HTML-Gerüst:

Code:

<div id="aussen">
    <div class="buttons">Button 1</div>
    <div class="buttons">Button 2</div>
    <div class="buttons">Button 3</div>
    <div class="buttons">Button 4</div>
</div>

und noch das grundlegende CSS:

Code:

#aussen {
    width: 966px;
    height: 458px;
    border: 1px black solid;
}

.buttons {
    width: 200px;
    height: 64px;
    border: 1px black solid;
}

Ich hoffe mir kann einer weiterhelfen. Vielen Dank

LG
Alien

Albert · #2 (**permalink**) 17.03.2011, 18:21

versuche es mal mit "display: inline-block;" bei den buttons!

Dani@okraina · #3 (**permalink**) 17.03.2011, 18:27

Warum nimmst du dafür keine liste?

Code:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>

Alien · #4 (**permalink**) 17.03.2011, 19:12

Danke für die Antworten.

@Albert: Hatte ich schonmal probiert. Allerdings ist dann das vertikale Zentrieren nicht mehr möglich

@okraina: Ich hätte auch kein Problem damit die DIVs gegen eine Liste zu tauschen. Probiert habe ich es auch schon in diesen zwei erfolglosen Tagen. Allerdings klappt auch da das zentrieren nicht.

Für ein kleines code beispiel wäre ich dankbar.

Webcoder · #5 (**permalink**) 18.03.2011, 05:09

Zitat:

Zitat von Alien

Hallo,

nach zwei Tagen recherche und ausprobieren bin ich jetzt verzweifelt und hoffe hier kann mir einer helfen.

...

Hier nochmal ein HTML-Gerüst:

Code:

<div id="aussen">
    <div class="buttons">Button 1</div>
    <div class="buttons">Button 2</div>
    <div class="buttons">Button 3</div>
    <div class="buttons">Button 4</div>
</div>

und noch das grundlegende CSS:

Code:

#aussen {
    width: 966px;
    height: 458px;
    border: 1px black solid;
}

.buttons {
    width: 200px;
    height: 64px;
    border: 1px black solid;
}

...

Hi Alien

theoretisch könnte man dir sicherlich helfen, nur nicht mit den Angaben.

Was du hier zeigst ist kein HTML-Gerüst sondern lediglich 5 Divs, niemand weiß wie diese implementiert sind. Auch der CSS-Code ist mehr als unzulänglich, hieraus geht weder die Zentrierung hervor noch das floaten der Button.

Möchtest du weitere Hilfe haben, empfehle ich dir eine Testseite online zu stellen wo man den gesamten Code sieht und das bisher erreichte nachvollziehen kann.

PS: Im übrigen hat okraina recht! Was du bastelst, sieht aus wie eine Navigation, welche grundsätzlich als Liste implementiert werden sollte.

Gruß
Webcoder

Alien · #6 (**permalink**) 19.03.2011, 13:56

Hallo,

wie gewünscht habe ich mal zwei meiner Versuche online gestellt. Ich hatte es vorher nicht getan, weil ich einfach soviel probiert hatte, dass der Code unbrauchbar war. Ihr habt recht, es geht um eine Navigation. Allerdings für Touchscreens. Deshalb soll auch die Anzahl der Listenelemente variable sein. Ich hab nun die inneren Divs wie gewünscht durch eine ul-Liste ersetzt.

1. Hier findet ihr jetzt die Version mit floaten:
Untitled Document

Problem: Ich bekomme in dieser Version die Liste nicht zentiert

2. Hier die zentrierte Version:
Untitled Document

Problem: Hier werden die li-Tags nicht mehr auf Spalten verteilt und wenn es mehr sind, als die Höhe des aüßeren Divs zulässt, wird es einfach vergrößert.

Ich hoffe jetzt ist es etwas klarer und mir kann einer helfen.

LG
Alienz

K.Roland · #7 (**permalink**) 19.03.2011, 16:58

Falls du das meintest.
Vieleicht konte ich dir helfen etwas.

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>

<style type="text/css" media="screen">
/* CSS Reset Start */
html, body, div {
margin: 0; padding: 0;
}
#navibox {
background-color: #fff;
border: 1px solid #000;
color: #000;
margin: 0 auto;
padding: 10px;
width: 966px;
text-align: center;
height: 300px;
}
#navibox ul {
list-style-type: none;
}
#navibox ul li {
float: left;
margin: 10px;
}
#navibox ul li a {
background-color: #fff;
border: 1px solid #000;
color: #1e90ff;
display: block;
font-size: 16px;
height: 64px;
text-decoration: none;
width: 200px;
}
</style>

</head>
<body>

<div id="navibox">
<ul>
<li><a href="#">test test test test test test test test test test test test test test test test test</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>

</body>
</html>

Alien · #8 (**permalink**) 19.03.2011, 17:08

Danke für deine Antwort. Im ersten Moment sieht es so aus, als ob es funktioniert. Wenn man allerdings alle li-Elemente bis auf 2 oder 3 rausnimmt, so dass alle noch in eine Zeile reinpassen, dann funktioniert das horizontale zentrieren wieder nicht.

Ich hab mal auch Deine Version zu weiteren Diskussion hochgeladen:
Test

Also falls einer noch einen Tip hat, wäre das super.

fricca · #9 (**permalink**) 19.03.2011, 17:18

Tipp: FAQ Punkt 13

Ich muss sagen, ich verstehe nicht, was du wirklich willst.
Wenn du eine feste Höhe für alles vorgibst: Was soll passieren, wenn die Elemente nicht reinpassen?

Weitere Möglichkeiten für diverse Zentriereien findest du bei Bruno Fassino: CSS tests and experiments

Alien · #10 (**permalink**) 19.03.2011, 18:04

Du hast recht: Durch die vorgegebene Höhe und Breite des Äußeren Divs, ist die Anzahl der li-Elemente begrenzt. Sollten mehr vorhanden sein (was nicht der Fall sein wird), werden sie über overflow:hidden nicht dargestellt werden.

Ansonsten sollen alle sichtbaren li-Elemente vertikal und horizontal zentriert werden, wobei die Anzahl der Elemente variieren kann.

Ich weiss nicht, wie ich es noch anders erklären soll. Eigentlich dachte ich der Text plus Bildbeispiel und jetzt auch noch die Codebeispiele sollten das Problem klar machen.

Ich hoffe noch auf eine Lösung. Ansonsten bin ich gezwungen das mit PHP zu lösen, was ich eigentlich vermeiden wollte.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS-Seite horizontal und vertikal zentrieren!	Boof	CSS	20	05.02.2010 12:23
Divs horizontal anordnen, mit <li>, float?	funky^mariechen	CSS	12	29.08.2008 02:08
Hintergrundbild vertikal UND horizontal zentrieren?	yggdrasil	CSS	3	06.07.2008 10:19
Vertikal und horizontal Zentrieren IE5?	kakktus	CSS	8	17.02.2005 13:12
Bild horizontal und vertikal zentrieren	Anonymous	CSS	10	18.06.2003 11:20