Div´s mit CSS auf einer Seite richtig kombinieren.

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
n0x3l

n0x3l hat kostenlosen Webspace.

20:32, 4.8.2009
Hallo, ich glaube das mit der Überschrift war wohl nichts :S

Naja, dann schilder ich hier eben mal mein Problem.

Hier erst wider mal das BIld.
http://n0x3l.lima-city.de/layout.jpg

Ich habe auch mal mithilfe von CSS und dem Element "float" versucht drei "DIV´s" nebeneinander zu platzieren.
Das klappt auch, aber bei mir haben die Div-Elemente nicht den gleichen Abstand wie das von SelfHTML (siehe Bild).
Die Abstände habe ich rot umrandet, damit ihr wisst welche ich meine.

Kann man das nicht so machen, dass das dritte Div-Element automatisch den restlichen Platz nimmt?
Das ist ja bei Frame möglich mit dem Selektor * !
Gibt es sowas auch für Div-Elemente?

n0x3l
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

~~c****s~~

20:52, 4.8.2009

Vor genau dem Problem stand ich schon etliche Male ohne saubere Lösung. Ich habe dann immer auf einen von zwei Workarounds zurückgegriffen: (A) Tables oder (B) JS.

Hier ein Workaround mit einem div, das 20% breit ist, einem, das 100px breit ist, und einem, das den Rest einnimmt.
Funktioniert zumindest unter FIREFOX.

Falls du zu einer sauberen CSS-Lösung kommst, lass mich das bitte wissen. Danke

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script language="javascript">
			window.onresize = resize;
			window.onload = resize;
			function resize ()
			{
				document.getElementById ("last").style.width = (window.innerWidth - document.getElementById ("one").offsetWidth - document.getElementById ("two").offsetWidth - 10) + "px";
			}
		</script>
	</head>
	<body style="margin:0px">
		<div style="background-color:green;height:200px;width:20%;float:left" id="one">
		</div>
		<div style="background-color:blue;height:200px;width:100px;float:left" id="two">
		</div>
		<div style="background-color:yellow;height:200px;width:1px;float:left" id="last">
		</div>
	</body>
</html>

~~w******s~~
21:23, 4.8.2009
Das geht schon:
Also nochmal zusammengefasst:
links = feste Größe
mitte = feste Größe
rechts = nimmt übrigen Platz weg.

divs tun das in der Regel immer, den möglichen Platz ausschöpfen

Also Markup:
```
<div id="links"></div>
<div id="mitte"></div>
<div id="rechts"></div>
```
CSS:
```
#links {
float:left;
width: 100px;
}

#mitte {
float:left;
width: 200px;
}

#rechts {margin: 0 0 0 300px;}
```
Das sollte es eigentlich schon gewesen sein. Am besten noch ein div darum packen und clearen. Hier muss halt noch der restliche margin angepasst werden.
~~c****s~~

21:28, 4.8.2009
Mein Problem ist:
Links 20%
Mitte 100px
Rechts Rest

Wie geht das mit margin?
~~w******s~~

21:35, 4.8.2009

census schrieb: Mein Problem ist:
Links 20%
Mitte 100px
Rechts Rest

Wie geht das mit margin?

Das ist wiederum wirklich ein Problem, da du ja ne relative Angabe hast. Mit CSS kann man leider noch nicht addieren. Nur relative oder nur absolute Angaben müssten funktionieren!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city