CSS Div Positionierung (Browserübergreifend :()

[stud3nt]

Hallo Leute,

ich bin gerade wieder dabei an der Div Positionierung zu verzweifeln.
So soll am alles Ende aussehen:
Ziel
Bis hier hin funktierniert auch alles wunderbar:
Ist Zustand

Hier der Code dazu

	<div id="divD">
		<div id="divText1">
			Text1
		</div>
		<div id="divText2">
			Text2
		</div>
		<div id="divText3">
			Text3
		</div>		
		<div id="divText4">
			Text4
		</div>
		<div id="divText5">
			Text5
		</div>
		<div id="divText6">
			Text6
		</div>		
		<div id="divText7">
			Text7
		</div>
		<div id="divText8">
			Text8
		</div>		
		<div id="divText9">
			Text9
		</div>		
		<div id="divText10">
			Text10
		</div>		
		<div id="divText11">
			<p>Text11</p>
		</div>	
	</div>

#divD
	{
		background-color:yellow;
		width: 500px;
		height: 500px;
		margin: 0 auto;
	}

	#divText1
	{
		border:solid;
		width: 250px;
		height: 30px;
		position: relative;
		top: 50px;
		left: 110px;
	}
	#divText2
	{
		border:solid;
		width: 227px;
		height: 32px;
		position: relative;
		top: 47px;
		left: 40px;
	}
	#divText3
	{
		border:solid;
		width: 170px;
		height: 32px;
		position: relative;
		top: 9px;
		left: 270px;
	}
	#divText4
	{
		border:solid;
		width: 440px;
		height: 78px;
		position: relative;
		top: 12px;
		left: 20px;
	}
	#divText5
	{
		border:solid;
		width: 80px;
		height: 40px;
		position: relative;
		top: 13px;
		left: 37px;
	}

Aber ab dem divText6 muss ich auf einmal NEGATIVE Margins zuweisen um das erwünschte Ergebnis (Bild 1) zu erreichen. Aber warum?

Also ich kriege das erwünschte Ergebnis hin, aber ich möchte es nicht hinpfuschen. Könnt Ihr mir sagen was da schief läuft.

PS:Achso es sollte im IE auch so ausshen. Ist im Moment leider gar nicht der Fall .

Ergänzung (21. Mai 2012)

Warum werden die Bilder nicht mit dem IMG-Tag angezeigt?

 

[Zeitschlag]

hast du in der css-datei auch #divtext 6 bis 11 definiert?

 

[stud3nt]

Ja habe ich. Aber wie gesagt um das gewünschte Ergebnis zu erzielen, muss ich NEGATIVE MARGINS eingeben.
Hier:

	#divText6
	{
		border:solid;
		width: 350px;
		height: 70px;
		position: relative;
		top: -33px;
		left: 120px;
	}
	#divText7
	{
		border:solid;
		width: 120px;
		height: 40px;
		position: relative;
		top: -35px;
		left: 70px;
	}
	#divText8
	{
		border:solid;
		width: 200px;
		height: 60px;
		position: relative;
		top: -81px;
		left: 193px;
	}
	#divText9
	{
		border:solid;
		width: 240px;
		height: 60px;
		position: relative;
		top: -83px;
		left: 30px;
	}
	#divText10
	{
		border:solid;
		width: 180px;
		height: 60px;
		position: relative;
		top: -149px;
		left: 273px;
	}
	#divText11
	{
		border:solid;
		width: 180px;
		height: 30px;
		position: relative;
		top: -149px;
		margin: 0 auto;
	}

Und ich würde das ganze gerne sauber "coden".

 

[eri]

so hab mir jetzt nicht deinen ganzen Code angesehen... aber es sieht so aus, als ob der Parameter "float:right"/"float:left" danach schreit benutzt zu werden. Nim mal die ganzen "position: relative" raus und probier´s damit, vielleicht auch noch ein paar Wrapper setzen...
Hätte noch kein Design gefunden, welches sich nicht mit DIVs und Tables bewerkstelligen lässt.

 

[stud3nt]

Tables wollte ich eigentlich verhindern.
Und "float" wollte ich auch verhindern. Damit geht meistens das Chaos erst so richtig los .

Aber kennt jemand den Grund warum sich die Margins erst ab "Text6" so komisch verhalten?

 

[T. Smith]

Wenn du möchtest, dass es sich jemand genauer anschaut, wäre ein Link zu einer lauffähigen Seite besser.
Allgemein ist dein Ansatz aber nicht wirklich zu empfehlen, mit float/clear erreichst du dein Ziel (wahrscheinlich) eher. Falls du hier noch Nachholbedarf hast: http://little-boxes.de/little-boxes-teil1-online.html und http://css-technik.de/css-examples/219_9/ können helfen

 

[Lawnmower]

Für so ein Konstrukt wäre ein Div drumherum (dein divd), das erhält position:relative, eine Breite, eine Höhe und float:left (und zum testen der Ausrichtung unten wäre eine dezente Hintergrundfarbe auch noch ganz nützlich).

Dann plaziert man alle Text Divs in das Drumherum Div und gibt denen ein position:absolute (und nicht relative wie jetzt), Breite, Höhe sowie die entsprechenden top und left bzw right Werte (kein float). So kannst Du positionieren wie Du es haben möchtest und musst Dich nicht mit margins rumschlagen.

Ist zwar nicht hübsch aber ich denke so ein Layout floaten macht es auch nicht viel hübscher. Hat natürlich den Nachteil dass die Text Divs dann alle eine fixe Dimension haben werden - aber ob das so sein muss geht aus deiner Beschreibung nicht hervor. Und das müsste eigentlich problemlos in allen Browsern klappen dann.

 

[stud3nt]

@Lawnmower Du bist .

Hab soviel probiert. Aber außen "relative" und innen "absolute" war der Bringer!


DAAAAAAANKE!

 

[WhiteShark]

Absolute Divs positionieren sich (idr) immer am letzten äußeren relativem Div.

Wenn du nun bspw in div5 ein weiteres Absolutes Div reinpackst, wird sich das nicht an Div5, sondern am DivD orientieren.


Zentrieren kannst du relative Divs übrigens auch ganz einfach:
margin:0px auto; (bzw margin-left:auto, margin.-right:auto).

Absolute Divs lassen sich nur mit einer festen Breite zentrieren (left:50%; margin-left:-Breite/2)

Denke das könnte dir die Positionierung etwas erleichtern.

Div6-11 würde ich übrigens wieder relativ machen (Div6 mit entsprechendem margin-top).
Dann musst du die nicht noch alle einzeln positionieren (sind ja eh direkt untereinander).

Auch Div4 würde ich relativ machen und Div5 dort reinpacken (absolut).
Vorteil: Div4 kann je nach Inhalt so hoch werden wie es will und Div5 bleibt darunter.
Natürlich kannste auch Div5 relativ machen und mit margin-left etwas nach rechts schieben.

Gibt viele Möglichkeiten das zu lösen

 

[stud3nt]

Habs schon gelöst. Danke und das für alle (die ich habe) Browser: Firefox, IE9, Chrome

 

[WhiteShark]

Kannst du uns das Ergebnis präsentieren, oder geht das aus datenschutzrechtlichen Gründen (oder so) nicht?

 

[stud3nt]

Muss ich abklären. Wenn ich die erlaubnis kriege lade ich es auf meinen Webspace und gebe euch den Link!

 

[It'sNever2Late!]

Hallo,

was ist denn so schlimm an negativen margins?

Also z.b: margin-top: -10px; ?

Geht es hier nur um die Semantik?

Wobei ich das bezweifle, bei dem HTML-Code.

 

[stud3nt]

Wobei ich das bezweifle, bei dem HTML-Code.

Was stimmt denn mit dem HTML- Code nicht? Ein Div mit n Divs innen? So viele Fehler können da ja wohl nicht sein!

Und ich habe nie gesagt, dass etwas schlimm ist an negativen margins. Nur dass ich keine Lust habe durch "Trial and Error" das Design zu basteln. Das war hier aber der Fall und so sind die negativen margins entstanden. Wenn etwas im Code durch "Trial and Error" nur zum Ziel führt und ich es nicht nachvollziehen kann, ist es schlimm.

 

[Daaron]

Ich überleg grad... Reagieren "inline-block" - Elemente auf text-align:center nicht genau so wie Text? Dann könnte man dem Elternelement n text-align geben und alle Kind-Divs einfach auf inline-block setzen. Solange nicht mehr als 2 der Kinder auf eine "Zeile" passen sollte alles hübsch sein

 

[WhiteShark]

Könnte an sich funktionieren, aber inline block setzt man nicht auf Divs, da hat der ie Probleme. Dafür benutzt man Span.

 

[Daaron]

Ab IE8 klappt Inline-Block perfekt. Für alles darunter gibts entweder gar keinen Support oder leidlich hässliche Fallbacks.

Ich für meinen Teil arbeite inzwischen quasi ausschließlich mit CSS-Transistions statt 1000 Zeilen JS-Code und nutze großflächig Box-Shadow & Border-Radius, anstatt drölfzillionen PNGs zusammenzufrickeln. Und genauso positioniere ich großflächig mit Inline-Block.
Es ist mir gelinde gesagt scheißegal, wie die Seiten in uralten, unsicheren, langsamen und instabilen Browsern aussehen. Wenn der Kunde entsprechende Unsummen springen lässt, dann kriegt er einen notdürftigen Fallback für die Krücken, aber um konkurrenzfähige Arbeitszeiten zu erreichen kann man sowas nicht als kostenlosen Service mit einbauen.

Webdesigner aller Länder vereinigt euch. Dann wird auch endlich was daraus, dass die niedrigste im Netz aktiv verwendete IE-Version die 9 ist. Kein Support für Holzbrowser!

 

[WhiteShark]

Inline-block geht auch mit ie 7, sofern man dazu Spans benutzt.
Von daher sollte man dann auch spans benutzen.

 

[T. Smith]

IE6 und 7 können inline-block ähnliches Verhalten erzeugen, wenn das Element display:inline und hasLayout=true hat. Da ist es egal, ob div oder span.

 

[Messinho]

Wobei ich das bezweifle, bei dem HTML-Code

Mich interessiert immer noch was an dem Code so schlecht sein soll. Kann mir das mal bitte jemand erklären. Wenn ich schlechten Code habe, möchte ich das wissen. Aber was kann man bei Divs falsch machen?