[Erledigt] Mehere divs mittig positionieren

Cholec · 13.12.2011, 01:19

Ich habe jetzt schon seit gestern gesucht aber finde nichts was mir wirklich hilft.

Ich möchte mehrere divs nebeneinander positionieren. Diese sind innerhalb eines "Mutter-Divs", indem sie zentriert dargestellt werden sollen.
Mit float bekomme ich sie zwar in eine Reihe aber sie sind halt an einen Rand gedrückt und ich bekomme Sie nicht mittig.

Je nach auflösung kann ein div, wenn es nicht mehr in die Zeile passt auch in die nächste rutschen, aber halt innerhalb einer Zeile immer zentriert.

how to?

lg
Alex

nikosch · 13.12.2011, 02:07

Dann zentriere das Haupt-Div. Weil es normalerweise die ganze Breite einnimmt, wirst Du die Breite fest angeben müssen.

Cholec · 13.12.2011, 09:38

Ich kann die divs zwar mit dem Hauptdiv so ausrichten, dass sie in meiner Ansicht mittig sind, wenn man jedoch das Fenster verkleinert oder man eine niedrigere Auflösung hat, dann sprengt es das design und die inneren divs liegen irgendwo

drsoong · 13.12.2011, 12:52

Code:

<div id="aussen" style="margin:  0 auto; width:80%; border: 1px solid blue;padding:5px">
<div style="float:left;width:33%;height:200px;border: 1px solid green;"></div>
<div style="float:left;width:33%;height:200px;border: 1px solid red;"></div>
<div style="float:left;width:33%;height:200px;border: 1px solid cyan;"></div>
<div style="clear: both;"></div>
</div>

Cholec · 13.12.2011, 15:43

Und wenn dann das Fenster verkleinert wird und nur noch 2 divs in eine Zeile passen? Dann werden die inneren divs ja immer kleiner. Diese haben aber eine feste breite von 350px;

drsoong · 13.12.2011, 20:39

Zitat:

Zitat von Cholec

Und wenn dann das Fenster verkleinert wird und nur noch 2 divs in eine Zeile passen? Dann werden die inneren divs ja immer kleiner. Diese haben aber eine feste breite von 350px;

Ja und? Dann probier doch mal, hieraus was zu machen.

Es ist übrigens auch gängige Praxis in diesem Forum, mal seinen eigenen Ansatz (Code) zu posten. Damit kommt man in Fällen wie Deinem am schnellsten ans Ziel.

eisenhans · 14.12.2011, 09:05

Zitat:

Zitat von Cholec

Und wenn dann das Fenster verkleinert wird und nur noch 2 divs in eine Zeile passen? Dann werden die inneren divs ja immer kleiner. Diese haben aber eine feste breite von 350px;

Es gibt auch noch so Eigenschaften wie min-width und min-height in CSS

tr0y · 15.12.2011, 08:36

- Worauf validierst du das Dokument ? HTML5 ?
- Willst du nicht darstellbare Div's ausblenden bei zu kleinen Fenster ?

Bedenke:
- HTML5 und CSS3 unterstützen Mediaqueries: http://www.w3.org/TR/css3-mediaqueries/ was wiederum device-height "erlaubt", das wiederum dich in die Lage versetzt CSS so zu definieren das unter bestimmten Fenstergrößen automatisch bestimmte elemente "verschwinden" können.
- Du aufgrund von kompatibilität und in jedem Anderen Fall Javascript-Workarrounds oder komplexe CSS-Hacks nutzen musst, die das gleiche Verhalten für ältere Browser xHTML / CSS2 Konform ausliefern.

Cholec · 15.12.2011, 17:42

Neinnein, ich versuch es nochmal anders zu erklären.

Es ist ein Image-Table, also Bilder mit jeweiliger Beschreibung darunter (style="border-radius:3px 3px 0px 0px; padding-bottom:3px

diese sind als div in einem Mutter-Div

je nachdem wie die Auflösung ist, sollen soviele Bilder wie möglich nebeneinander angezeigt werden. Ist die Auflösung zu klein, rutschen die anderen in die nächste Zeile.
Innerhalb einer Zeile sollen diese Images aber immer Mittig im Mutterdiv sein. Ich kann da aber nicht mit statischen Werten arbeiten, da ich nie weiß welche auflösung der Enduser benutzt und somit wieviele Bilder in einer Reihe sind.
text-align funktioniert nicht.
mit margin-auto sind die Bilder zwar mittig, aber jeweils nur 1 pro Zeile
im moment sind sie float:left gesetzt, weil sie sonst IMMER untereinander wären.

tr0y · 15.12.2011, 22:18

äh ?

HTML-Code:

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
		<style>
			* {
				border:0;
				padding:0;
				border:0;
			}
			
			div#motherDiv {
				margin-left:auto; 
				margin-right:auto; 
				width:350px;
				
				padding:5px;
				
				background-color:#2d2d2d;
				
				text-align:center;
			}
			
			img {
				width:48px;
				height:48px;
			}
		</style>
	</head>
	<body>
		<div id="motherDiv">
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
			<img src="http://www.google.de/images/feed-icon.gif" />
		</div>
	</body>
</html>

funktioniert einwandfrei..

Judith, die Schwester von Edith, meint: Du solltest mal deinen jetzigen HTML-Source hier Posten, wenns irgendwie geht den "ganzen", da es mitunter auch von interesse is welchen DOCTYPE du verwendest.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] divs einfügen beim einlesen einer txt Datei	blnzg	PHP Einsteiger	9	22.11.2011 14:42
Mehrere Div's auf einmal unsichtbar machen	wolf29	JavaScript, Ajax und mehr	9	05.10.2011 21:42
[Erledigt] floating divs	drsoong	HTML, Usability und Barrierefreiheit	7	16.06.2011 22:27
[Erledigt] Bildvorschau mittig im Browser	Enigma228	JavaScript, Ajax und mehr	3	29.03.2010 18:55
ausrichtung von divs in divs geht nur im IE	litterauspirna	HTML, Usability und Barrierefreiheit	5	14.10.2008 14:58
[Erledigt] Divs nebeneinander richtig positionieren das sie nicht verschoben werden	litterauspirna	HTML, Usability und Barrierefreiheit	12	09.10.2008 09:04
2 Div's zentrieren	pfump	HTML, Usability und Barrierefreiheit	7	24.04.2008 10:57
Formular mit DIVs	Aris Sung	HTML, Usability und Barrierefreiheit	2	25.11.2007 14:09
Dynamisches Container-Div für floating Divs	HStev	HTML, Usability und Barrierefreiheit	1	14.09.2007 12:39
DIV's positionieren	scooter	HTML, Usability und Barrierefreiheit	10	12.01.2006 16:11
Css Problem - Divs anders positionieren	ypsie	HTML, Usability und Barrierefreiheit	7	22.08.2005 17:40
GDLib mehere Grafiken erzeugen und positionieren		PHP Tipps 2005-2	2	06.08.2005 17:57
Firefox + Divs	Anubis2183	HTML, Usability und Barrierefreiheit	10	28.05.2005 16:33
Tabelle positionieren	Anuschka	HTML, Usability und Barrierefreiheit	3	19.08.2004 03:35

13.12.2011, 01:19
Cholec Neuer Benutzer Registriert seit: 11.12.2011 Beiträge: 20 PHP-Kenntnisse: Anfänger	[Erledigt] Mehere divs mittig positionieren Ich habe jetzt schon seit gestern gesucht aber finde nichts was mir wirklich hilft. Ich möchte mehrere divs nebeneinander positionieren. Diese sind innerhalb eines "Mutter-Divs", indem sie zentriert dargestellt werden sollen. Mit float bekomme ich sie zwar in eine Reihe aber sie sind halt an einen Rand gedrückt und ich bekomme Sie nicht mittig. Je nach auflösung kann ein div, wenn es nicht mehr in die Zeile passt auch in die nächste rutschen, aber halt innerhalb einer Zeile immer zentriert. how to? lg Alex


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

13.12.2011, 02:07
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Dann zentriere das Haupt-Div. Weil es normalerweise die ganze Breite einnimmt, wirst Du die Breite fest angeben müssen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

13.12.2011, 09:38
Cholec Neuer Benutzer Registriert seit: 11.12.2011 Beiträge: 20 PHP-Kenntnisse: Anfänger	Ich kann die divs zwar mit dem Hauptdiv so ausrichten, dass sie in meiner Ansicht mittig sind, wenn man jedoch das Fenster verkleinert oder man eine niedrigere Auflösung hat, dann sprengt es das design und die inneren divs liegen irgendwo

13.12.2011, 15:43
Cholec Neuer Benutzer Registriert seit: 11.12.2011 Beiträge: 20 PHP-Kenntnisse: Anfänger	Und wenn dann das Fenster verkleinert wird und nur noch 2 divs in eine Zeile passen? Dann werden die inneren divs ja immer kleiner. Diese haben aber eine feste breite von 350px;

15.12.2011, 08:36
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	- Worauf validierst du das Dokument ? HTML5 ? - Willst du nicht darstellbare Div's ausblenden bei zu kleinen Fenster ? Bedenke: - HTML5 und CSS3 unterstützen Mediaqueries: http://www.w3.org/TR/css3-mediaqueries/ was wiederum device-height "erlaubt", das wiederum dich in die Lage versetzt CSS so zu definieren das unter bestimmten Fenstergrößen automatisch bestimmte elemente "verschwinden" können. - Du aufgrund von kompatibilität und in jedem Anderen Fall Javascript-Workarrounds oder komplexe CSS-Hacks nutzen musst, die das gleiche Verhalten für ältere Browser xHTML / CSS2 Konform ausliefern. __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

15.12.2011, 17:42
Cholec Neuer Benutzer Registriert seit: 11.12.2011 Beiträge: 20 PHP-Kenntnisse: Anfänger	Neinnein, ich versuch es nochmal anders zu erklären. Es ist ein Image-Table, also Bilder mit jeweiliger Beschreibung darunter (style="border-radius:3px 3px 0px 0px; padding-bottom:3px diese sind als div in einem Mutter-Div je nachdem wie die Auflösung ist, sollen soviele Bilder wie möglich nebeneinander angezeigt werden. Ist die Auflösung zu klein, rutschen die anderen in die nächste Zeile. Innerhalb einer Zeile sollen diese Images aber immer Mittig im Mutterdiv sein. Ich kann da aber nicht mit statischen Werten arbeiten, da ich nie weiß welche auflösung der Enduser benutzt und somit wieviele Bilder in einer Reihe sind. text-align funktioniert nicht. mit margin-auto sind die Bilder zwar mittig, aber jeweils nur 1 pro Zeile im moment sind sie float:left gesetzt, weil sie sonst IMMER untereinander wären.