✔ footer mittem im Fenster beim scrollen

N

Necro_nomicon

Erfahrenes Mitglied
Hallo!

Beim Layout von Maiks Tutorial mit den drei Spalten gibt es ja einen header und einen footer.

Dieser ist mit folgenden Angaben versehen:
HTML: 
#footer {
position:absolute;
clear:both;
bottom:0;
width:100%;
height:74px;
}

Wenn ich nun den footer permanent sichtbar unten im Fenster haben will, muss ich dann position:relative; nehmen oder gibt es da noch andere Sachen zu beruecksichtigen.
Bei mir ist es dann so, das Teile des Inhalts dann nicht angezeigt werden am Ende der Seite. Auch nicht, wenn ich beim #centerCol margin: x x hoehe-footer x; eingebe.

Wenn ich die oberen Angaben habe mit position:absolute; dann wird der footer eingeblendet am Ende der Seite. Ist jedoch der Inhalt groesser und man scrollt nach unten, dann steht der Footer immer wieder mitten im Text drinnen.
 
Necro_nomicon hat gesagt.:
Beim Layout von Maiks Tutorial mit den drei Spalten gibt es ja einen header und einen footer.

Dieser ist mit folgenden Angaben versehen:
HTML: 
#footer {
position:absolute;
clear:both;
bottom:0;
width:100%;
height:74px;
}

Wenn ich nun den footer permanent sichtbar unten im Fenster haben will, muss ich dann position:relative; nehmen oder gibt es da noch andere Sachen zu beruecksichtigen.
Zum Vergrößern anklicken....
In diesem Fall ist position:fixed gefragt, damit der Footer beim Scrollen der Seite im Fenster "fixiert" sichtbar bleibt.
Necro_nomicon hat gesagt.:
Bei mir ist es dann so, das Teile des Inhalts dann nicht angezeigt werden am Ende der Seite. Auch nicht, wenn ich beim #centerCol margin: x x hoehe-footer x; eingebe.
Zum Vergrößern anklicken....
In diesem Fall benötigen die DIVs, die den Inhalt aufnehmen, einen unteren Innenabstand, der der Höhe des Footers entspricht, damit der Inhalt nicht unter dem Footer verschwindet.

Im Quellcode der herunterladbaren Beispiele findet sich auch die Regel:
CSS: 
div#leftCol, div#rightCol, div#centerCol {
padding-bottom: 25px;
}

mfg Maik
 
hm.OK.
Aber bei position:fixed wird bei mir im Inhalt ein Teil unten abgeschnitten. Das ist immer nur der Teil, der einen Editor einbindet und in einem <form>-Tag drinnen ist.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> 


<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie_fix.css">
<![endif]-->
<title></title>

<script type="text/javascript" src="js/styleswitcher.js"></script>


</head>

<body>

<center><h1>Überschrift</h1><center>

<table width="100%" cellpadding="0" cellspacing="0" style="margin:0px; border:0;">
<tr>
<td width="100%">
<div id="header">
	

</div>
<div id="leftCol">
			
		  Hauptmenue
</div>
<div id="centerCol">

            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td class="strich" colspan="2">
                                    Untermenue

                    </td>
                </tr>
                <tr>
                    <td class="h2bg" colspan="2">&nbsp;
                    </td>

                </tr>
                <tr>
                    <td valign="top">
                        <!-- INHALT -->
                            <table cellspacing="0" cellpadding="0" border="0" class="inhalt">

                                <tr>
                                    <td>
                                        <div class="contentpadding">

<h1>Kontakt</h1>
<table cellspacing="12" cellpadding="5" border="0">

    <tbody>
        <tr><td>Inhalt</td></tr>
    </tbody>
</table>

<h1>EDITOR</h1>
<form name="form2" method="post" action="">
<input name="id" type="hidden" value="71">
<input type="hidden" id="thearticle" name="thearticle" value="" style="display:none" /><input type="hidden" id="thearticle___Config" value="" style="display:none" /><iframe id="thearticle___Frame" src="fckeditor/editor/fckeditor.html?InstanceName=thearticle&amp;Toolbar=ePages" width="100%" height="500px" frameborder="0" scrolling="no"></iframe>  <input type="submit" name="Preview" value="Preview">
  <input type="submit" name="Update" value="Update">
</p>
</form>

                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td valign="top" class="rechteSpalte">
Bild rechts

                        </td>
                    </tr>
            </table>

</div>
<div id="rightCol">
</div>
<div id="footer">
	Footer hoehe 45 px</div>







</td>
</tr>
</table>

</body>
</html>

## EDIT ##
Sorry, ja, das mit dem padding funktioniert. Habe vergessen, dass ich bei
div#centerCol den margin von utnen eignetragen hatte, was aber ja mit dem padding geloest wurde!.
 
Dein Markup hat mit meinen funktionstüchtigen Beispielen aber nicht viel gemeinsam :p

Denn wozu nutzt du anstelle des DIVs #wrapper eine Tabelle, wo diese hierfür semantisch doch überhaupt nicht vorgesehen ist? :suspekt:


mfg Maik
 
Naja...das hat viele Gruende, das mit der Hoehe ist eines, dann auch dass ich die Breite angeben kann vom Inhalt und trotzdem die gesamte Breite der Seite sich immer an die Fenstergroesse anpasst...

wie du dich erinnern kannst, war das ja schon einmal ein langer thread wie es um die liquid Breite aber fixe Inhaltsbreite gegangen ist.
Mir schien es, als gab es damals keine Loesung dafuer, aber wenn du eine weisst, waere natuerlich toll.
 
Wollte das gleiche (fixer Footer unten am Fenster) nun auch bei einem anderen Beispiel durchfuehren und habe wie oben folgendes geaendert:

HTML: 
#footer {position:fixed;}

dic#leftCol, dic#rightCol, div#centerCol {padding-bottom: 131px;} /* Hoehe des Footers */

allerdings ist der Footer auch wenn die Seite laenger ist, also mehr Inhalt hat jetzt nicht permanent eingeblendet.
Check es nicht:(
 
Code: 
dic#leftCol, dic#rightCol, div#centerCol {padding-bottom: 131px;} /* Hoehe des Footers */

Anstelle des "c" muß dort ein "v" stehen.

Sollte dies das Problem nicht lösen, wirst du mehr Einblick in deinen HTML- und CSS-Code gewähren müssen (bitte keinen PHP-CODE, wie im anderen Thread!), denn anhand deines CSS-Schnipsels lässt sich derzeit nicht viel dazu sagen.

mfg Maik
 
Nein, das mit dem "dic" statt "div" ist mir beim tippen passiert, sorry!

Hier mehr code. Ich dachte es wuerde nur an den #footer-Angaben liegen und weniger code waere damit uebersichtlicher. Aber hier mehr:

HTML: 
#header img {display:block;}

ul {margin-left:30px;}

p {line-height:14pt; /* 12-14-16 */
margin:0 0 10px 0;
color:#000000;}


.blau {color:#2e8dbc;}

.blau2 {color:#2e8dbc; 
font-weight:bold; }

.fett {font-weight:bold;}

.imgrand {margin-bottom:25px; 
border-color:#38a9e1; 
border-style:solid; 
border-width:3px;
}



/*** ::::::::::::::: LINKS ::::::::::::::::::: ***/

a:link, a:hover, a:visited, a:active {
color:#2e8dbc;
text-decoration:underline;}


/*** :::::::::::::::    Navigation (Haupt)   :::::::   ***/

ul#nav1 {
list-style-type:none;
margin:0;
padding:0;
width:200px;}

ul#nav1 a, ul#nav1 a:visited, ul#nav1 a:active {
text-decoration:none;
display:block;
width:200px;
text-indent:0px;
font: normal 10pt Verdana, Arial, sans-serif;
border-bottom: 1px solid #999999;}



#nav1 li {
margin:0px;
height:20px;}


ul#nav1 li.mainmenu a, ul#nav1 li.mainmenu a:visited, ul#nav1 li.mainmenu a:active {
text-indent:10px;
color:#000000;}

	
ul#nav1 li.submenu a, ul#nav1 li.submenu a:visited, ul#nav1 li.submenu a:active {
text-indent:10px;
color:#666666;
width:180px; 
margin-left:20px;
}

/* Selected - active */	

ul#nav1 li.mainmenuactive a, ul#nav1 li.mainmenuactive a:visited, ul#nav1 li.mainmenuactive a:active, ul#nav1 li.submenuactive a, ul#nav1 li.submenuactive a:visited, ul#nav1 li.submenuactive a:active {
color:#2e8dbc;
font-weight:bold;}

ul#nav1 li.mainmenuactive a, ul#nav1 li.mainmenuactive a:visited, ul#nav1 li.mainmenuactive a:active,  ul#nav1 li.mainmenuactive a:hover {
text-indent:10px;}

ul#nav1 li.submenuactive a, ul#nav1 li.submenuactive a:visited, ul#nav1 li.submenuactive a:active,  ul#nav1 li.submenuactive a:hover {
text-indent:10px;
width:180px; 
margin-left:20px;}



/* HOVER */

ul#nav1 li.mainmenu a:hover, ul#nav1 li.mainmenuactive a:hover, ul#nav1 li.submenu a:hover, ul#nav1 li.submenuactive a:hover {

background-color:#f0e5cd;}


/*** :::::::::::::::  FOOTER ADRESSZEILE ::::::::: ***/


.adresse {

background-position:50%;
background-image: url(img/adresse/leiste_unten_05.gif);
background-repeat:no-repeat;
background-color:#ffcc66;
height:19px;
}

	

/*** :::::::::::::::    CSS-LAyOUT AUFBAU     :::::::::::::::::: ***/



* { 

margin: 0;

padding: 0;

font: normal 10pt verdana, sans-serif;

}



body {

}



div {

text-align: left; 

}



html, body {

height: 100%; }



html {overflow:auto; /* damit kein leerer Scrollbalken ist */}



body {

background-image:url(img/bg4_02.jpg);
background-position:0px 104px; }

/* DIV-Boxen */

div#wrapper {
position: relative; 
margin: 0 auto;
width: 100%; 
min-height: 100%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 100%; /* Mindesthöhe in IE (<7) */
min-width: 1080px;}



div#header {
height: 172px; 
background: #000000;
background-image:url(img/bg/bg_02.jpg);
background-repeat:repeat-x;
background-position:517px 0px;
}



div#leftCol {
width: 200px; 
float: left;
margin-top:0px; 
margin-left:0px;}


div#rightCol {
width: 1px;
float: right; 
margin:0;}


div#centerCol {
margin:-23px 0px 0px 225px; 
/* padding:0 0 131px 0; */
height:1%; /* hasLayout-Fix fuer IE */
}


div#footer {
clear: both;
position: fixed;
bottom: 0;
width: 100%; 
height: 131px; 
background-image:url(img/bg/bg4_03.jpg);
background-repeat:repeat-x;
background-position:1109px 0px; 
}


#footer img { display:block; } /*** kein Rand zwischen den Zeilen bei Bilder ***/


div#leftCol, div#rightCol, div#centerCol {padding-bottom:131px;}



/* clearfix zum Aufheben der Floatumgebung */


.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 */

.hinter {
	background-image:url(img/hintergrund.jpg);
	background-repeat:no-repeat;	}

HTML: 
<!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">
<title></title>
</head>

<body>

<div id="wrapper" class="clearfix">
     <div id="header"> <img src="img/bg/bg4_01.jpg" width="517" height="172"> </div>
     <div id="leftCol">
			<ul id="nav1">
				<li class="mainmenu"><a href="index.html">Home</a></li>
				
			</ul>
	</div> 
	 			
			
     <div id="rightCol">
	 	
	 </div>
	
    <div id="centerCol">
	Inhalt
  </div>
     <div id="footer">
	 
	 	
	  <img src="img/bg/bg4_10.jpg" width="1109" height="130"> 
	 	
  </div>
</div>



</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück