Div´s mit CSS auf einer Seite richtig kombinieren.
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute angaben
bild
code
element
gleichen abstand
http
markup
mitte
packen
platz
plazieren
problem
rechts rest
regel
relative angabe
rest
restlichen platz
tun
url
versucht drei
-
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
-
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>
-
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.
-
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