• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

3-Spaltiges Layout oder Wo sind die Grenzen von XHTML/CSS?

A

Audi

New member
Hallo,
habe ein riesen CSS-Problem, welches ich nicht gelöst bekomme! Vielleicht ist es für Euch auch interessant, also bitte nicht an der Länge meine Beschreibung verzweifeln- es geht mir um u.a. die grundsätlziche Frage, ob ich alles, was ich mit Tabellendesign auch mit tabellenlosem XHTML/CSS darstellen kann?

Ich möchte ein 3-spaltiges Design entwickeln welches folgende Anforderungen erfüllt:

ein erstes div (wrapper, ca. 700px breit) welches alle weiteren divs umschliesst und das ganz mittig darstellt (soweit kein Problem)

ein Header-div (z.B. Höhe 80px) in dem sich irgendein Headerinhalt befindet (auch kein Problem)

in dem wrapper-div befinden sich zudem 3 nebeneinenderliegende Spalten (über divs realisiert, unterhalb des header-divs ). Jede Spalte hat eine eigene Farbe! (kann ggf. gerne über Hintergrundbild in Wrapper realisiert werden).


Variante 1: die Spalten werden so dargestellt (zumindest soll es so aussehen, kann also geschummetl sein), dass sie bis zum Ende der Seite (Ende des Browserfensters) laufen.
Wichtig: was in diesem Falle nicht geht, ist ein Hintergrundbild für den Bodybereich, welches mittig platziert wird! Bitte also so nicht einbinden. Das aussehen der 3-spaltigkeit bis zum Seitenende müsste schon irgendwie durch das wrapper-div oder die darin enthaltenen divs realisiert werden!

Variante 2:
die 3 Spalten müssen nicht zwingend bis zum Ende der Seite (Browserfenster) laufen, sollen aber immer alle auf einer Höhe miteinander abschliessen und zwar egal (und das ist hier mein wesentliches Probelm!!), in welcher der 3 Spalten sich der längste Inhalt befindet!

Das ganze sollte ohne Javascript o.ä. laufen, also rein über XHTML/CSS.

Zusatzanforderung, die aber auch weggelassen werden könnte: (am Ende der ganzen Geschichte sollte noch ein Footer auftauchen).

Ist das möglich?!?

Tausend Dank für Eure Hilfe und Kommentare
Audi
 
Nur mal so eine Frage, aber warum müssen die drei Spalten alle die selbe Länge haben? Was hat das für einen Grund?
 
wenn die drei Spalten unterschiedliche hintergrund farben haben macht das durchaus sinn. Ich hatte mal ein ähnliches Problem, allerdings nur mit 2 Spalten. muss mal gucken wie ich das gelöst habe
 
Das Problem ist und bleibt der farbige Hintergrund der Spalten. Wie gesagt CSS denkt nicht in Spalten, dazu brauchst du eine Tabelle..
 
Habe mal etwas rumgebastelt und muss sagen,
es war doch sehr trickey...

http://dkmd.de/tests/3div.html

Das Hintergrundbild sollte natürlich exakter gearbeitet sein,
aber dazu hatte ich jetzt auch keinen Bock mehr.

http://www.validome.org/lang/ge/get/http://dkmd.de/tests/3div.html
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
  <title>Dokumenttitel</title>
  <style type="text/css">
/*<![CDATA[*/
html, body, div, span, p, h1, h2, h3, ul, li, a, acronym, cite, table, td, th, form, label, input, img {
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:18px;
  color:#2c2c2c;
  margin:0px;
  padding:0px;
  border:0px;
}
body {
  text-align:center;
}
#wrapper {
  text-align:left;
  margin:0px auto;
  width:700px;
  border:1px solid #ccc;
  background:url(bg.jpg) repeat-y;
}
#header {
  width:100%;
  height:80px;
  border-bottom:1px solid #ccc;
  background:#fff;
}
#left {
  width:233px;
  float:left;
}
#center {
  width:234px;
  float:left;
}
#right {
  width:233px;  
  float:left;
}
#footer {
  width:100%;
  height:40px;
  border-top:1px solid #ccc;
  background:#fff;
}
/*]]>*/
</style>
  </head>
  <body>
<div id="wrapper">
<div id="header">header</div>

<div id="left">ich<br />bin<br />blindtext</div>
<div id="center">ich<br />bin<br />auch<br />blindtext</div>
<div id="right">ich<br />bin<br />auch<br />blindtext<br />und<br />was<br />für<br />einer<br />ich<br />bin<br />auch<br />blindtext<br />und<br />was<br />für<br />einer</div>

<br style="clear:both;" />
<div id="footer">footer</div>
</div>
</body>
</html>
 
Und wie man schön an dem Beispiel sieht, es ist eine Tabelle. Warum mit CSS rummurksen wenn man doch eine Tabelle will?

Aber so hast du ein statisches Layout, dass sich nicht mehr besonders gut anpassen läßt.
Diese dreispaltigen Layouts stammen meiner Meinung aus internet prähistorischen Zeiten und sollten langsam abgeschafft werden. Wer sowas benutzt zeigt lediglich das sein Wissenstand nicht aktuell ist.
 
Da hast Du recht...
Der Code sieht jetzt zwar ziemlich simpel aus,
aber es gab doch ein, zwei Umstände,
die erstmal gelöst werden mussten.
 
Hallo Leute,

erstmal tausend Dank für Eure Beiträge!
Und Dir, dkdenz vorm allem vielen Dank!
Genau das ist es! Hätte nicht gedacht, dass es so mit den ganzen floats "nebeneinander" einfach möglich ist!

Dann bin ich jetzt auch wieder 100% überzeugt von XHTML/CSS!!

Interessant wäre vielleicht noch eine Variante, bei der der Hintergrund ( in diesem Fall woh auch ein Bild) immer genau bis zum Ende des Browserfensters geht (ohne, dass Scrollbalken entstehen!).

Wobei das Bild im Wrapper-div liegen müsste!

Vielen Dank noch einmal für Eure Mühe!

Audi
 
Nach wie vor, du willst ein Tabellenlayout und solltest eine Tabelle benutzen weil die Anforderungen die du stellst nicht mehr viel mit einem HTML/CSS Layout zu tun haben.

Die Stärke von HTML/CSS liegt darin, dass du auf einer undefinierten Fläche ein skalierbares Layout entwerfen kannst. Du möchtest auf einer definierten Fläche (aber mit einer unbekannten Größe) ein starres Layout (700px Breit) haben, damit wirfst du alle Vorteile die HTML hat über Bord.

Das was du jetzt willst wird nicht mehr 100% funktionieren, du kannst zwar den footer unten plazieren:
HTML: 
<!DOCTYPE html
    PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <head>
<meta name="content-type" content="text/html; charset=iso-8859-1">
  <title>Dokumenttitel</title>
  <style type="text/css">
html, body{  height:100%;}

body{
  font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:18px;
  color:#2c2c2c;
  margin:0px;
  padding:0px;
  border:0px;
}
#wrapper {
  margin:0px auto;
  width:700px;
  border:1px solid #ccc;
  background:url(bg.jpg) repeat-y;
  height:100%;
}
#header {
  width:100%;
  height:80px;
  border-bottom:1px solid #ccc;
  background:#fff;
  text-align:center;
}
#left {
  width:233px;
  float:left;
}
#center {
margin: 0 234px 0 234px;
}
#right {
  width:220px;
  float:right;
}
#footer {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:40px;
  border-top:1px solid #ccc;
  text-align:center;
}
</style>
  </head>
  <body>
<div id="wrapper">
<div id="header">header</div>
<div id="left">ich<br>bin<br>blindtext</div>
<div id="right">ich<br>bin<br>auch<br>blindtext<br>und<br>was<br>für<br>einer<br>ich<br>bin<br>auch<br>blindtext<br>und<br>was<br>für<br>einer</div>
<div id="center">
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext
ich<br>bin<br>auch<br>blindtext

</div>
<div id="footer">footer</div>
</div>
</body>
</html>

Das wird aber in die Hose gehen, sobald der Inhalt größer als Fenster ist.
 
Audi schrieb:
Hallo Leute,
erstmal tausend Dank für Eure Beiträge!
Und Dir, dkdenz vorm allem vielen Dank!
Genau das ist es! Hätte nicht gedacht, dass es so mit den ganzen floats "nebeneinander" einfach möglich ist!
Zum Vergrößern anklicken....

Gern geschehen...hat Spass gemacht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben