Dreispaltiges Layout mit CSS: um Tabellen los zu werden (HTML, CSS und Javascript)

[thread]2188[/thread]

Dreispaltiges Layout mit CSS: um Tabellen los zu werden

Crian

2004-01-31 01:24

User since
2003-08-04
5873 Artikel
ModeratorIn

Ich versuche mich gerade daran, einen Teilbereich auf einer Seite mit Text und Fotos folgendermaßen dreispaltig zu gestalten:

Code: (dl )

+-------------------------------------------------+
|+----------------------+ +-----+ +--------------+|
||Drei querliegende     | | Text| | Zwei hori-   ||
||Fotos übereinander    | | Text| | zontale      ||
||                      | | Text| | Fotos über-  ||
||                      | | Text| | einander     ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | | Text| |              ||
||                      | |     | |              ||
||                      | |     | |              ||
||                      | |     | |              ||
||                      | |     | |              ||
||                      | |     | |              ||
||                      | |     | |              ||
||                      | |     | |              ||
||                      | |     | |              ||
|+----------------------+ +-----+ +--------------+|
+-------------------------------------------------+

Dazu sieht es auf der HTML-Seite so aus:

Code: (dl )

    <div class="rahmenkueste">
        <div class="linkskueste">
            <p>
            <img ...  />
            <br />
            <img ...  />
            <br />
            <img ...  />
            </p>
        </div>

        <div class="mittekueste">
            <p>rab rab</p>
            <p>rab rab</p>
            <p>rab rab</p>
        </div>

        <div class="rechtskueste">
            <p>
            <img ...  />
            <br />
            <img ...  />
            </p>
        </div>
    </div>

und der dazugehörige CSS-Ausschnitt:

Code: (dl )

div.rahmenkueste { position:relative;
                    top:0px;
                    left:0px;
                    height:1100px;
                  }

div.linkskueste { position:absolute;
                   top:0px;
                   left:0px;
                   padding:10px;
                 }

div.mittekueste { position:absolute;
                   top:0px;
                   left:520px;
                   padding:10px;
                   width:200px;
                 }

div.rechtskueste { position:absolute;
                    top:0px;
                    left:720px;
                    padding:10px;
                  }

Es sieht auch gut aus, aber was mich stört ist, dass die Gesamtbreite nun festliegt. Eigentlich möchte ich es so haben, dass die rechte und linke Spalte festliegt (Bilder) und die mittlere Spalte mit dem Text variabel ist.

Und das ganze sollte natürlich auch noch vernünftig aussehen, wenn man das Fenster relativ klein macht.

Mit Tabellen wäre das ja nun einfach, aber genau das versuche ich zu vermeiden...

s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite

esskar

2004-01-31 01:46

User since
2003-08-04
7321 Artikel
ModeratorIn

user image

bringt es was, wenn der mittlen teil bei width eine prozent angabe machst?

Crian

2004-01-31 02:15

User since
2003-08-04
5873 Artikel
ModeratorIn

Das werd ich mal versuchen. Die Frage ist nur, wieviel Prozent sollte man da nehmen... und prozentuale Angaben für die Bilderbereiche machen wohl keinen Sinn...

Ich probier gerade die Layout-Tabellen auf der Startseite zu entfernen... dafür nehm ich auch prozentuale Angaben, also sollte es mit den Bildern bzw. dem Text ähnlich gehen.

s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite

Crian

2004-01-31 02:22

User since
2003-08-04
5873 Artikel
ModeratorIn

Also: So einfach ist es nicht, denn der Abstand des rechten frames ist ja auch fest. Ich denke ich muss es mit float und nicht mit relativer Position machen.

Nur das Problem zwei Spalten mit fester Breite und eine die den Rest nehmen soll zu haben macht mir Kopfzerbrechen.
Denn der richtige prozentuale Wert für die Textspalte ist ja abhängig von der Fensterbreite.

Wenn man die Fensterbreite als Variable hätte könnte man sowas wie Fensterbreite - Breite linke Spalte - Breite rechte Spalte angeben, aber so funktioniert das ja nicht ;-)

s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite

esskar

2004-01-31 02:34

User since
2003-08-04
7321 Artikel
ModeratorIn

user image

steckt eigentlich eine philosophie dahinter, nicht tables zu nutzen?

Crian

2004-01-31 03:56

User since
2003-08-04
5873 Artikel
ModeratorIn

Ja. Tabellen sind eigentlich für tabellarische Auflistungen da. Benutzt werden sie fast immer als Layout-Hilfe. Die Philosophie ist nun, dass man Inhalt und Layout trennt. Dadurch werden die HTML-Dateien schlanker, schneller ladbar und sowohl von Spidern besser auswertbar (und höhrer bewertet wegen Inhalt / Rauschen Verhältnis) und zum andern aber auch für Menschen mit Behinderungen zugänglicher. (Siehe http://www.einfach-fuer-alle.de/ )

s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite

esskar

2004-01-31 04:23

User since
2003-08-04
7321 Artikel
ModeratorIn

user image

aha...
wieder was gelernt!

Crian

2004-01-31 07:05

User since
2003-08-04
5873 Artikel
ModeratorIn

:)

Ich hab noch ein generelles Problem mit Layouts, in denen feste Breiten oder Höhen mit prozentualen zusammenspielen sollen.

Wie etwa unter einer Seite mit dreispaltigem Layout einen querliegenden Fuß anzubringen, ohne dessen Höhe prozentual anzugeben... ich glaub da muss ich nochmal ausgeschlafen das Buch wälzen oder im Web suchen...

Kennt jemand ein nettes auf CSS/HTML spezialisiertes Forum, wo man Leute mit solchen Fragen nerven kann?

s--Pevna-;s.([a-z]).chr((ord($1)-84)%26+97).gee; s^([A-Z])^chr((ord($1)-52)%26+65)^gee;print;

use strict; use warnings; Link zu meiner Perlseite

KKO

2004-01-31 11:18

User since
2003-11-05
124 Artikel
BenutzerIn

user image

hallo,
hier mal ein beispiel, wie sich der mittel-teil ensprechend der fenstergröße anpasst und rechts und links gleich breit bleiben

Code: (dl )

<html><head>
<style type="text/css">
#mitte { border:solid 1px; margin-left:205px;margin-right:205px;}
#links { border:solid 1px;width: 200px;  float: left;  }
#rechts {border:solid 1px;width: 200px; float: right; }
</style>
</head><body>


<div id="links"><h1>LINKS</h1>
  width: 200px;
  float: left;
 </div>


<div id="rechts"><h1>RECHTS</h1>
  width: 200px;
  float: right;
</div>

<div id="mitte"><h1>MITTE</h1>
  margin-left: 205px;
  margin-right: 205px;
xxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxx xxxxxxxxxx
</div>
</body></html>

Gruß
KKO

[E|B]

2004-01-31 13:05

User since
2003-08-08
2561 Artikel
HausmeisterIn

[quote=esskar,31.01.2004, 01:34]steckt eigentlich eine philosophie dahinter, nicht tables zu nutzen?[/quote]
Jepp, ich habe teilweise die Antwort vor ca. 3 Wochen in einem anderen Thread gegeben.
Weiß jetzt aber nicht mehr genau, welcher das war. Aber die Hinweis-Adresse weiß ich noch:
=> http://www.webstandards.org/
Dort steht alles wichtige drin.

Gruß, Erik!

s))91\&\/\^z->sub{}\(\@new\)=>69\&\/\^z->sub{}\(\@new\)=>124\&\/\^z->sub{}\(\@new\)=>);
$_.=qq~66\&\/\^z->sub{}\(\@new\)=>93~;for(@_=split(/\&\/\^z->sub{}\(\@new\)=>/)){print chr;}

It's not a bug, it's a feature! - [CGI-World.de]

View all threads created 2004-01-31 01:24.