Border mit 2 divs


  • Snip3r
  • 1382 Aufrufe 9 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Border mit 2 divs

    Hallo,

    ich hab nen Problem mit CSS und zwei divs.

    PHP-Quellcode

    1. <style type="text/css">
    2. #content
    3. {
    4. float: left;
    5. width: 700px;
    6. border-right: 1px solid #333333;
    7. }
    8. #sidebar
    9. {
    10. float: left;
    11. width: 300px;
    12. }
    13. </style>
    14. <div id="content">
    15. INHALT
    16. </div>
    17. <div id="sidebar">
    18. SIDEBAR
    19. </div>
    21. <div style="clear: both;"></div>
    Alles anzeigen


    Mein Problem ist, dass ich nicht genau weiß wie hoch der Content Bereich wird, allerdings kann ich der sidebar auch keinen border-left geben, denn wenn der Content doch höher ist, dann siehts sch** aus.
    Mit einer Tabelle könnte man sowas lösen, allerdings will ich das nicht unbedingt nutzen, es muss doch auch anders gehen?
    Vlt. gibts auch sowas wie eine Mindesthöhe?

    mfg
    snip3r

    PS: sorry für den dämlichen Titel, mir fiel nichts passendes ein

    //EDIT:
    ich hab durch Zufall gerade die CSS Eigenschaft "min-height " gefunden, allerdings steht auf SELFHTML, dass dies erst ab IE 7 funktioniert.... (Sch** IE!)
    Rechteübersicht * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion * Chat * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Snip3r () aus folgendem Grund: Closed

  • Hi, warum machst du es nicht einfach so?

    Quellcode

    1. <style type="text/css">
    2. #content {
    3. width: 700px;
    4. border-left: 1px solid #000;
    5. float:right;
    6. }
    7. #sidebar {
    8. width:1000px;
    9. border: 1px solid #000;
    10. }
    11. </style>
    12. <div id="sidebar">
    13. <div id="content">
    14. INHALT
    15. </div>
    16. SIDEBAR
    17. </div>
    Alles anzeigen


    Wenn es vorkommen kann, dass sidebar größer als content wird, einfach ein Hintergrund (einfacher Punkt) bei sidebar einfügen, der dann immer die Größe von sidebar lang ist.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • dRpSY schrieb:

    und wenn du die höhe einfach generell auf 100% setzt!? müsstest dass dann aber auch für body und uU html tag definieren


    Sieht dann aber shitty aus, wenn Content größer als 100% wird ;)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • man kann das mit min-height und nem entsprechenden hack für browser die das noch nicht unterstützen hinbekommen wenn man halt für diese browser einfach height auf 100% setzt. einfach mal googlen... falls du nichts findest muss ich mal heut abend zuhause an meinem laptop schauen, hab das schonmal für ne seite so gemacht!

  • Hallo,

    danke für eure Antworten.
    An
    nem entsprechenden hack für browser die das noch nicht unterstützen hinbekommen wenn man halt für diese browser einfach height auf 100% setzt.
    hätte ich schon interesse, allerdings hab ich mit google nichts gefunden.
    Könntest du für mich nochmal nachschauen?

    mfg
    snip3r
    Rechteübersicht * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion * Chat * User helfen User
    Patrioten reden nur davon, dass sie für ihr Land sterben, niemals davon, dass sie für ihr Land töten. (Bertrand Russell)

  • Hi,

    falls du noch keine Lösung für dein Problem gefunden hast, mach doch folgendes:
    Verwende statt dem CSS "border" lieber eine Hintergrundgrafik.
    Einfach ein 1px breites und 1px hohes GIF mit der gewünschten Farbe für den Rahmen/der Linie erstellen und einbinden. Ein GIF von der Auflösung ist höhstens 43 Bytes groß. Da ja sicherlich auch noch ein Layout mit Grafiken dazukommt fällt die extra Datei nicht wirklich ins Gewicht.

    Dann brauchst Du nur noch um deinen Inhalt einen weiteren DIV zu legen, der die Grafik als Hintergrund bekommt und diese dann per CSS auf die Position bzw. Breite deines INHALT DIVs platzieren, was in deinem Fall 700px von links ist. Der DIV um deinen INHALT und deiner SIDEBAR wird dann automatisch so groß, wie von beiden benötigt, hat aber egal wie hoch beide sind bis zum maximalen unteren Ende eine Linie, genau da wo Du sie brauchst!
    Da jetzt aber kein Abstand mehr zwischen INHALT und SIDEBAR ist, musst Du nur noch einem von beiden DIVs einen margin-right (INHALT) oder margin-left (SIDEBAR) von 1px (oder auch mehr) verpassen.

    Achja und Du musst nicht unbedingt ein komplettes DIV für den CLEAR nehmen. Ich mach da immer eine Klasse, welche ich auch öfter verwenden kann und füge für den CLEAR nur einen BR mit der Klasse ein, der auch eine font-size von 0 bekommt und somit keinen extra Platz braucht.
    Hatte auch schon Probleme nur mit dem clear: both, von daher definiere ich immer zusätzlich auch noch float: none; um sicher zu gehen ;)

    Hab hier das ganze mal in deinem Code angepasst:

    Quellcode

    1. <style type="text/css">
    2. #border {
    3. background: url(linie.gif) 700px 0px repeat-y;
    4. }
    6. #content {
    7. float: left;
    8. width: 700px;
    9. }
    11. #sidebar {
    12. margin-left: 1px;
    13. float: left;
    14. width: 300px;
    15. }
    17. .clearer {
    18. clear: both;
    19. float: none;
    20. font-size: 0px;
    21. }
    22. </style>
    24. <div id="border">
    25. <div id="content">INHALT</div>
    26. <div id="sidebar">SIDEBAR</div>
    27. <br class="clearer" />
    28. </div>
    Alles anzeigen


    Hoffe das Hilft Dir etwas weiter, wenn überhaupt noch benötigt!?...

    Grüße purePWR ^^

    Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von purePWR ()