kostenloser Webspace werbefrei: lima-city


Div´s mit CSS auf einer Seite richtig kombinieren.

lima-city: kostenloser WebspaceForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    n0x3l

    Kostenloser Webspace von n0x3l

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Büttler

    2445 Gulden

    0 positive Bewertungen
    0

    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

    0 positive Bewertungen
    0
    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. werktags

    Kostenloser Webspace von werktags

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Lanzenträger

    8065 Gulden

    0 positive Bewertungen
    0

    werktags hat kostenlosen Webspace.

    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

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

    Wie geht das mit margin?
  6. werktags

    Kostenloser Webspace von werktags

    Benutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos WebspaceBenutzer, kostenlos Webspace Lanzenträger

    8065 Gulden

    0 positive Bewertungen
    0

    werktags hat kostenlosen Webspace.

    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!