✔ mal wieder Footer

schutzgeist · 28. September 2007

Hallo,

ich probier schon seit gestern an dem Footer (div Anschrift) rum und bekomms einfach nicht hin... entweder er passt sich 'komplett' an, sprich.. rutscht unter den Inhalt, obwohl die Seite nach unten noch Platz hätte oder er bleibt einfach starr am Seitenende bei Aufruf und steht beim scrollen dann fest so dass es darunter weiter geht...

Hier mal der Code..

CSS:

Code:

/* CSS Document */

html, body {
background: url(../img/bg.gif) repeat-y #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin:0;
padding:0;
height:100%;
}

#container {
position:relative;
margin:0 auto;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:100%; /* Mindesthöhe in IE (<7) */
}
#logo {
position: absolute;
top: 0;
left: 0;
width: 169px;
height: 117px;
background: #C7C5C5;
}
#header {
position: absolute;
top: 0;
left: 170px;
height: 117px;
width: 630px;
background: #345DA8 url(../img/header.jpg) no-repeat;
}
#language {
position: absolute;
top: 117px;
left: 0px;
width: 159px;
height: 20px;
color: #666666;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-align: right;
padding-right: 10px;
padding-top: 5px;
}
#language a {
color: #666666;
text-decoration: none;
}
#language a:hover {
color: #666666;
text-decoration: underline;
}
#language img {
padding-bottom: -1px;
}
#subnavi {
position: absolute;
left: 170px;
top: 117px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
height: 20px;
padding-top: 5px;
background: url(../img/bg_subnavi.gif) repeat-y;
text-align: right;
width: 623px;
padding-right: 7px;
}
#subnavi a {
color: #FFFFFF;
text-decoration: none;
}
#subnavi a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#navi {
position: absolute;
left: 0;
top: 144px;
width: 169px;
padding-top: 35px;
}
#navi img {
padding-bottom: 1px;
}
#navi ul {
margin: 8px;
margin-left: 12px; 
padding-left: 0px;
list-style: none;
}
#navi li {
margin-top: 15px;
margin-bottom: 15px;
}
#navi a {
color: #000;
text-decoration: none;
}
#navi a:hover {
text-decoration: underline;
}

#content {
position: absolute;
top: 144px;
left: 170px;
width: 485px;
line-height: 16px;
padding: 35px 100px 25px 45px;
background: url(../img/bg.jpg) no-repeat top;
height: 300px;
min-height: 300px;
}
#anschrift {
position:absolute;
bottom:0;
left:0;
width:159px;
height: 100px;
padding-left: 10px;
color: #666666;
background: #FF0000;
}
#anschrift a {
color: #666;
text-decoration: none;
}
#anschrift a:hover {
color: #666;
text-decoration: underline;
}

HTML:

<div id="container">
<div id="logo"></div>
<div id="header"></div>
<div id="language"></div>
<div id="navi"></div>
<div id="subnavi"></div>
<div id="content"></div>
<div id="anschrift"></div>  
</div>

Danke schonmal,
Gruß schutzgeist

Maik · 28. September 2007

Hi,

du musst in diesem Layoutkonzept für die übrigen DIVs die absolute Positionierung aufheben und stattdessen die nebeneinanderliegenden Bereiche mit der float:left-Eigenschaft auszeichnen:

Code:

#logo {
float:left;
margin-right:1px !important;
margin-right:-2px; /* 3px-Gap-Bug im IE */
width: 169px;
height: 117px;
background: #C7C5C5;
}

#header {
height: 117px;
width: 630px;
background: #345DA8 url(../img/header.jpg) no-repeat;
}

#language {
float:left;
margin-right:1px !important;
margin-right:-2px; /* 3px-Gap-Bug im IE */
width: 159px;
height: 20px;
color: #666666;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-align: right;
padding-right: 10px;
padding-top: 5px;
}

#subnavi {
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
height: 20px;
padding-top: 5px;
background: url(../img/bg_subnavi.gif) repeat-y;
text-align: right;
width: 623px;
padding-right: 7px;
}

#navi {
float:left;
margin-right:1px !important;
margin-right:-2px; /* 3px-Gap-Bug im IE */
width: 169px;
padding-top: 35px;
padding-bottom:100px; /* damit der Inhalt den Footer nicht unterwandert */
}

#content {
width: 485px;
line-height: 16px;
padding: 35px 100px 25px 45px;
background: url(../img/bg.jpg) no-repeat top;
min-height: 300px;
height:auto !important;
height:300px;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Code:

<div id="container" class="clearfix">
     <div id="logo">logo</div>
     <div id="header">header</div>
     <div id="language">language</div>
     <div id="subnavi">subnavi</div>
     <div id="navi">navi</div>
     <div id="content">content</div>
     <div id="anschrift">anschrift</div>
</div>

schutzgeist · 28. September 2007

Klasse, nach einigem rumgebastelt passts perfekt

schutzgeist · 28. September 2007

Ein Problem hab ich jetzt noch...

Der Header und die Subnavi werden im FF und IE6 richtig angezeigt.
Im IE7 rutschen die beiden Divs aber zu weit nach rechts...

CSS:

Code:

/* CSS Document */

html, body {
background: url(../img/bg.gif) repeat-y #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin:0;
padding:0;
height:100%;
}

#container {
position:relative;
margin:0 auto;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:100%; /* Mindesthöhe in IE (<7) */
}
#logo {
float:left;
margin-right:1px !important;
margin-right:-2px; /* 3px-Gap-Bug im IE */
width: 169px;
height: 117px;
background: #C7C5C5;
}

#header {
position: relative;
left: 170px !important;
left: auto ; /* IE */
height: 117px;
width: 630px;
background: #345DA8 url(../img/header.jpg) no-repeat;
}

#language {
float:left;
margin-right:1px !important;
margin-right:-2px; /* 3px-Gap-Bug im IE */
width: 159px;
height: 20px;
color: #666666;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-align: right;
padding-right: 10px;
padding-top: 5px;
}

#subnavi {
position: relative;
left: 170px !important;
left: auto ; /* IE */
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
height: 20px;
padding-top: 5px;
background: url(../img/bg_subnavi.gif) repeat-y;
text-align: right;
width: 623px;
padding-right: 7px;
}
#navi {
float:left;
margin-right:1px !important;
margin-right:-2px; /* 3px-Gap-Bug im IE */
width: 169px;
padding-top: 60px;
margin-left: -170px !important;
margin-left: -167px; /*IE */
padding-bottom:100px; /* damit der Inhalt den Footer nicht unterwandert */
}
#content {
float: left;
position: relative;
width: 485px;
line-height: 16px;
padding: 35px 100px 25px 45px !important;
padding: 35px 100px 25px 45px; /* IE */
background: url(../img/bg.jpg) no-repeat top;
min-height: 300px;
height:auto !important;
height:300px;
left: 0px !important;
left: 3px ; /* IE */
}

#anschrift {
position:absolute;
bottom:0;
left:0;
width:159px;
height: 100px;
padding-left: 10px;
color: #666666;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Anbei auch noch zwei Screenshots.. im IE6 wir alles verschoben, sobald man das Fenster kleiner zieht..

Maik · 28. September 2007

Code:

#header {
position: relative;
left: 170px;
height: 117px;
width: 630px;
background: #345DA8 url(../img/header.jpg) no-repeat;
}

Conditional Comment für die IEs:

Code:

<!--[if lte IE 7]>
<style type="text/css">
#header { left:1px; }
</style>
<![endif]-->

schutzgeist · 28. September 2007

Das sind dann wohl noch nie überbleibsen aus der ersten Version :suspekt:

Ich muss ehrlich gesehn, dass ich auch so langsam den Überblick verlier :suspekt:

Ich hab oben (wohl zeitlgeich wo du mir geantwortet hast) noch zwei Bilder angehängt.

Wie verhindert ich, dass das alles so verrutscht?

Maik · 28. September 2007

Versuch es mal hiermit:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_schutzgeist</title>

<style type="text/css">
<!--
html, body {
background: url(../img/bg.gif) repeat-y #EEEEEE;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin:0;
padding:0;
height:100%;
}
#container {
position:relative;
margin:0 auto;
width: 800px;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:100%; /* Mindesthöhe in IE (<7) */
}
#logo {
float:left;
width: 169px;
height: 117px;
background: #C7C5C5;
}
#header {
float:right;
height: 117px;
width: 630px;
background: #345DA8 url(../img/header.jpg) no-repeat;
}
#language {
float:left;
width: 159px;
height: 20px;
color: #666666;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
text-align: right;
padding-right: 10px;
padding-top: 5px;
}
#language a {
color: #666666;
text-decoration: none;
}
#language a:hover {
color: #666666;
text-decoration: underline;
}
#language img {
padding-bottom: -1px;
}
#subnavi {
float:right;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
height: 20px;
padding-top: 5px;
background: url(../img/bg_subnavi.gif) repeat-y;
text-align: right;
width: 623px;
padding-right: 7px;
}
#subnavi a {
color: #FFFFFF;
text-decoration: none;
}
#subnavi a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#navi {
float:left;
width: 169px;
padding-top: 35px;
padding-bottom:100px;
}
#navi img {
padding-bottom: 1px;
}
#navi ul {
margin: 8px;
margin-left: 12px;
padding-left: 0px;
list-style: none;
}
#navi li {
margin-top: 15px;
margin-bottom: 15px;
}
#navi a {
color: #000;
text-decoration: none;
}
#navi a:hover {
text-decoration: underline;
}
#content {
float:right;
width: 485px;
line-height: 16px;
padding: 35px 100px 25px 45px;
background: url(../img/bg.jpg) no-repeat top;
min-height: 300px;
height:auto !important
height:300px;
}
#anschrift {
clear:both;
position:absolute;
bottom:0;
left:0;
width:159px;
height: 100px;
padding-left: 10px;
color: #666666;
background: #FF0000;
}
#anschrift a {
color: #666;
text-decoration: none;
}
#anschrift a:hover {
color: #666;
text-decoration: underline;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="container" class="clearfix">
     <div id="logo">logo</div>
     <div id="header">header</div>
     <div id="language">language</div>
     <div id="subnavi">subnavi</div>
     <div id="navi">navi</div>
     <div id="content">content</div>
     <div id="anschrift">anschrift</div>
</div>

</body>
</html>

schutzgeist · 1. Oktober 2007

Klasse, vielen Dank

✔ mal wieder Footer

schutzgeist

Erfahrenes Mitglied

Maik

schutzgeist

Erfahrenes Mitglied

schutzgeist

Erfahrenes Mitglied

Anhänge

Maik

schutzgeist

Erfahrenes Mitglied

Maik

schutzgeist

Erfahrenes Mitglied

Neue Beiträge