Schrift
Wiki:Tipp zum Debugging: use Data::Dumper; local $Data::Dumper::Useqq = 1; print Dumper \@var;
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2188[/thread]

Dreispaltiges Layout mit CSS: um Tabellen los zu werden



<< |< 1 2 3 4 ... 6 >| >> 52 Einträge, 6 Seiten
Crian
 2004-01-31 01:24
#25548 #25548
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Ich versuche mich gerade daran, einen Teilbereich auf einer Seite mit Text und Fotos folgendermaßen dreispaltig zu gestalten:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
+-------------------------------------------------+
|+----------------------+ +-----+ +--------------+|
||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 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <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 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
#25549 #25549
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
#25550 #25550
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
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
#25551 #25551
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
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
#25552 #25552
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
#25553 #25553
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
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
#25554 #25554
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
aha...
wieder was gelernt!
Crian
 2004-01-31 07:05
#25555 #25555
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
:)

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
#25556 #25556
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 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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
#25557 #25557
User since
2003-08-08
2561 Artikel
HausmeisterIn
[Homepage] [default_avatar]
[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]
<< |< 1 2 3 4 ... 6 >| >> 52 Einträge, 6 Seiten



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