nicht angemeldet
CSS Div-Layout
Gunnar Bittersmann
Der MartinHallo,
hoffe mir kann jemand weiter helfen, bin mit meinem Latein so langsam am Ende.
Ich habe meine Layouts immer mit HMTL-Tabellen erstellt. Das dies nicht mehr Zeitgemäß ist, wurde mir bereits
eingehend mitgeteilt. Nun versuche ich verzweifelt ein einfaches Layout mittels CSS zu entwerfen.
Es besteht aus 3 Div-Boxen die jeweils in einer separaten Datei CSS formatiert sind. Davon eines oben für den Banner,
eines links für die Navigation und eines rechts für den Inhalt(Texte). Meine Idee war es, dass sich die
Navigationsbox(links) und die Contentbox(rechts) immer auf gleicher Höhe befinden sollten. Bsp. der
Text der sich in der Contentbox befindet ist sehr lang, somit ist die Contentbox auch sehr hoch. Ich versuche
jetzt schon seid ein paar Stunden das sich die Höhe der Navigationsbox der Höhe der Contentbox angleicht. Ich habe
mehrere Möglichkeiten ausprobiert, zb. die Boxen ineinander verschachtelt, teilweise funktioniert es, allerdings
mit unterschiedlicher Darstellung in verschiedenen Browsern. Ich hab mich auch schon so zu sagen zu tote gegooglet,
zwar interessante Beispiele gefunden aber keines welches ich für meine Problemstellung anwenden könnte. Somit hoffe
ich das mir jemand quasi über die Schulter schauen könnte und mir mitteilen könnte was ich falsch bzw. was ich nicht
beachtet habe. Danke schon mal im Voraus!
hier mein bisheriger Quellcode, reduziert auf das Wesentliche:
<!-- index.htm -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="de" xml:lang="de">
<head>
<title>CSS-Layout</title>
<link rel="STYLESHEET" type="text/css" href="styles.css" />
</head>
<body>
<div class="center">
<div class="header">Banner</div>
<div class="nav">button_1<br />button_2<br />button_3<br />usw.</div>
<div class="content">ganz viel Text</div>
</div>
</body>
</html>
/* styles.css */
.center {
width:900px;
margin:0px auto;
text-align:center;
margin-top:0px;
}
.header {
margin-top:0px;
width:900px;
height:100px;
background-color:#c3c3c3;
}
.nav {
float:left;
width:140px;
padding:5px;
border:1px solid blue;
background-color:#E87848
}
.content {
float:right;
width:730px;
padding:5px;
border:1px solid yellow;
text-align:left;
}
ansonsten würde ich mich auch über Links freuen,
zB. sowas wie "so wird ein CSS-Layout ohne Tabellen korrekt/Zeitgemäß/Professionel erstellt",
wenn möglich auf Deutsch :)
LG und Danke Helmut
-
Hello out there!
.center {
width:900px;Aua. Wenn mein Viewport nun gar nicht so breit ist? Ich scrolle höcht ungern horizontal.
ansonsten würde ich mich auch über Links freuen,
zB. sowas wie "so wird ein CSS-Layout ohne Tabellen korrekt/Zeitgemäß/Professionel erstellt",
wenn möglich auf Deutsch :)Natürlich auf Deutsch. Die beste Anleitung ist auf Deutsch: SELFHTML!
Du kennst das schon?Mehrspaltige CSS-basierte Layouts
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo Gunnar.
Auch sehr informativ (insbesondere, warum ein per CSS nachgebautes Tabellenlayout nicht wirklich sinnvoll ist): SELFHTML Aktuell Weblog - Grundlagen für Spaltenlayout mit CSS.
Einen schönen Donnerstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/
-
-
Hallo Helmut,
wieso brichst du eigentlich jede Zeile deines Beitrags irgendwo auf halber Strecke um? Sei doch bitte so gut und überlasse den Zeilenumbruch dem Browser, der kann das nämlich recht gut.
So long,
Martin--
In Ägypten haben früher 150000 Leute 35 Jahre lang an einer Pyramide gearbeitet. Aber bei uns arbeiten doppelt so viele Leute doppelt so lange allein an der Baugenehmigung.
(Dieter Nuhr, deutscher Kabarettist)