21.02.2006, 14:26
|
|||
|
|||
3 Spalten immer gleich hoch. Wie mach ich das?
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;
}
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> 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... 
|
| Sponsored Links |
|
21.02.2006, 14:29
|
|||
|
|||
|
such mal nach "faux columns", steht auch im XHTMLwiki (oben) unter den FAQs.
|
| Sponsored Links |
|
21.02.2006, 14: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.
|
|
21.02.2006, 15:03
|
||||
|
||||
|
Da fehlt bei den ganzen floats eine Kleinigkeit ... clear
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
21.02.2006, 15:32
|
|||
|
|||
|
Zitat:
Aber eben diese Hintergrund-Ebene wächst nicht mit.
|
|
21.02.2006, 15:36
|
|||
|
|||
|
Zitat:
 Ich habs gleich in der Ebene (CSS) definiert, das wäre doch korrekt, oder?
|
|
21.02.2006, 15: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.
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Layout: 2 Spalten gleich langer Höhe | Boof | CSS | 1 | 05.03.2010 10:50 |
| Drei spaltige webseite: Spalten mit opacity highlighten. | sepp88 | Javascript & Ajax | 2 | 16.11.2009 14:10 |
| Problem beim ein/ausblenden von Spalten in Tabellen via CSS und JavaScript | chrisol_76 | CSS | 2 | 21.07.2008 17:37 |
| 3 dynam. Spalten mit Inhaltsüberlauf | spacegaier | CSS | 6 | 12.10.2007 00:24 |
| Tooltip für Spalten ? | SolCom | (X)HTML | 0 | 21.11.2005 15:26 |
Linear-Darstellung
