XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   3 Spalten immer gleich hoch. Wie mach ich das? (http://xhtmlforum.de/showthread.php?t=38848)

Fanello 21.02.2006 15:26

3 Spalten immer gleich hoch. Wie mach ich das?
 
Liste der Anhänge anzeigen (Anzahl: 2)
Liebe CSS-Gemeinde.

Ich bin an einer grösseren CSS-Knacknuss.. bin eigentlich schon sehr weit aber ein wichtiges Detail fehlt noch.

Teilauszug aus dem CSS:

Code:

#inhalt_kopf_3sp {
        width: 833px;
        height: 8px;
        top: 10px;
        margin-left: 10px;
        margin-top: 34px;
        background-image: url(../graph/hg/hg_inhalt_kopf_3sp.gif);
        background-repeat: no-repeat;
}

#inhalt_hg_3sp {
        width: 833px;
        margin-left: 10px;
        background-image: url(../graph/hg/hg_inhalt_3sp.gif);
}

#inhalt_fuss_3sp {
        width: 833px;
        height: 10px;
        margin-left: 10px;
        margin-bottom: 34px;
        background-image: url(../graph/hg/hg_inhalt_fuss_3sp.gif);
        background-repeat: no-repeat;
}

#spalte_1 {
        float: left;
        margin-left: 5px;
        width: 260px;
        background-color: Aqua;
}

#spalte_2 {
        float: left;
        margin-left: 21px;
        width: 260px;
        background-color: Aqua;
}

#spalte_3 {
        float: left;
        margin-left: 21px;
        width: 260px;
        background-color: Aqua;
}

Teilauszug aus dem HTML-Code:

Code:

<div id="inhalt_grund">

        <div id="inhalt_kopf_3sp"></div>
        <div id="inhalt_hg_3sp">
                <div id="spalte_1">
                                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf

                </div>
                <div id="spalte_2">
                                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
               
                </div>
                <div id="spalte_3">
                                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
                fasdfasdf as df asdf asdf asdf asdf  asdf asdfa sdf
               
                </div>
        </div>
        <div id="inhalt_fuss_3sp"></div>

</div>

Wie es im Moment aussieht seht ihr im Attachment css-bild.jpg.
Es hat 3 Spalten, und diese 3 Spalten müssen immer gleich hoch sein. Also wenn in der ersten Spalte 5 Zeilen und in den anderen beiden Spalten nur 2 Zeilen stehen, dann müssen alle so hoch sein wie die erste Spalte.
Im Moment liegen die 3 Spalten schöne nebeneinander, allerdings wird die Ebene (inhalt_hg_3sp) die diese 3 Spalten umschliesst nicht angepasst bzw. höher gemacht.

Aussehen müsste es wie im Bild css-bild2.jpg.

Vielen Dank für eure Tipps.

PS: das hässliche blau habe ich nur gemacht, damit man die Ebene besser sieht... ;)

mazzo 21.02.2006 15:29

such mal nach "faux columns", steht auch im XHTMLwiki (oben) unter den FAQs.

Fanello 21.02.2006 15:50

ich arbeite eigentlich schon mit dieser "Kacheln"-Lösung.. aber für mein Beispiel brauchts glaub noch was zusätzliches....

mazzo 21.02.2006 15:55

sofern die Boxen fixe Breiten haben hast Du per Kachelung schonmal den linken und rechten Rand immer passend. Eine Grafik, die etwa so aussieht
(#=rahmen, -=Farbe der Box, +=Farbe des Hintergrundes):

#--------#++#--------#++#--------#

Oben und unten braucht es dann ein Extra-Element mit einem Hintergrund für den Abschluss der Bögen.

Boris 21.02.2006 16:03

Da fehlt bei den ganzen floats eine Kleinigkeit ... clear ;)

Fanello 21.02.2006 16:32

Zitat:

Zitat von mazzo
sofern die Boxen fixe Breiten haben hast Du per Kachelung schonmal den linken und rechten Rand immer passend. Eine Grafik, die etwa so aussieht
(#=rahmen, -=Farbe der Box, +=Farbe des Hintergrundes):

#--------#++#--------#++#--------#

Oben und unten braucht es dann ein Extra-Element mit einem Hintergrund für den Abschluss der Bögen.

genau das mache ich schon.. nur hab ich das Problem, dass die Spalten-Ebenen in der der Text steht, in die Ebene plaziert wird in der der Hintergrund gemacht wird.
Aber eben diese Hintergrund-Ebene wächst nicht mit.

Fanello 21.02.2006 16:36

Zitat:

Zitat von Boris
Da fehlt bei den ganzen floats eine Kleinigkeit ... clear ;)

ich hab jetzt das clear in allen möglichen Varianten versucht.. ohne positives Resultat... :( Ich habs gleich in der Ebene (CSS) definiert, das wäre doch korrekt, oder?

mazzo 21.02.2006 16:39

sicher nicht in allen Varianten sonst wäre dieser Thread nicht da ;)

Du musst, wenn Du "clearfix" benutzt (siehe meine Sig), dem Element diesen CSS-Code zuweisen, welches floatierte Elemente beinhaltet. Dabei auch den Starhack für den IE nicht vergessen. Steht alles in Ulles Codebeispiel unter dem Link in der Signatur.


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:14 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023