| Autor |
Nachricht |
Penzoil
Threadersteller
Dabei seit: 25.11.2011
Ort: -
Alter: 33
Geschlecht: 
|
Verfasst Fr 25.11.2011 17:14
Titel Sticky Footer im IE geht nicht? |
  |
|
Hallo Leute,
ich stecke gerade fest bei einem Projekt und benötige eure Hilfe. Ich habe viele Beiträge hier im Forum gelesen und hab auch viel geschafft dadurch aber jetzt bin ich mit meinem Latein am Ende. Es geht um den Sticky Footer der bei mir im IE einfach nicht unten bleiben will. Desweiteren wird mir einer der beiden Backround Bilder im IE nicht angezeigt. In Chrome und Firefox sieht alles gut aus.
Kurze Erklärung:
Der "Footer" ist gleichzeitig mein Hauptmenu (Textlink, vier Buttons usw. ) und "#minheight" ist eigentlich das DIV das diesen in Zaun halten sollte. Ich verwende zwei Backroundbilder die sich jeweils in den oberen Ecken der Seite befinden. Das linke das im css unter html deklariert ist, ist das betreffende das im IE nicht dargestellt wird.
HTML:
| Code: |
<body>
<div id="root">
<div id="header" class="logo"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="minheight"></div>
<div id="footer">
<div class="h3"><a href="index.htm">HOME</a></div>
<div>
<ul id="navi">
<li><a href="#" class="about"></a></li>
<li><a href="#" class="galleria"></a></li>
<li><a href="#" class="service"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
<div>
<ul id="follow">
<li><a href="http://www.twitter.com" class="sh2"></a></li>
<li><a href="http://www.facebook.com" href="#" class="sh1"></a></li>
</ul>
</div>
</div>
</div>
</body>
|
CSS:
| Code: |
html {
background-image: url(../img/back_left.gif);
background-repeat:no-repeat;
background-position:left top;
height:100%;
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
body {
background-image: url(../img/back_right.gif);
background-repeat:no-repeat;
background-position:right top;
height:100%;
margin-top:0px;
margin-left:0px;
margin-right:0px;
overflow-x: hidden;
overflow-y: hidden;
}
a:link {color:#FFFFFF; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:active {color:#FFFFFF; text-decoration:none}
a:hover {color:#FFB317; text-decoration:none}
div#root {
position:relative;
height:100%;
width:100%;
height:auto !important;
min-height:100%;
margin:0px auto -95px;
}
div#header {
height:90px;
clear:both;
}
div#content {
height:50%;
clear:both;
}
div#minheight {
height:95px;
clear:both;
}
div#footer {
position:absolute;
bottom:0px !important;
clear: both;
float: left;
width: 100%;
background-image: url(../img/bar.png);
background-repeat:repeat-x;
background-position: center center;
}
.logo {
margin-left:33px;
display:block;
height: 90px;
width: 125px;
background:url(../img/logo.png) no-repeat;
cursor: pointer;
}
#navi {
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#navi li {
float: left;
position: relative;
right: 50%;
}
#navi a {
height: 95px;
width: 167px;
display: block;
padding:0 1px;
line-height: 1.5em;
}
.about {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b1a.jpg) no-repeat;
padding:1px;
}
.about span.hover {
display: block;
height: 95px;
width: 167px;
background:url(../img/b1b.jpg) no-repeat;
padding:1px;
}
.galleria {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b2a.jpg) no-repeat;
padding:1px;
}
.galleria span.hover{
display: block;
height: 95px;
width: 167px;
background:url(../img/b2b.jpg) no-repeat;
padding:1px;
}
.service {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b3a.jpg) no-repeat;
padding:1px;
}
.service span.hover {
display: block;
height: 95px;
width: 167px;
background:url(../img/b3b.jpg) no-repeat;
padding:1px;
}
.contact {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b4a.jpg) no-repeat;
padding:1px;
}
.contact span.hover {
display: block;
height: 95px;
width: 167px;
background:url(../img/b4b.jpg) no-repeat;
padding:1px;
}
.h3 {
position: absolute;
padding-left:4px;
padding-top:58px;
float:left;
font: 10px Lucida Grande, Tahoma, Helvetica, sans-serif;
font-weight: lighter;
font-variant: normal;
text-transform: uppercase;
color:#ffffff;
}
#follow {
float: right;
position: relative;
margin: 0 auto;
padding-top:47px;
padding-right:2px;
padding: 0;
list-style-type: none;
}
#follow li {
float: right;
padding-top:47px;
padding-right:5px;
position: relative;
}
#follow a {
height: 31px;
width: 30px;
display: block;
padding:0 1px;
line-height: 1.5em;
}
.sh1 {
display: block;
height: 31px;
width: 30px;
background:url(../img/s1.gif) no-repeat;
background-position:bottom;
}
.sh2 {
display: block;
height: 31px;
width: 30px;
background:url(../img/s2.gif) no-repeat;
background-position:bottom;
}
|
Ich bin noch am Anfang daher habt Nachsicht wenn es etwas unaufgeräumt erscheint  . Ich hab mein bestes Versucht
Vielen Dank
[/quote]
Zuletzt bearbeitet von Penzoil am Fr 25.11.2011 17:31, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
| |
|
|
Piki
Dabei seit: 30.01.2008
Ort: -
Alter: -
Geschlecht: -
|
|
| |
|
|
Penzoil
Threadersteller
Dabei seit: 25.11.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Fr 25.11.2011 21:41
Titel
|
|
|
Danke für den Tipp, leider hat mir das nicht weitergeholfen, ich habe die Seite so umgebaut wie auf der Seite beschrieben....
...also "#root" ist gleichzusetzen mit #wrap aber ansonsten ist es gleich?! oder sieht jemand irgendwo etwas was ich übersehen habe?
Das ummodeln hat dazu geführt das es nur noch im Chrome funktioniert. Im Firefox hängt die Leiste nun in der Mitte genau wie im IE und das Bild (Backround) wird (is klar) auch nicht angezeigt
HTML
| Code: |
<body>
<div id="root">
<div id="header" class="logo"></div>
<div id="main" class="clearfix"></div>
</div>
<div id="footer">
<div class="h3"><a href="index.htm">HOME</a></div>
<div>
<ul id="navi">
<li><a href="#" class="about"></a></li>
<li><a href="#" class="galleria"></a></li>
<li><a href="#" class="service"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
<div>
<ul id="follow">
<li><a href="http://www.twitter.com" class="sh2"></a></li>
<li><a href="http://www.facebook.com" class="sh1"></a></li>
</ul>
</div>
</div>
</body>
|
CSS
| Code: |
html {
background-image: url(../img/back_left.gif);
background-repeat:no-repeat;
background-position:left top;
height:100%;
}
body {
background-image: url(../img/back_right.gif);
background-repeat:no-repeat;
background-position:right top;
height:auto;
min-height:100%;
overflow-x: hidden;
overflow-y: hidden;
}
a:link {color:#FFFFFF; text-decoration:none}
a:visited {color:#FFFFFF; text-decoration:none}
a:active {color:#FFFFFF; text-decoration:none}
a:hover {color:#FFB317; text-decoration:none}
* {margin:0;padding:0;}
#main {padding-bottom: 95px;}
div#root {
height: auto;
min-height:100%;
width:100%;
}
div#header {
height:90px;
clear:both;
}
div#footer {
position:relative;
bottom:0px !important;
height: 95px;
clear: both;
width: 100%;
margin-top: -95px;
background-image: url(../img/bar.png);
background-repeat:repeat-x;
background-position: center center;
}
.logo {
margin-left:33px;
display:block;
height: 90px;
width: 125px;
background:url(../img/logo.png) no-repeat;
cursor: pointer;
}
#navi {
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
#navi li {
float: left;
position: relative;
right: 50%;
}
#navi a {
height: 95px;
width: 167px;
display: block;
padding:0 1px;
line-height: 1.5em;
}
.about {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b1a.jpg) no-repeat;
padding:1px;
}
.about span.hover {
display: block;
height: 95px;
width: 167px;
background:url(../img/b1b.jpg) no-repeat;
padding:1px;
}
.galleria {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b2a.jpg) no-repeat;
padding:1px;
}
.galleria span.hover{
display: block;
height: 95px;
width: 167px;
background:url(../img/b2b.jpg) no-repeat;
padding:1px;
}
.service {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b3a.jpg) no-repeat;
padding:1px;
}
.service span.hover {
display: block;
height: 95px;
width: 167px;
background:url(../img/b3b.jpg) no-repeat;
padding:1px;
}
.contact {
clear: both;
display:block;
height: 95px;
width: 167px;
background:url(../img/b4a.jpg) no-repeat;
padding:1px;
}
.contact span.hover {
display: block;
height: 95px;
width: 167px;
background:url(../img/b4b.jpg) no-repeat;
padding:1px;
}
.h3 {
position: absolute;
padding-left:4px;
padding-top:58px;
float:left;
font: 10px Lucida Grande, Tahoma, Helvetica, sans-serif;
font-weight: lighter;
font-variant: normal;
text-transform: uppercase;
color:#ffffff;
}
#follow {
float: right;
position: relative;
margin: 0 auto;
padding-top:47px;
padding-right:2px;
padding: 0;
list-style-type: none;
}
#follow li {
float: right;
padding-top:47px;
padding-right:5px;
position: relative;
}
#follow a {
height: 31px;
width: 30px;
display: block;
padding:0 1px;
line-height: 1.5em;
}
.sh1 {
display: block;
height: 31px;
width: 30px;
background:url(../img/s1.gif) no-repeat;
background-position:bottom;
}
.sh2 {
display: block;
height: 31px;
width: 30px;
background:url(../img/s2.gif) no-repeat;
background-position:bottom;
}
/* CLEAR FIX */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Bereich nicht für IE-mac Ende */
|
|
|
| |
|
|
Piki
Dabei seit: 30.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 25.11.2011 22:38
Titel
|
|
|
|
Du deklarierst in der CSS-Datei zwar die Klasse „clearfix“, im HTML-Code ist sie aber im Root-Div nicht notiert.
|
|
| |
|
|
Penzoil
Threadersteller
Dabei seit: 25.11.2011
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Fr 25.11.2011 23:09
Titel
|
|
|
| Piki hat geschrieben: | | Du deklarierst in der CSS-Datei zwar die Klasse „clearfix“, im HTML-Code ist sie aber im Root-Div nicht notiert. |
Das soll es soweit ich das sehe auch nicht. Das main DIV soll das clearfix bekommen, bei mir ist das #wrap von http://www.cssstickyfooter.com das #root, sonst ist alles gleich. Ich hab die DOCTYPE Deklaration btw. voll vergessen, jetzt wird das Hintergrundbild dargestellt aber die Leiste sitzt nun in allen drei Browsern in der Mitte. ...wie verhext ^^ Ich hab vorsichtshalber eine zweite Seite erstellt um einfach mal zu schaun ob das http://www.cssstickyfooter.com überhaupt funktioniert und das tut es prächtig! Aber meine Leiste mag er nicht.
|
|
| |
|
|
Penzoil
Threadersteller
Dabei seit: 25.11.2011
Ort: -
Alter: 33
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit Footer
Footer Probleme
footer passt sich an browsergröße an?
[css] - Footer Problem
[wordpress] footer hochgerutscht?
E.Mail Header/Footer
|
|
Willkommen auf dem Portal für Mediengestalter
