kostenloser Webspace werbefrei: lima-city


Div´s mit CSS auf einer Seite richtig kombinieren.

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    n0x3l hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. c****s

    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>
  4. 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.
  5. c****s

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

    Wie geht das mit margin?
  6. 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!
  7. 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

Login zum Webhosting ohne Werbung!