CSS-Problem: Unterschiedliche Spaltenhöhen

Computer: Software & Programmierung HTML & CSS
1

Hallo.

Ich habe ein kleines Problem. Ich habe ein Layout mit drei Spalten, die jeweils eine unterschiedliche Hintergrundfarbe haben. Leider gehen die Spalten nur so tief wie der Inhalt, d.h. es schließen nicht alle unten ab. Bisher habe ich in der Literatur nur 2 Lösungen gefunden, die mir beide nicht gefallen:

  • Mit Javascript die höchste Spalte ermitteln und die kleineren auf den Wert anheben.

  • Feste Höhen vergeben

Das muss doch besser gehen?

Hier der Link zum Problem:
http://www.leopoldnet.de/test/www.htm

Schöne Grüße

Leo

2

geh mal auf die seite www w3 org, oder zu video2brain, z.zt. in der professional internet für mai, ist ne menge drin , was css betrifft, aber am besten arbeitest du mit golive o.ä. das lässt sich super in css arbeiten.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

3

Hallo.

Auch Hallo!

Ist es vielleich so etwas, was Dir vorschwebt?

Ein Muster für Wer-weiss-was
body {
background-color: #006600;
}

.arbeit {
width: 660px;
height: 400px;
margin: 0 auto 0 auto;
align: center;
}

.kopf, .fuss {
width: 100%;
height: 10%;
background-color: #66FF00;
text-align: center;
}

.navi {
width: 33.3%;
height: 80%;
margin: 0;
padding: 0;
background-color: #CC0000;
color: #FFF;
float: left;
}

.inhalt {
width: 33.3%;
height: 80%;
margin: 0;
padding: 0;
background-color: #FFFF66;
color: #000;
float: left;
}

.info {
width: 33.3%;
height: 80%;
margin: 0;
padding: 0;
background-color: #009900;
color: #FFF;
float: left;
}

Ein Muster für www

bla

bla
bla
bla
bla
bla
bla
bla
bla

bla

bla

Das Ende naht…

Wenn Du die Breite oder die Höhe der Klasse „arbeit“ änderst, ändern sich die darin liegenden Bereiche automatisch mit.

Schöne Grüße

Ebenso, Volkmar

4

Hallo und Danke für die Antwort.

Leider ist es nicht ganz die Lösung, da die Höhen wieder festgelegt werden, d.h. der Fußbereich beginnt nicht sofort nach der höchsten Spalte. Auch bin ich auf die div-Container angewiesen.

Schöne Grüße

Leo

5

Ja, das ist einfach eine Eigenart an der sich momentan nichts ändern lässt. DIVs dehnen sich vertikal immer nur so weit aus wie nötig, es sei denn, Du hast eine feste Höhe angegeben. Sorry.

Allerdings kann man Spalten quasi vortäuschen. Dan Cederholm (Buchautor) hat folgende Technik beschrieben:

http://alistapart.byteshift.de/fauxcolumns/

Eine im Grunde einfache Methode, auf die man aber erst mal kommen muss.

Gruß Marcus :smile:

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

6

Moin.

Das sieht sehr interessant aus; das probiere ich mal aus.

Schöne Grüße und Danke

Leo

7

Gib mal Laut ob’s geklappt hat.

Gruß Marcus

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

8

Hallo Leo,

wäre für Dich die Verwendung eine Tabelle in Ordung?

LOOK @ THIS:
Ein Muster für Wer-weiss-was
body {
background-color: #006600;
}

/* Definitionen zum Arbeitsbereich */
.arbeit {
width: 660px;
margin: 0 auto 0 auto;
vertical-align: top;
border-collapse: collapse;
border-width: 0;
}

/* Definitionen zur Kopf- und Fusszeile */
/* Gemeinsames */
.kopf, .fuss {
background-color: #66FF00;
vertical-align: top;
text-align: center;
}

/* spezielles Kopf */
.kopf {
height: 50px;
}

/* spezielles Fuss */
.fuss {
height: 25px;
}

/* Definitionen zur Nutzbereich */
/* Gemeinsames */
.navi, .inhalt, .info {
margin: 0;
padding: 0;
vertical-align: top;
}

/* spezielles Navigation */
.navi {
width: 20%;
background-color: #CC0000;
color: #FFF;
}

/* spezielles Inhaltsbereich */
.inhalt {
background-color: #FFFF66;
color: #000;
}

/* spezielles Infobereich */
.info {
background-color: #009900;
color: #FFF;
}

Ein Muster für www

bla

bla
bla
bla
bla
bla
bla
bla
bla

bla

bla

Das Ende naht…

Gruß
Volkmar

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

9

Moin Volkmar,

nein, Tabellen für das Layout benutze ich seit ca. 2 Jahren nicht mehr. Aber zugegeben: Mit Tabellen wäre es schnell gelöst.

Danke für Deine Antwort.

Schöne Grüße

Leo