[HTML] Tabelle->Div
- Ersteller theomega
- Erstellt am
theomega
Vice Admiral Special
Hallo Leute,
ich habe schon länger auf meiner Homepage eine Struktur im Einsatz, die wie folgt aussieht:
http://www.dbruhn.de/div/test.html
jetzt würde ich gern den ganzen tabellen mist durch zwei divs ersetzten. Ich hätte dabei gerne zwei divs die per CSS formatiert werden:
Die Frage ist welchen Code ich dann im CSS einsetzten kann. Was ich schon hinbekommen habe, ich es mit vier verschachtelten div's zu lösen, was den Code-Aufwand aber nicht sonderlich verkleinert:
http://www.dbruhn.de/div/test2.html
Dazu hat diese Lösung das Problem, das sie im IE nicht sauber angezeigt wird, der Firefox macht keine mucken.
Wer weiß wie es einfacher und besser geht?
Danke
TO
ich habe schon länger auf meiner Homepage eine Struktur im Einsatz, die wie folgt aussieht:
http://www.dbruhn.de/div/test.html
jetzt würde ich gern den ganzen tabellen mist durch zwei divs ersetzten. Ich hätte dabei gerne zwei divs die per CSS formatiert werden:
Code:
<div class="boxtitel">Titel hier</div>
<div cass="box">Hier der TExt</div>Die Frage ist welchen Code ich dann im CSS einsetzten kann. Was ich schon hinbekommen habe, ich es mit vier verschachtelten div's zu lösen, was den Code-Aufwand aber nicht sonderlich verkleinert:
http://www.dbruhn.de/div/test2.html
Dazu hat diese Lösung das Problem, das sie im IE nicht sauber angezeigt wird, der Firefox macht keine mucken.
Wer weiß wie es einfacher und besser geht?
Danke
TO
Brutus5000
Fleet Captain Special
Das Problem bei Float und beim IE ist, dass die Floats im Schriftelement drinstecken müssen sonst gibts diese hässlichen weißen Balken.
Hier ist eine Lösung:
Die Klassennamen sind übrigens furchtbar unverständlich gewählt
Sie hat aber leider 2 Nachteile:
1. padding-top kann man nicht mehr für die Box-Überschrift benutzen, da sich die Bilder links und rechts mitverschieben würden. Daher hab ich die Überschrift etwas größer gemacht.
2. Da die Bilder transparent sind, musste ich bei den Ecken den Hintergrund mit weißer Farbe überschreiben. Die Farbe ist also ggfs. zu ändern.
mfg Brutus5000
Hier ist eine Lösung:
HTML:
<head>
<style type="text/css">
.boxhead{
background-image: url('http://static.pagenstecher.de/images/top_box_center.gif');
height: 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.belo {
width: 50px;
float: left;
height: 100%;
background: #FFFFFF url('http://static.pagenstecher.de/images/top_box_left.gif') no-repeat;
}
.bero {
width: 50px;
float: right;
height: 100%;
background: #FFFFFF url('http://static.pagenstecher.de/images/top_box_right.gif') no-repeat;
}
.box {
clear:both;
background-color: #EDEFF2;
border-color: #525E6E;
border-width: 1px;
border-style: solid;
padding: 2px;
}
.ru {
background-image: url('http://static.pagenstecher.de/images/bottom_center.gif');
height: 9px;
font-size: 5px; /* kA warum, aber notwendig um die Höhe zu halten */
}
.elu {
width: 40px;
float: left;
height: 100%;
background: #FFFFFF url('http://static.pagenstecher.de/images/bottom_left.gif') no-repeat;
}
.eru {
width: 40px;
float: right;
height: 100%;
background: #FFFFFF url('http://static.pagenstecher.de/images/bottom_right.gif') no-repeat;
}
</style>
</head>
<body>
<div class="boxhead">
<div class="belo"></div>
<div class="bero"></div>
Titel
</div>
<div class="box">
box inhalt hier
</div>
<div class="ru">
<div class="elu"></div>
<div class="eru"></div>
</div>
</body>Die Klassennamen sind übrigens furchtbar unverständlich gewählt
Sie hat aber leider 2 Nachteile:
1. padding-top kann man nicht mehr für die Box-Überschrift benutzen, da sich die Bilder links und rechts mitverschieben würden. Daher hab ich die Überschrift etwas größer gemacht.
2. Da die Bilder transparent sind, musste ich bei den Ecken den Hintergrund mit weißer Farbe überschreiben. Die Farbe ist also ggfs. zu ändern.
mfg Brutus5000
