Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2188[/thread]

Dreispaltiges Layout mit CSS: um Tabellen los zu werden (Seite 2)



<< |< 1 2 3 4 5 6 >| >> 52 Einträge, 6 Seiten
Crian
 2004-01-31 17:02
#25558 #25558
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
[quote=KKO,31.01.2004, 10:18]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>
[/quote]
Danke, das werd ich gleich mal probieren...

Jetzt wo ich die Lösung sehe frage ich mich, wieso ich darauf nicht gekommen bin :D :blush:
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 18:00
#25559 #25559
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
[quote=Crian,31.01.2004, 16:02]Jetzt wo ich die Lösung sehe frage ich mich, wieso ich darauf nicht gekommen bin :D :blush:[/quote]
typisches Wald und Bäume Problem!
Crian
 2004-01-31 18:06
#25560 #25560
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Das ist es noch nicht ganz, die rechte Spalte ist zu weit unten, sie fängt da an, wo die Textspalte (Mitte) aufhört...

CSS:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#linkskueste {
    border: 1px solid silver;
    width: 520px;
    float:left;
    }
#mittekueste {
    border:1px solid green;
    margin-left:525px;
    margin-right:345px;
    }
#rechtskueste {
    border:1px solid blue;
    width:340px;
    float:right;
    }


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
        <div id="linkskueste">
            <p>
            <img ... />
            <br />
            <img ... />
            <br />
            <img ... />
            </p>
        </div>

        <div id="mittekueste">
            <p>...</p>
            <p>...</p>
            <p>...</p>
        </div>

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



Jetzt sieht es so aus: (Netscape 7.1 Win98)

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
+-------------------------------------------------+
|+----------------------+ +-----+                 |
||Drei querliegende     | | Text|                 |
||Fotos übereinander    | | Text|                 |
||                      | | Text|                 |
||                      | | Text|                 |
||                      | | Text|                 |
||                      | | Text|                 |
||                      | | Text|                 |
||                      | | Text|                 |
||                      | +-----+ +--------------+|
||                      |         | Zwei hori-   ||
||                      |         | zontale      ||
||                      |         | Fotos über-  ||
||                      |         | einander     ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
||                      |         |              ||
|+----------------------+         |              ||
+---------------------------------|              |+
                                   |              |
                                   |              |
                                   |              |
                                   |              |
                                   |              |
                                   |              |
                                   |              |
                                   +--------------+
\n\n

<!--EDIT|Crian|1075565445-->
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 19:31
#25561 #25561
User since
2003-11-05
124 Artikel
BenutzerIn

user image
@crian die mittekueste musst du als letztes im body haben, dann klappt das
Gruß
KKO
Crian
 2004-01-31 21:26
#25562 #25562
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Tatsache :D
Vielen Dank :)
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 21:49
#25563 #25563
User since
2003-08-04
7321 Artikel
ModeratorIn

user image
[quote=KKO,31.01.2004, 18:31]@crian die mittekueste musst du als letztes im body haben, dann klappt das[/quote]
sowas finde ich dann für den programmierer verwirrend...
Crian
 2004-01-31 21:51
#25564 #25564
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Ja, ist es, aber wenn es funktioniert? hmmm :D
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 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
Crian
 2004-01-31 23:02
#25566 #25566
User since
2003-08-04
5866 Artikel
ModeratorIn
[Homepage]
user image
Ich habe gerade herausgefunden, dass es bei float kein top und bottom gibt. Also muss man das wohl irgendwie ganz anders machen :/
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-02-01 01:04
#25567 #25567
User since
2003-11-05
124 Artikel
BenutzerIn

user image
du versuchst das prinzip einer tabellen-struktur nachzubauen ( z.b. mainmitte ist nicht nötig )

zu float-top/bottom: das erste div steht sowieso oben, das letzte steht immer unten
( es sei denn, man hat für diese div-class ein position bestimmt )

man könnte, falls die seite mit den oberen teilen nicht gefüllt wäre, ein fuss-div-class definieren:
position:absolute; bottom:0px;width:100%

die sache mit der mitte:
da #mitte keine width-angabe hat, reiht sich #rechts unter #mitte ein, wenn #mitte vor rechts im body steht. ( ein div nimmt standardmäßig die fensterbreite oder den rest der fensterbreite ein )

anstatt die höhe für #kopf und #fuss zu bestimmen, bestimme lieber die abstände zu den anderen elementen ( zumal 13em auch recht groß wird)
Gruß
KKO
<< |< 1 2 3 4 5 6 >| >> 52 Einträge, 6 Seiten



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