tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
13
ZUGRIFFE
5770
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 07.03.05 12:28 #1
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Hallo zusammen,

    ich habe ein div konstrukt in dem sich eine Tabelle befindet die den footer zusammensetzt. Diese möchte ich gerne am unteren Bildschirmrand mittig positionieren. Breitenangaben sollen erhalten bleiben!

    Wie lautet der Befehl in css den ganzen Inhalt zentriert darzustellen, mit align:center komme ich leider nicht weiter, das hilft nur wenn ich position:absolute;bottom:0 herausnehme.

    Ich bekomme das ganze entweder am unteren bildschirmrand gesetzt oder aber mittig und nicht am unteren Bildschirmrand.

    Hier mal der Code...

    Vielen Dank für Eure Hilfe

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

     
<!-- Footer -->
 
 
<div style="position:absolute;bottom:0">
<TABLE ID="Tabelle_02" WIDTH=780 HEIGHT=66 BORDER=1 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD COLSPAN=9><IMG SRC="images/17.jpg" WIDTH=780
                                                              HEIGHT=8></TD>
    </TR>
    ...
</TABLE>
</div>
 
 
<!-- End Footer -->
     
  2. 07.03.05 12:34 #2
    Maik Tutorials.de Gastzugang
    CSS-Code:
    Code :
    1
2
3
4
5
6
7
8
9

    div.footer
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
bottom: 0px;
height: 66px;
}
    HTML-Code:
    Code :
    1
2
3
4
5
6
7
8
9

    <div class="footer">
<TABLE ID="Tabelle_02" WIDTH="780" HEIGHT="66" BORDER="1" CELLPADDING="0" CELLSPACING="0">
    <TR>
        <TD COLSPAN=9><IMG SRC="http://www.tutorials.de/forum/images/17.jpg" WIDTH=780
                                                              HEIGHT=8></TD>
    </TR>
    ...
</TABLE>
</div>
     
  3. 07.03.05 12:51 #3
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Danke Maik, klappt super, nur verstehen tu ich da ganze nicht

    Falls mal jemand Zeit und Lust hat mir das zu erklären, wäre echt super,w as ich auch nicht verstehe ist, dass ich mir nicht erklären kann, wieso es dennoch zentriert erscheint (was zweifelsohne gut ist) auch wenn die bildschirmauflösung geändert wird?

    Danke für Eure Mühen!

    Schönen Tag noch...
     
  4. 07.03.05 12:55 #4
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Klappt doch noch nicht ganz so wie es soll! Sorry!

    Das Problem jetzt ist noch, dass wenn ich einen längeren Kontent habe, wo man die seite normalerweise auf und ab scrollen müsste lagert sich das footer div über den content und der content geht erst danach weiter!

    Wie kann ich es bewerkstelligen, dass der Footer je länger der content wird automatisch nach unten verschoben wird?

    Vielen Dank nochmal!
     
  5. 07.03.05 12:59 #5
    Maik Tutorials.de Gastzugang
    Hallo xThorx,

    mit der Positionierung left: 50% sitzt zunächst der linke Elementrand in der Seiten- / Bildschirmmitte, das Element somit aussermittig, und wird mit der Eigenschaft margin-left:-390px (= linker Aussenabstand) in der Mitte zentriert.

    Wie ich im obigen CSS-Code kommentiert habe, muss zum Zentrieren der Wert für margin-left immer die negative Hälfte von width betragen.
     
  6. 07.03.05 13:01 #6
    Maik Tutorials.de Gastzugang
    Poste mal den kompletten Quelltext, thanx.
     
  7. 07.03.05 13:33 #7
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Okay hier der Code, danke erstmal! Ich hoffe ich kann ihn einigermassen übersichtlich posten, hab da echt meine Probleme mit, sorry!

    Also zunächst das Stylesheet:

    Code :
    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

    <style type="text/css">
<!--
body
{
Background:#ffffff;
margin-left:0px;
margin-top:0px;
margin-width:0px;
margin-height:0px;
color: #001122;
font-family: Arial;
font-size: 14px;
 
}
#mynavi
{
width:400px;
border:0px;
cellpadding:0px;
cellspacing:0px;
}
 
#header
{
display:block; 
width:213px; 
height:57px;
background-image:url(images/navi.jpg);              
background-repeat:no-repeat;
}
 
#middle
{
display:block;
width:213px;
background-image:url(images/navico.jpg);
}
 
#content
{
padding-left:45px; 
padding-right:15px;
}
 
#footer
{
display:block; 
width:213px;
height:24px;
background-image:url(images/navifo.jpg);
background-repeat:no-repeat;
}
 
 
#menuhover
{
color:#ff5500;
font-weight:bold;
cursor:hand;
}
#menunormal
{
background-color:#ffffff;
}
div.bottomfoot
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
bottom: 0px;
height: 66px;
}
-->
</style>

    Den Header habe ich mal aussen vorgelassen, wird per table hergestellt, da sich daran nichts ändert!

    Hier dann jetzt die Navi (Achtung: Das erste Div align und die Table werden erst im Content geschlossen):

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <div align="center">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<div id="mytable" style="position:absolute;">
<div id="header"></div>
 
<div id="middle">
 
<div id="content">
 
<div style="width:150px;height:20px" id="menunormal" 
        onmouseover="this.id='menuhover';"onmouseout="this.id='menunormal';"
        onClick="display('s','sub1')">Test</div>
 
...mehrere Menüpunkte
 
</div>
</div>
<div id="footer"></div>
</div>

    Dann geht es unmittelbar mit dem Content weiter:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

     
<div id="contentDiv">
 
<div style="display:none; margin-left:250px; top:50px;" id="sub1" onClick="display('h','sub1')">
 
<div id="header"></div>
<div id="middle">
 
<div id="content">
Inhalt 1<br>    
</div>
</div>
<div id="footer"></div>
</div>
 
</table>
</div>
 
<!-- End of Content -->

    Und zuguter letzt der Footer

    Code :
    1
2
3
4
5
6
7
8
9

    <!-- Footer -->
<div class="bottomfoot">
<TABLE ID="Tabelle_03" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
    ...mehrere Grafiken die hier zusammengefügt werden
 
</table>
</div>
<!-- End Footer -->
     
  8. 07.03.05 17:15 #8
    Maik Tutorials.de Gastzugang
    Nennst du das einen kompletten Source-Code?

    Sorry, aber mit deinen unvollständigen und fehlerhaften Code-Schnippseln kann man als Aussenstehender überhaupt nichts anfangen.
    Selbst wenn ich die Einzelteile in einem HTML-Dokument zusammenfüge und anschliessend im Browser betrachte, kann ich nicht erkennen, wo dein Problem mit dem Content-Bereich liegen soll. Und von welchem Content-Bereich sprichst du eigentlich: #contentDiv oder #content?

    In puncto ID's ist dir zudem ein Fehler unterlaufen, denn diese können in einer Seite nur einmal verwendet / vergeben werden. Du hast aber die ID's #header , #middle , #content & #footer zweimal in dem Dokument eingebaut.

    In diesem Fall musst du für diese DIV-Elemente jeweils eine CSS-Klasse erzeugen:

    CSS-Code:
    Code :
    1
2
3
4

    div.header { }
div.middle { }
div.content { }
div.footer { }
    HTML-Code:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13

    <body>
 
<div class="header"> ... </div>
<div class="middle">
<div class="content"> ... </div></div>
<div class="footer"> ... </div>
 
<div class="header"> ... </div>
<div class="middle">
<div class="content"> ... </div></div>
<div class="footer"> ... </div>
 
</body>
     
  9. 08.03.05 08:34 #9
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Hallo zusammen,

    also den Fehler mit den ID`s habe ich revidiert und natürlich Klassen eingesetzt.

    Der Bereich #content ist nur für die Ausgabe innerhalb der Grafik gedacht und nicht der Contentbereich. Diesen habe ich versucht mit #contentDiv darzustellen. Ob das so richtig ist, lass ich mal dahin gestellt.

    Nun nochmal den vollständigen Quellcode. Ich hoffe er erscheint nicht zu unübersichtlich und abschreckend...

    Das Problem nach wie vor ist, dass der Footer immer am Boden stehen soll doch wenn der Contentbereich über eine Seite hinausgeht dieser sich dann unter den ContentBereich legen soll und nicht wie es zur Zeit bei mir ist, sich am unteren Ende der Seite einfach über den Content-Bereich legt!

    Vielen Dank nochmal!

    Code :
    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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397

     
<HTML>
<HEAD>
<TITLE>Header</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript">
<!--
 
function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}
 
function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}
 
var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        id111_over = newImage("images/uns-over.jpg");
        id112_over = newImage("images/home-over.jpg");
        id113_over = newImage("images/produkte-over.jpg");
        id114_over = newImage("images/services-over.jpg");
        id115_over = newImage("images/jobs-over.jpg");
        id116_over = newImage("images/kontakt-over.jpg");
        id117_over = newImage("images/suche-over.jpg");
        id118_over = newImage("images/weg-over.jpg");
        id119_over = newImage("images/ref-over.jpg");
        id120_over = newImage("images/agb-over.jpg");
        id121_over = newImage("images/imp-over.jpg");
        id122_over = newImage("images/kon-over.jpg");
        id123_over = newImage("images/suf-over.jpg");
        preloadFlag = true;
    }
}
 
  var subs=new Array('sub1','sub2','sub3','sub4','sub5','sub6','sub7');
    
  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.display='none';
    }
  }
    
  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.display='block';
      
    }else{
      document.getElementById(ele).style.display='none';
    }
  }
 
// -->
</SCRIPT>
<style type="text/css">
<!--
body
{
Background:#ffffff;
margin-left:0px;
margin-top:0px;
margin-width:0px;
margin-height:0px;
color: #001122;
font-family: Arial;
font-size: 14px;
 
}
#mynavi
{
width:400px;
border:0px;
cellpadding:0px;
cellspacing:0px;
}
 
div.header
{
display:block; 
width:213px; 
height:57px;
background-image:url(images/navi.jpg);              
background-repeat:no-repeat;
}
 
div.middle
{
display:block;
width:213px;
background-image:url(images/navico.jpg);
}
 
div.content
{
padding-left:45px; 
padding-right:15px;
}
 
div.footer
{
display:block; 
width:213px;
height:24px;
background-image:url(images/navifo.jpg);
background-repeat:no-repeat;
}
 
 
#menuhover
{
color:#ff5500;
font-weight:bold;
cursor:hand;
}
#menunormal
{
background-color:#ffffff;
}
div.bottomfoot
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
bottom: 0px;
height: 66px;
}
 
-->
</style>
</HEAD>
<BODY ONLOAD="preloadImages();">
 
<!-- Navi -->
<div align="center">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<div id="mytable" style="position:absolute">
<div class="header"></div>
 
<div class="middle">
 
<div class="content">
 
<div style="width:150px;height:20px" id="menunormal" 
        onmouseover="this.id='menuhover';"onmouseout="this.id='menunormal';"
        onClick="display('s','sub1')">Test</div>
 
    <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 
        onmouseout="this.id='menunormal';"
        onClick="display('s','sub2')">Test</div>
 
    <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"             
        onmouseout="this.id='menunormal';"
        onClick="display('s','sub3')">Test</div>
 
    <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"             
        onmouseout="this.id='menunormal';"
        onClick="display('s','sub4')">Test</div>
 
    <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"             
        onmouseout="this.id='menunormal';"      
        onClick="display('s','sub5')">Test</div>
 
    <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"             
        onmouseout="this.id='menunormal';"
        onClick="display('s','sub6')">Test</div>
 
    <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 
        onmouseout="this.id='menunormal';" 
        onClick="display('s','sub7')">Test</div>
 
 
 
</div>
</div>
<div class="footer"></div>
</div>
 
 
<!-- Content -->
 
<div id="contentDiv">
 
<div style="display:none; margin-left:250px; top:50px;" id="sub1" onClick="display('h','sub1')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
        
</div>
</div>
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 2<br>        
</div>
</div>
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 3<br>        
</div>
</div>
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 4<br>        
</div>
</div>
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 5<br>        
</div>
</div>
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 6<br>        
</div>
</div>
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 7<br>        
</div>
</div>
<div class="footer"></div>
</div>
</div>
</table>
</div>
</table>
</div>
 
<!-- End of Content -->
 
 
<!-- Footer -->
<div class="bottomfoot">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
    <TR>
        <TD COLSPAN=9>
            <IMG SRC="images/17.jpg" WIDTH=780 HEIGHT=8></TD>
    </TR>
    <TR>
        <TD>
            <IMG SRC="images/18.jpg" WIDTH=147 HEIGHT=27></TD>
        <TD>
            <A HREF="#"
                ONMOUSEOVER="changeImages('id118', 'images/weg-over.jpg'); return true;"
                ONMOUSEOUT="changeImages('id118', 'images/weg.jpg'); return true;"
                ONMOUSEDOWN="changeImages('id118', 'images/weg-over.jpg'); return true;"
                ONMOUSEUP="changeImages('id118', 'images/weg-over.jpg'); return true;">
                <IMG NAME="id118" SRC="images/weg.jpg" WIDTH=118 HEIGHT=27 BORDER=0></A></TD>
        <TD>
            <A HREF="#"
                ONMOUSEOVER="changeImages('id119', 'images/ref-over.jpg'); return true;"
                ONMOUSEOUT="changeImages('id119', 'images/ref.jpg'); return true;"
                ONMOUSEDOWN="changeImages('id119', 'images/ref-over.jpg'); return true;"
                ONMOUSEUP="changeImages('id119', 'images/ref-over.jpg'); return true;">
                <IMG NAME="id119" SRC="images/ref.jpg" WIDTH=99 HEIGHT=27 BORDER=0></A></TD>
        <TD>
            <A HREF="#"
                ONMOUSEOVER="changeImages('id120', 'images/agb-over.jpg'); return true;"
                ONMOUSEOUT="changeImages('id120', 'images/agb.jpg'); return true;"
                ONMOUSEDOWN="changeImages('id120', 'images/agb-over.jpg'); return true;"
                ONMOUSEUP="changeImages('id120', 'images/agb-over.jpg'); return true;">
                <IMG NAME="id120" SRC="images/agb.jpg" WIDTH=52 HEIGHT=27 BORDER=0></A></TD>
        <TD ROWSPAN=2>
            <IMG SRC="images/19.jpg" WIDTH=1 HEIGHT=58></TD>
        <TD>
            <A HREF="#"
                ONMOUSEOVER="changeImages('id121', 'images/imp-over.jpg'); return true;"
                ONMOUSEOUT="changeImages('id121', 'images/imp.jpg'); return true;"
                ONMOUSEDOWN="changeImages('id121', 'images/imp-over.jpg'); return true;"
                ONMOUSEUP="changeImages('id121', 'images/imp-over.jpg'); return true;">
                <IMG NAME="id121" SRC="images/imp.jpg" WIDTH=91 HEIGHT=27 BORDER=0></A></TD>
        <TD>
            <A HREF="#"
                ONMOUSEOVER="changeImages('id122', 'images/kon-over.jpg'); return true;"
                ONMOUSEOUT="changeImages('id122', 'images/kon.jpg'); return true;"
                ONMOUSEDOWN="changeImages('id122', 'images/kon-over.jpg'); return true;"
                ONMOUSEUP="changeImages('id122', 'images/kon-over.jpg'); return true;">
                <IMG NAME="id122" SRC="images/kon.jpg" WIDTH=77 HEIGHT=27 BORDER=0></A></TD>
        <TD>
            <A HREF="#"
                ONMOUSEOVER="changeImages('id123', 'images/suf-over.jpg'); return true;"
                ONMOUSEOUT="changeImages('id123', 'images/suf.jpg'); return true;"
                ONMOUSEDOWN="changeImages('id123', 'images/suf-over.jpg'); return true;"
                ONMOUSEUP="changeImages('id123', 'images/suf-over.jpg'); return true;">
                <IMG NAME="id123" SRC="images/suf.jpg" WIDTH=83 HEIGHT=27 BORDER=0></A></TD>
        <TD>
            <IMG SRC="images/20.jpg" WIDTH=112 HEIGHT=27></TD>
    </TR>
    <TR>
        <TD COLSPAN=4>
            <IMG SRC="images/21.jpg" WIDTH=416 HEIGHT=31></TD>
        <TD COLSPAN=4>
            <IMG SRC="images/22.jpg" WIDTH=363 HEIGHT=31></TD>
    </TR>
</TABLE>
</div>
</div>
<!-- End Footer -->
</BODY>
</HTML>
     
  10. 08.03.05 12:52 #10
    Maik Tutorials.de Gastzugang
    Hallo xThorx,

    habe deinen Source-Code überarbeitet, so dass der Footer .bottomfoot nun unterhalb des Content-Bereichs #contentDiv angezeigt wird:

    Code :
    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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395

    <HTML>
<HEAD>
<TITLE>Header</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript">
<!--
 
function newImage(arg) {
        if (document.images) {
                rslt = new Image();
                rslt.src = arg;
                return rslt;
        }
}
 
function changeImages() {
        if (document.images && (preloadFlag == true)) {
                for (var i=0; i<changeImages.arguments.length; i+=2) {
                        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
                }
        }
}
 
var preloadFlag = false;
function preloadImages() {
        if (document.images) {
                id111_over = newImage("http://www.tutorials.de/forum/images/uns-over.jpg");
                id112_over = newImage("http://www.tutorials.de/forum/images/home-over.jpg");
                id113_over = newImage("http://www.tutorials.de/forum/images/produkte-over.jpg");
                id114_over = newImage("http://www.tutorials.de/forum/images/services-over.jpg");
                id115_over = newImage("http://www.tutorials.de/forum/images/jobs-over.jpg");
                id116_over = newImage("http://www.tutorials.de/forum/images/kontakt-over.jpg");
                id117_over = newImage("http://www.tutorials.de/forum/images/suche-over.jpg");
                id118_over = newImage("http://www.tutorials.de/forum/images/weg-over.jpg");
                id119_over = newImage("http://www.tutorials.de/forum/images/ref-over.jpg");
                id120_over = newImage("http://www.tutorials.de/forum/images/agb-over.jpg");
                id121_over = newImage("http://www.tutorials.de/forum/images/imp-over.jpg");
                id122_over = newImage("http://www.tutorials.de/forum/images/kon-over.jpg");
                id123_over = newImage("http://www.tutorials.de/forum/images/suf-over.jpg");
                preloadFlag = true;
        }
}
 
  var subs=new Array('sub1','sub2','sub3','sub4','sub5','sub6','sub7');
 
  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.display='none';
    }
  }
 
  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.display='block';
 
    }else{
      document.getElementById(ele).style.display='none';
    }
  }
 
// -->
</SCRIPT>
<style type="text/css">
<!--
body
{
Background:#ffffff;
margin-left:0px;
margin-top:0px;
margin-width:0px;
margin-height:0px;
color: #001122;
font-family: Arial;
font-size: 14px;
}
 
[B]div.main /* Ersatz für <div align='center'> */[/B]
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
}
 
#mynavi
{
width:400px;
border:0px;
cellpadding:0px;
cellspacing:0px;
}
 
div.header
{
display:block;
width:213px;
height:57px;
background-image:url(images/navi.jpg);
background-repeat:no-repeat;
}
 
div.middle
{
display:block;
width:213px;
background-image:url(images/navico.jpg);
}
 
div.content
{
padding-left:45px;
padding-right:15px;
}
 
div.footer
{
display:block;
width:213px;
height:24px;
background-image:url(images/navifo.jpg);
background-repeat:no-repeat;
}
 
#menuhover
{
color:#ff5500;
font-weight:bold;
cursor:hand;
}
#menunormal
{
background-color:#ffffff;
}
 
div.bottomfoot
{
width: 780px;
height: 66px;
}
-->
</style>
</HEAD>
<BODY ONLOAD="preloadImages();">
 
<!-- Navi -->
[B]<div class="main">[/B]
 
<div id="mytable">
<div class="header"></div>
 
<div class="middle">
 
<div class="content">
 
<div style="width:150px;height:20px" id="menunormal"
                onmouseover="this.id='menuhover';"onmouseout="this.id='menunormal';"
                onClick="display('s','sub1')">Test</div>
 
        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub2')">Test</div>
 
        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub3')">Test</div>
 
        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub4')">Test</div>
 
        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub5')">Test</div>
 
        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub6')">Test</div>
 
        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub7')">Test</div>
 
 
 
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div> <!-- END #mytable -->
 
 
<!-- Content -->
 
<div id="contentDiv">
 
<div style="display:none; margin-left:250px; margin-top: 50px;" id="sub1" onClick="display('h','sub1')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
 
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 2<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 3<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 4<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 5<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 6<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 7<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
 
</div> <!-- END #contentDiv -->
<!-- End of Content -->
 
 
<!-- Footer -->
<div class="bottomfoot">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
        <TR>
                <TD COLSPAN=9>
                        <IMG SRC="http://www.tutorials.de/forum/images/17.jpg" WIDTH=780 HEIGHT=8></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="http://www.tutorials.de/forum/images/18.jpg" WIDTH=147 HEIGHT=27></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id118', 'images/weg-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id118', 'images/weg.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id118', 'images/weg-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id118', 'images/weg-over.jpg'); return true;">
                                <IMG NAME="id118" SRC="http://www.tutorials.de/forum/images/weg.jpg" WIDTH=118 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id119', 'images/ref-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id119', 'images/ref.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id119', 'images/ref-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id119', 'images/ref-over.jpg'); return true;">
                                <IMG NAME="id119" SRC="http://www.tutorials.de/forum/images/ref.jpg" WIDTH=99 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id120', 'images/agb-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id120', 'images/agb.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id120', 'images/agb-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id120', 'images/agb-over.jpg'); return true;">
                                <IMG NAME="id120" SRC="http://www.tutorials.de/forum/images/agb.jpg" WIDTH=52 HEIGHT=27 BORDER=0></A></TD>
                <TD ROWSPAN=2>
                        <IMG SRC="http://www.tutorials.de/forum/images/19.jpg" WIDTH=1 HEIGHT=58></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id121', 'images/imp-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id121', 'images/imp.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id121', 'images/imp-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id121', 'images/imp-over.jpg'); return true;">
                                <IMG NAME="id121" SRC="http://www.tutorials.de/forum/images/imp.jpg" WIDTH=91 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id122', 'images/kon-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id122', 'images/kon.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id122', 'images/kon-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id122', 'images/kon-over.jpg'); return true;">
                                <IMG NAME="id122" SRC="http://www.tutorials.de/forum/images/kon.jpg" WIDTH=77 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id123', 'images/suf-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id123', 'images/suf.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id123', 'images/suf-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id123', 'images/suf-over.jpg'); return true;">
                                <IMG NAME="id123" SRC="http://www.tutorials.de/forum/images/suf.jpg" WIDTH=83 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <IMG SRC="http://www.tutorials.de/forum/images/20.jpg" WIDTH=112 HEIGHT=27></TD>
        </TR>
        <TR>
                <TD COLSPAN=4>
                        <IMG SRC="http://www.tutorials.de/forum/images/21.jpg" WIDTH=416 HEIGHT=31></TD>
                <TD COLSPAN=4>
                        <IMG SRC="http://www.tutorials.de/forum/images/22.jpg" WIDTH=363 HEIGHT=31></TD>
        </TR>
</TABLE>
</div> <!-- End .bottomfoot -->
 
[B]</div> <!-- END .main -->[/B]
</BODY>
</HTML>
     
  11. 08.03.05 13:02 #11
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Hallo Maik,

    vielen vielen Dank erstmal dafür!

    Das Problem leider ist nur, dass ich gerne möchte dass der content bereich ab der selben höhe angeziegt wird wo auch die navibox dargestellt wird. der content bereich fängt so erst nach der navi an.

    Das zweite wäre der footer der eigentlich immer am bottom feststehen soll, es sei denn, der content geht über den bottom hinaus, dann soll sich dieser natürlich dementsprechend nach unten verschieben!

    Ist das überhaupt möglich?

    Vielen vielen Dank mal wieder!
     
  12. 08.03.05 13:28 #12
    Maik Tutorials.de Gastzugang
    Verstehe ich dich richtig, dass der Content-Bereich rechts neben der Navigation positioniert / angezeigt werden soll? Wenn ja, dann bedarf es einiger Modifikationen am HTML- und CSS-Code. (Werde heute abend ein Demo erarbeiten und posten)

    Zu deiner zweiten Frage: entweder wird der Footer am unteren Bildschirmrand positioniert, oder unterhalb des Content-Bereichs angezeigt - beides funktioniert nicht.
     
  13. 08.03.05 13:37 #13
    xThorx xThorx ist offline Mitglied Bronze
    Registriert seit
    Mar 2004
    Beiträge
    37
    Zu 1: Ja da stimme ich dir zu, dieser soll genau neben der Navigation villeicht mit ein bisschen luft dazwischen erscheinen...

    Zu 2: Schade dass das nicht funktioniert! Gibt es dort auch keine eventuelle Java-Lösung?

    Vielen Dank für Deine Hilfe!
     
  14. 09.03.05 06:07 #14
    Maik Tutorials.de Gastzugang
    Hallo xThorx,

    habe zwei CSS-Konzepte für dich erarbeitet. In beiden Varianten floaten die Navigation und der Content-Bereich.
    Wegen dem Zeichenlängen-Limit poste ich die Source-Codes ohne Script im HEAD und Tabelle im Footer.

    1. Variante - bei übergrossem Inhalt in #contentDiv wird die Seite (=body) gescrollt:
    Code :
    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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277

    <html>
<head>
<title>header</title>
 
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
color: #001122;
font-family: arial;
font-size: 14px;
}
 
#mainDiv
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = horizontal zentriertes DIV */
border: 1px solid #dfdfdf;
}
 
#menuDiv
{
float: left;
width: 215px; /* Im Kontext zu .header-, .middle- & .footer-width = 213px */
padding: 0px;
margin: 0px;
}
 
div.menunormal
{
font-weight: bold;
cursor: hand;
}
 
div.menuhover
{
color: #ff5500;
font-weight: bold;
cursor: hand;
}
 
#contentDiv
{
float: right;
width: 550px;
border-left: 1px dotted #dfdfdf;
padding: 0px;
margin: 0px;
}
 
div.header
{
display: block;
width: 213px;
height: 57px;
background-image: url(images/navi.jpg);
background-repeat: no-repeat;
}
 
div.middle
{
display: block;
width: 213px;
background-image: url(images/navico.jpg);
}
 
div.content
{
padding-left: 45px;
padding-right: 15px;
}
 
div.footer
{
display: block;
width: 213px;
height: 24px;
background-image: url(images/navifo.jpg);
background-repeat: no-repeat;
}
 
#footDiv
{
clear: both;
width: 780px;
height: 66px;
padding: 0px;
margin: 0px;
}
-->
</style>
 
</head>
<body onload="preloadImages();">
 
<!-- #mainDiv -->
<div id="mainDiv">
 
<!-- #menuDiv -->
<div id="menuDiv">
 
<div class="header"></div>
<div class="middle">
<div class="content">
 
<div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub1')">&raquo; show sub1</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub2')">&raquo; show sub2</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub3')">&raquo; show sub3</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub4')">&raquo; show sub4</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub5')">&raquo; show sub5</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub6')">&raquo; show sub6</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub7')">&raquo; show sub7</div>
 
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div> <!-- END #menuDiv -->
 
<!-- #contentDiv -->
<div id="contentDiv">
 
<!-- #sub1 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub1" onClick="display('h','sub1')">
<div class="header">sub1.header</div>
<div class="middle">
<div class="content"><br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br></div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub1 -->
 
<!-- #sub2 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header">sub2.header</div>
<div class="middle">
<div class="content">
Inhalt 2<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub2 -->
 
<!-- #sub3 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header">sub3.header</div>
<div class="middle">
<div class="content">
Inhalt 3<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub3 -->
 
<!-- #sub4 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header">sub4.header</div>
<div class="middle">
<div class="content">
Inhalt 4<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub4 -->
 
<!-- #sub5 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header">sub5.header</div>
<div class="middle">
<div class="content">
Inhalt 5<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub5 -->
 
<!-- #sub6 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header">sub6.header</div>
<div class="middle">
<div class="content">
Inhalt 6<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub6 -->
 
<!-- #sub7 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header">sub7.header</div>
<div class="middle">
<div class="content">
Inhalt 7<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub7 -->
 
</div> <!-- END #contentDiv -->
 
 
<!-- #footDiv -->
<div id="footDiv">
<!-- Hier folgt deine Tabelle -->
</div>
<!-- End #footDiv -->
 
</div> <!-- END #mainDiv -->
 
</body>
</html>

    2. Variante - bei übergrossem Inhalt in #contentDiv wird das DIV gescrollt:
    Code :
    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
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284

    <html>
<head>
<title>header</title>
 
<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
color: #001122;
font-family: arial;
font-size: 14px;
overflow: hidden; /* optional IE-Scrollbars deaktivieren */
}
 
#mainDiv
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = horizontal zentriertes DIV */
top: 50%;
height: 400px;
margin-top: -200px; /* neg. Hälfte von height:400px = vertikal zentriertes DIV */
border: 1px solid #dfdfdf;
}
 
#menuDiv
{
float: left;
width: 215px; /* Im Kontext zu .header-, .middle- & .footer-width = 213px */
padding: 0px;
margin: 0px;
}
 
div.menunormal
{
font-weight: bold;
cursor: hand;
}
 
div.menuhover
{
color: #ff5500;
font-weight: bold;
cursor: hand;
}
 
#contentDiv
{
float: right;
width: 550px;
height: 330px;
overflow: auto; /* übergrosser Inhalt ist scrollbar */
border-left: 1px dotted #dfdfdf;
padding: 0px;
margin: 0px;
}
 
div.header
{
display: block;
width: 213px;
height: 57px;
background-image: url(images/navi.jpg);
background-repeat: no-repeat;
}
 
div.middle
{
display: block;
width: 213px;
background-image: url(images/navico.jpg);
}
 
div.content
{
padding-left: 45px;
padding-right: 15px;
}
 
div.footer
{
display: block;
width: 213px;
height: 24px;
background-image: url(images/navifo.jpg);
background-repeat: no-repeat;
}
 
#footDiv
{
clear: both;
width: 780px;
height: 66px;
padding: 0px;
margin: 0px;
}
-->
</style>
 
</head>
<body onload="preloadImages();">
 
<!-- #mainDiv -->
<div id="mainDiv">
 
<!-- #menuDiv -->
<div id="menuDiv">
 
<div class="header"></div>
<div class="middle">
<div class="content">
 
<div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub1')">&raquo; show sub1</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub2')">&raquo; show sub2</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub3')">&raquo; show sub3</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub4')">&raquo; show sub4</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub5')">&raquo; show sub5</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub6')">&raquo; show sub6</div>
 
        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub7')">&raquo; show sub7</div>
 
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div> <!-- END #menuDiv -->
 
<!-- #contentDiv -->
<div id="contentDiv">
 
<!-- #sub1 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub1" onClick="display('h','sub1')">
<div class="header">sub1.header</div>
<div class="middle">
<div class="content"><br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub1 -->
 
<!-- #sub2 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header">sub2.header</div>
<div class="middle">
<div class="content">
Inhalt 2<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub2 -->
 
<!-- #sub3 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header">sub3.header</div>
<div class="middle">
<div class="content">
Inhalt 3<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub3 -->
 
<!-- #sub4 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header">sub4.header</div>
<div class="middle">
<div class="content">
Inhalt 4<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub4 -->
 
<!-- #sub5 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header">sub5.header</div>
<div class="middle">
<div class="content">
Inhalt 5<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub5 -->
 
<!-- #sub6 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header">sub6.header</div>
<div class="middle">
<div class="content">
Inhalt 6<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub6 -->
 
<!-- #sub7 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header">sub7.header</div>
<div class="middle">
<div class="content">
Inhalt 7<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub7 -->
 
</div> <!-- END #contentDiv -->
 
 
<!-- #footDiv -->
<div id="footDiv">
<!-- Hier folgt deine Tabelle -->
</div>
<!-- End #footDiv -->
 
</div> <!-- END #mainDiv -->
 
</body>
</html>
     
« Menue im Vorder- oder Hintergrund? | frames & css - problem mit active links »

Ähnliche Themen

  1. Footer will kein Footer sein
    Von thigle im Forum CSS
    Antworten: 30
    Letzter Beitrag: 14.02.10, 22:15
  2. [CSS] Wie lässt sich der Footer am unteren Fensterrand ausrichten?
    Von Maik im Forum Webmaster FAQ
    Antworten: 0
    Letzter Beitrag: 17.01.10, 01:10
  3. Div-Höhe(100%?) bis zum unteren Bildschirmrand
    Von soyo im Forum CSS
    Antworten: 4
    Letzter Beitrag: 20.03.07, 12:16
  4. div-Bereich bis am Bildschirmrand
    Von wernerschuster im Forum CSS
    Antworten: 1
    Letzter Beitrag: 06.11.04, 21:07
  5. img am unteren rechten bildschirmrand ausrichten
    Von KampfY im Forum HTML & XHTML
    Antworten: 12
    Letzter Beitrag: 25.05.01, 23:07