tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
178
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 10.11.08 12:24 #1
    yajamahe yajamahe ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    3
    Hallo Gemeinde,
    ich arbeite mich gerade in CSS ein.
    ich habe ein Problem mit der Fusszeile.
    Im IE6 wird die Fusszeile richtig, wie ich es möchte, dargestellt, im Firefox 3.0.3 nicht.

    In allen(aktuellen) Browsern soll die Fusszeile ganz unten, nach dem inhalt des letzten Fensters dargestellt werden.

    Was mache ich da falsch?

    Danke für das lesen und eventuellen Antworten.
    René


    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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body, html, #Menu1Left, #container, #inhalt, #Menu1Rechts, #Content {
    margin:0;
    padding:0;
    font-size: 12px;
}
body {font:100.1% sans-serif;
 
background-color:#E6DCCF;
text-align: center;  /* Aller Text in allen Boxen wird centriert */
}
#container {
    /*width: 59.9em; */ /* 1em ist gleich z.B. 11pt*/
    width:900px;
    text-align:left;
    background-color:#E6B873;
    height: 600px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    min-height: 100%;
    min-height: 600;
/*  background-image: url(csshintergrund.png);
    background-repeat: repeat;*/
}
#TopHeader {
    z-index:0;
    background-color: #993366;
/*  background-image: url(backsteine.png);
    background-repeat: repeat;*/
}
#TopMenue {
    z-index:1;
    background-color: #0033CC;
}
#MenuLeftContainer {
    width: 20%; 
    float:left;
    z-index:2;
    background-color: #CC9933;
}
#MenuLeft {
    z-index:2;
    background-color: #CC9933;
    padding: 10px;
}
#MenuRechtsContainer {
    width: 20%;
    float:left;
    z-index:3;
    background-color: #00CCCC;
}
#MenuRechts {
    z-index:3;
    background-color: #9999CC;
    padding: 20px;
}
#ContentContainer {
    width: 59.5%;
    float:left;
    left: 20%;
    top:0px;
    z-index:4;
    background-color: #99CCFF; 
}
 
#ContentTopMenue {
    z-index:4;
    background-color: #9966FF; 
}
#Content {
    z-index:4;
    background-color: #CCCCFF;
    padding: 10px;
}
 
#Fusszeile {   /* Fusszeile aus dem Container raus */
    text-align:center;
    padding:10px;
    z-index:5;
    background-color: #996633;
    height: 20px;
    bottom: 0px; 
    width:880px;
    text-align:left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
-->
</style>
</head>
 
<body><br />
<div id="container">
 
<div id="TopHeader">top <br />top <br />top <br />top <br /> top</div>
 
<div id="TopMenue">top <br />top <br />top <br />top <br /> top</div>
 
<div id="MenuLeftContainer"><br />
<div id="MenuLeft">Menu1 1 <br />Menu1 2 <br />Menu1 3 <br />Menu1 4 <br />Menu1 5 <br />Menu1 6 <br />Menu1 7 <br />Menu1 8 <br /></div><br /><br />
<div id="MenuLeft">Menu1 1 <br />Menu1 2 <br />Menu1 3 <br />Menu1 4 <br />Menu1 5 <br />Menu1 6 <br />Menu1 7 <br />Menu1 8 <br /></div>
</div>
 
<div id="ContentContainer">
<div id="ContentTopMenue">Rene</div>
<div id="Content">Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> </div>
</div>
 
<div id="MenuRechtsContainer"><br />
<div id="MenuRechts">Menu 1 rechts <br />Menu 2 rechts <br />Menu 3 rechts <br />Menu 4 rechts <br />Menu 5 rechts <br />Menu 6 rechts <br /></div><br />
<div id="MenuRechts">Menu 1 rechts <br />Menu 2 rechts <br />Menu 3 rechts <br />Menu 4 rechts <br />Menu 5 rechts <br />Menu 6 rechts <br /></div>
</div> 
 
 
</div>  <!--   Ende - container  -->
 
<div id="Fusszeile">Fusszeile </div>
 
</body>
</html>
     
    Zitieren Zitieren
  2. 10.11.08 12:29 #2
    Maik Tutorials.de Gastzugang
    Hi,

    deinem Stylesheet zufolge hast du die Floatumgebung mittels clear:left im Footer nicht wieder aufgehoben.

    mfg Maik
     
    Zitieren Zitieren
  3. 10.11.08 12:34 #3
    yajamahe yajamahe ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    3
    Herzlichen Dank Maik.

    Schneller gehts nimmer...
     
    Zitieren Zitieren
  4. 10.11.08 12:42 #4
    Maik Tutorials.de Gastzugang
    Hab da noch einen Verbesserungsvorschlag, damit der Hintergrund von #container in den standardkonformen Browsern auch bis zum Footer reicht

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

    #container {
        /*width: 59.9em; */ /* 1em ist gleich z.B. 11pt*/
    width:900px;
        text-align:left;
        background-color:#E6B873;
        [B]/*height: 600px;*/[/B] 
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        [B]min-height: 600px;[/b] /* Mindesthöhe in modernen Browser */
        [b]height:auto !important;[/b] /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
        [b]height:600px;[/B] /* Mindesthöhe in IE6 und älter */
/*        background-image: url(csshintergrund.png);
        background-repeat: repeat;*/
}

    Code :
    1
2
3
4
5

    [B]<div id="Fusszeile">Fusszeile </div>[/B]
</div>  <!--   Ende - container  -->
 
</body>
</html>


    mfg Maik
     
    Zitieren Zitieren
  5. 10.11.08 14:35 #5
    yajamahe yajamahe ist offline Grünschnabel
    Registriert seit
    Oct 2007
    Beiträge
    3
    Blicks zwar noch nicht genau, aber der Effekt ist genial.
    Rechts und links sind nun die unbenutzen Fläschen gefüllt, bzw. einheitlich.
    Hatte mich schon darüber gewundert und wollte dem nachgehen.
    Ja Klasse!
    Nochmals Danke
    René
     
    Zitieren Zitieren
« Menü klappt nicht ein bei IE 7 | Probleme mit javaScript und IE6 »

Ähnliche Themen

  1. Word; Kopf und Fusszeile nicht mitdrucken!
    Von wugdcg im Forum Office-Anwendungen
    Antworten: 4
    Letzter Beitrag: 30.05.05, 16:05
  2. VBA/Word: wechselnde Kop/Fusszeile
    Von bertie57 im Forum Visual Basic 6.0
    Antworten: 0
    Letzter Beitrag: 17.01.05, 13:31
  3. Fusszeile nicht mitdrucken
    Von Maximus_D_M im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 19.07.04, 15:34
  4. layout, fusszeile bleibt nicht unten
    Von Prijv im Forum CSS
    Antworten: 1
    Letzter Beitrag: 17.07.03, 16:00
  5. Letzter Beitrag wird nicht angezeigt
    Von Dominion im Forum PHP
    Antworten: 4
    Letzter Beitrag: 16.03.02, 15:16