Thread Dreispaltiges Layout mit CSS: um Tabellen los zu werden (51 answers)
Opened by Crian at 2004-01-31 01:24

Crian
 2004-01-31 22:45
#25565 #25565
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Ok, nun wirds komplizierter...

folgendes Layout will ich erreichen:

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
27
28
29
30
+-----------------------------------------------------------+
|+---------------------------------------------------------+|
|| Kopfteil mit Links etc.                                 ||
|| #mainkopf                                               ||
|+---------------------------------------------------------+|
|+---------------------------------------------------------+|
|| #mainmitte                                              ||
||+--------++------------------------------------++-------+||
||| Links  || Mitte                              ||Rechts |||
||| 20%    || 50%                                ||30%    |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
||| #hauptl|| #hauptm                            ||#hauptr|||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
|||        ||                                    ||       |||
||+--------++------------------------------------++-------+||
|+---------------------------------------------------------+|
|+---------------------------------------------------------+|
|| Fussteil mit Links etc.                                 ||
|| #mainfuss                                               ||
|+---------------------------------------------------------+|
+-----------------------------------------------------------+


Im Moment sehen meine Dateien so aus, hab aber schon alles mögliche probiert:

CSS:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/******************************************************************************
* Hauptseitenaufteilung in Oben, Unten und Mitte                              *
******************************************************************************/
#mainkopf {
    border:1px solid red;
    height:13em;
    float:top;
    }
#mainmitte {
    border:1px solid green;
    /*margin-top:13em;*/
    /*margin-botton:6em;*/
    /*float:top;*/
    }
#mainfuss {
    border:1px solid blue;
    height:6em;
    float:bottom;
    }

/******************************************************************************
* Tabellenersetzendes CSS:                                                    *
******************************************************************************/
html, body { height:100%;
           }
#hauptl {
    float:left;
    margin:0;
    padding:0;
    border:0;
    height:100%;
    width:20%;
    }
#hauptm {
    float:left;
    margin:0;
    padding:0 2%;
    border:0;
    height:100%;
    width:50%; /* Box Model Hack */
    voice-family:"\"}\"";
    voice-family:inherit;
    width:46%;
    }
html>body #hauptm {
    width:46%; /* Box Model Hack */
    }
#hauptr {
    float:right;
    margin:0;
    padding:0;
    border:0;
    height:100%;
    width:30%;
    }


HTML:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<body>
    <div id="mainkopf">
        <p id="top"><a name="top"></a>D&uuml;hl Homepage</p>

        <div class="center">
        <strong>E-Mail:</strong>
        <a href="mailto:webmaster@duehl.de">webmaster@duehl.de</a>
        </div>
    </div>

    <div id="mainmitte">
        <div id="hauptl">
            <h2>Seiten von D&uuml;hls:</h2>
            <!--
            <a href="benjamin/index.html"> Benjamin D&uuml;hl</a>,  Hamburg  <br />
            -->
            <a href="christian/index.html">Christian D&uuml;hl</a>, Bielefeld<br />
            <a href="edith/index.html">    Edith D&uuml;hl</a>,     Hamburg  <br />
            <!--
            <a href="gerd/index.html">     Gerd D&uuml;hl</a>,      Hamburg  <br />
            -->

            <br />

            <h2>Allgemeines:</h2>
            <a href="ahnen.html">Ahnenforschung</a> <br />
            <a href="impressum.html">Impressum</a> <br />
            <a href="sitemap.html">Sitemap</a> <br />
            <a href="http://www.duehl.de/cgi-bin/guestbook.php.cgi">G&auml;stebuch</a> <br />
            <a href="gaestebuch_alt.html">Altes G&auml;stebuch</a> <br />
            <a href="historie.html">Historie</a> <br />


            <br />
            <br />

            <a href="mailto:webmaster@duehl.de" class="mailsymbol">@</a>
        </div>

        <div id="hauptm">
            <h1>Sinn dieser Seite:</h1>

            <p>Diese Seite soll allen D&uuml;hls, die Interesse daran
            haben, die M&ouml;glichkeit bieten, einen Link zu ihrer
            Homepage anzubieten.
            Dazu reicht es, mir eine eMail zu schicken (an
            <a href="mailto:webmaster@duehl.de">webmaster@duehl.de</a>).
            </p>

            <p>Ich behalte mir vor, Links auf Seiten mit mir nicht
            genehmen Inhalten nicht zu setzen, in diesem Fall werde ich
            dies allerdings in einer Mail begr&uuml;nden.</p>

            <p>Gleichzeitig m&ouml;chte ich damit ein wenig die Verbreitung
            dieses seltenen Namens erforschen
            <img class="bildimtext" src="lay_back/buttons/smile.gif"
            alt=":-)" title=":-)" />
            und hoffe, dass diese Seite vielleicht auch die Kontakte
            der D&uuml;hls untereinander verbessert oder neue Kontakte
            f&ouml;rdert.</p>

            <h1>History/News:</h1>
            <ul>
                <li>
                    29.01.2004 - Neuer Anlauf des G&auml;stebuchs mit
                    Stratos "CGI 2004".
                    Aufbereitung des alten G&auml;stebuchs als statische
                    Seite, CSS-Umstellungen und andere kleine
                    &Auml;nderungen.
                </li>
                <li>
                    28.01.2004 - Kleine &Auml;nderungen am CSS von Ediths
                    Seite.
                </li>
                <li>
                    27.01.2004 - Kleine &Auml;nderungen.
                </li>
                <li>
                    25.01.2004 - Ein paar Links zu Kinos auf der
                    <a href="christian/bielefeld.html">Bielefeld-Seite</a>
                    hinzugef&uuml;gt.
                </li>
                <li>
                    23.01.2004 - &Auml;nderungen an der
                    <a href="christian/bielefeld.html">Bielefeld-Seite</a>,
                    &Auml;nderungen an der
                    <a href="christian/schottland/sc.html">Schottlandseite</a>
                    (inkl. CSS) und
                    zwei neue Links zur
                    <a href="christian/perl/">Perlseite</a>
                    hinzugef&uuml;gt.
                </li>
                <li>
                    20.01.2004 - Erweiterung der
                    <a href="christian/bielefeld.html">Bielefeld-Seite</a>.
                </li>
                <li>
                    19.01.2004 - &Uuml;berarbeitung der fotohaltigen
                    <a href="christian/schottland/sc.html">Schottlandseite</a>,
                    neue <a href="christian/foto.html">Fotoseite</a>.
                </li>
                <li>
                    16.01.2004 - Kleinere Verbesserungen an der
                    <a href="christian/perl/">Perlseite</a>.
                </li>
                <li>
                    15.01.2004 - Kleinere Verbesserungen an der
                    <a href="christian/perl/">Perlseite</a>.
                </li>
                <li>
                    14.01.2004 - Fortsetzung der Validierung und andere
                    kleinere Verbesserungen :)
                </li>
                <li>
                    12.01.2004 - Fortsetzung der Validierung und andere
                    kleinere Verbesserungen.
                </li>
                <li>
                    11.01.2004 - Validierung wird fortgesetzt, alle ab jetzt
                    geänderten Seiten werden nach Möglichkeit auf den
                    XHTML 1.0 strikt Standard umgestellt.
                </li>
                <li>
                    08.01.2004 - Leere Seiten von Gerd und Benjamin nach
                    Absprache vorerst entfernt.
                    Ein neues Gedicht auf Ediths Seite eingesetzt.
                </li>
                <li>
                    07.01.2004 - Weitere Arbeiten an den
                    Cascading Style Sheets (CSS).
                    Die Seiten werden nach und nach mit dem
                    <a href="http://validator.w3.org/">W3C-HTML-Validator</a>
                    und die CSS-Syntax mit dem
                    <a href="http://jigsaw.w3.org/css-validator/">W3C-CSS-Validator</a>
                    &uuml;berpr&uuml;ft.
                    Nach M&ouml;glichkeit wird dabei der HTML 4.01 strict
                    Standard verwendet.
                    Die Seiten, die ich schon dahingehend angepasst habe,
                    schm&uuml;cken sich mit den entsprechenden Bildchen
                    (siehe Seitenende).
                </li>
                <li>
                    04.01.2004 - Umstellung des Homepagelayouts auf
                    Cascading Style Sheets (CSS).
                    Außerdem wurde darauf geachtet, den HTML-Code der
                    Seiten m&ouml;glichst w3c-konform zu halten.
                    Dar&uuml;ber hinaus auch weitere kleine Verbesserungen
                    an der <a href="christian/perl/">Perlseite</a>.
                </li>
            </ul>
            <p><a href="historie.html">Zu &auml;lteren News</a></p>
        </div>

        <div id="hauptr">
            <h2>Verteilung der gelinkten D&uuml;hlseiten:
                <map name="Landkarte" id="Landkarte">
                <area shape="circle" coords="109,72,4" href="edith/index.html"     alt="Edith"     title="" />
                <area shape="circle" coords="72,128,4" href="christian/index.html" alt="Christian" title="" />
                </map>
            </h2>
            <br />
            <br />
            <div class="center">
            <img src="lay_back/bilder/dkarte.gif"
                alt="Deutschlandkarte mit den Orten der verlinkten Dühls"
                width="250" height="336"
                usemap="#Landkarte" />
            </div>
            <p>Bisher sind au&szlig;er mir nur die Hamburger Dühls erfasst,
            deshalb zieren erst zwei rote Punkte die obige Karte.</p>
        </div>
    </div>

    <div id="mainfuss">
        <hr />

        <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
                <td align="left">
                </td>
                <td align="center">
                    <a href="impressum.html">Impressum</a>
                </td>
                <td align="right">
                    <table>
                        <tr><td>
                        <span class="fuss">TOP</span>
                        </td><td>
                        <a href="#top">
                        <img src="lay_back/buttons/home.gif"
                            alt="Zum Seitenanfang" /></a>
                        </td></tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td align="left">
                    <table>
                        <tr><td>
                        <a href="/">
                        <img src="lay_back/buttons/left.gif"
                            alt="zur Startseite des Servers" /></a>
                        </td><td>
                        <span class="fuss">zur Startseite des Servers</span>
                        </td></tr>
                    </table>
                </td>
                <td align="center">
                    <a href="http://jigsaw.w3.org/css-validator"><img
                        src="http://jigsaw.w3.org/css-validator/images/vcss.gif"
                        alt="Valid CSS!" height="31" width="88" /></a>
                    <a href="http://validator.w3.org/check/referer"><img
                        src="http://www.w3.org/Icons/valid-xhtml10"
                        alt="Valid XHTML 1.0!" height="31" width="88" /></a>
                </td>
                <td align="right">zuletzt ge&auml;ndert:
                    <span class="datum">
                    <script type="text/javascript">
                        <!--
                            var date=new Date(document.lastModified);
                            var yy=date.getFullYear();
                            var mm=date.getMonth() + 1;
                            var dd=date.getDate();
                            if(dd<10)dd="0"+dd;
                            if(mm<10)mm="0"+mm;
                            document.write(dd+"."+mm+"."+yy);
                        // -->
                    </script>
                    </span>
                </td>
            </tr>
        </table>
    </div>
</body>


Die drei Spalten alleine funktionieren gut, aber ich bekomme sie nicht vernünftig in den Mittelteil eingebaut. Dabei dachte ich ich könnte per Analogieschluß zu obiger Lösung zum Erfolg kommen, da ja die Höhen von Kopf und Fuß wieder fest und die Höhe des Mittelteils fließend ist, wie in der Seitenaufteilung weiter oben.

Ich hab auch schon mit den Reihenfolgen der Teile herumgespielt, leider kam nie das raus was ich wollte.

Ich glaube mir fehlt hier irgendwie noch das tiefere Verständnis bzw. das richtige Gefühl für das, was ich tue ^^


Wie man vielleicht sieht, ist das der Versuch, meine Hauptseite Tabellenfrei zu bekommen (ok im Fuß ist noch eine Tabelle, um die kümmere ich mich nach diesem Problem...).
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

View full thread Dreispaltiges Layout mit CSS: um Tabellen los zu werden