zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.03.2011, 14:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren

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
Angehängte Grafiken
Dateityp: jpg divs.JPG (28,9 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.03.2011, 19:21
Neuer Benutzer
neuer user
 
Registriert seit: 17.03.2011
Ort: Europa
Beiträge: 3
Albert befindet sich auf einem aufstrebenden Ast
Standard

versuche es mal mit "display: inline-block;" bei den buttons!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.03.2011, 19:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 07.04.2005
Ort: Kuchen
Beiträge: 119
Dani@okraina befindet sich auf einem aufstrebenden Ast
Standard

Warum nimmst du dafür keine liste?
Code:
<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  ...
</ul>
__________________
Gruß
Dani
Mit Zitat antworten
  #4 (permalink)  
Alt 17.03.2011, 20:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 18.03.2011, 06:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 28.01.2011
Beiträge: 338
Webcoder sorgt für eine eindrucksvolle AtmosphäreWebcoder sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Alien Beitrag anzeigen
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
__________________
Websites erstellen ist ein Hobby von mir.
Mit Zitat antworten
  #6 (permalink)  
Alt 19.03.2011, 14:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 19.03.2011, 17:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

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>
Mit Zitat antworten
  #8 (permalink)  
Alt 19.03.2011, 18:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 19.03.2011, 18:18
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

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.03.2011, 19:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 14
Alien befindet sich auf einem aufstrebenden Ast
Standard

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.
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
CSS-Seite horizontal und vertikal zentrieren! Boof CSS 20 05.02.2010 13:23
Divs horizontal anordnen, mit <li>, float? funky^mariechen CSS 12 29.08.2008 03:08
Hintergrundbild vertikal UND horizontal zentrieren? yggdrasil CSS 3 06.07.2008 11:19
Vertikal und horizontal Zentrieren IE5? kakktus CSS 8 17.02.2005 14:12
Bild horizontal und vertikal zentrieren Anonymous CSS 10 18.06.2003 12:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:41 Uhr.