✔ Header Main Footer

Thomas_Jung

Thomas_Jung

Erfahrenes Mitglied
Hallo

Warum wird der Text Das ist das Ende am Ende der Schleife nicht mit angezeigt?
#main hat doch bottom:25px

Gruß Thomas


HTML: 
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; }

#header { position:fixed;	 left:0;    top:0;	  width:100%;  height:30px; z-index:5;   background-color: #ccc; overflow;hidden; }
#main 	{ position:relative; left:10px; top:35px; bottom:25px; width:90%;  height:100%; z-index:1; overflow;auto; }
#footer { position:fixed;	 left:0;    bottom:0; width:100%;  height:20px; z-index:5;   background-color: #ccc; overflow;hidden; }

</style>


HTML: 
<div id="main"><!-- MAIN START -->
<?php
for ($i=0;$i<2000;$i++) {
?>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<?php
}
?>
<div style="float:left; width:100%;">Das ist das Ende</div>
</div><!-- MAIN ENDE -->


<div id="header"><!-- HEADER START -->
<div style="float:left; width:100%;">HEADER</div>
</div><!-- HEADER ENDE -->

<div id="footer"><!-- FOOTER START -->
<div style="float:left; width:100%;">FOOTER</div>
</div><!-- FOOTER ENDE -->
 
Hi,

zeig doch bitte mal den geparsten PHP-Code, also was der Browser als HTML-Code ausgibt, denn mit dem Codesnippet wird besagter Inhalt angezeigt.

mfg Maik
 
Okay, hab's schon...

#main muß im Viewport absolut positioniert werden.

mfg Maik
 
Hi Maik
Im HTML-Code wird der Text ausgegeben aber nicht am Bildschirm.

Ich habe doch im #main bottom:25px angegeben da müßte er doch den Text anzeigen. Oder nicht ?

Gruß Thomas

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" type="text/css" href="start.css">
<title>Title</title>
<style>
* { margin: 0; padding: 0; }
html, body { height: 100%; }

#header { position:fixed;	 left:0;    top:0;	  width:100%;  height:30px; z-index:5;   background-color: #ccc; overflow;hidden; }
#main 	{ position:relative; left:10px; top:35px; bottom:25px; width:90%;  height:100%; z-index:1; overflow;auto; }
#footer { position:fixed;	 left:0;    bottom:0; width:100%;  height:20px; z-index:5;   background-color: #ccc; overflow;hidden; }

</style>
</head>
<body>

<div id="main"><!-- MAIN START -->
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>

<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>

...u.s.w 

<div style="float:left; width:100%;">ENDE</div>
</div><!-- MAIN ENDE -->


<div id="header"><!-- HEADER START -->
<div style="float:left; width:100%;">HEADER</div>
</div><!-- HEADER ENDE -->

<div id="footer"><!-- FOOTER START -->
<div style="float:left; width:100%;">FOOTER</div>
</div><!-- FOOTER ENDE -->



</body>
</html>
 
Code: 
html, body { height: 100%; overflow:hidden;}

#main         { position:absolute; left:10px; top:35px; bottom:25px; width:90%;   z-index:1; overflow:auto; }


mfg Maik
 
Hallo Maik

Durch das overflow:hidden; kann ich nun gar nicht mehr Scrollen?

html, body { height: 100%; overflow:hidden;}

Mein Code:

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" type="text/css" href="start.css">
<title>Title</title>
<style>
* { margin: 0; padding: 0; }

html, body { height: 100%; }

#header { position:fixed;	 left:0;    top:0;	  width:100%;  height:30px; z-index:5;   background-color: #ccc; overflow;hidden; }
#main 	{ position:absolute; left:10px; top:35px; bottom:25px; width:90%;   z-index:1; overflow;auto; }

#footer { position:fixed;	 left:0;    bottom:0; width:100%;  height:20px; z-index:5;   background-color: #ccc; overflow;hidden; }

</style>
</head>
<body>

<div id="main"><!-- MAIN START -->11
<?php
for ($i=0;$i<20;$i++) {
?>
<div style="float:left; width:100%;"><img src="images/notfound-error.png" width="256px" height="256px" alt="Bild" title="Bild" border=0><br><br><br></div>
<div style="float:left; width:100%;">HALLO<br><br><br></div>
<?php
}
?>
<div style="float:left; width:100%;">Das ist das Ende</div>
</div><!-- MAIN ENDE -->


<div id="header"><!-- HEADER START -->
<div style="float:left; width:100%;">HEADER</div>
</div><!-- HEADER ENDE -->

<div id="footer"><!-- FOOTER START -->
<div style="float:left; width:100%;">FOOTER</div>
</div><!-- FOOTER ENDE -->



</body>
</html>

Gruß Thomas
 
Ist auch kein Wunder:
CSS: 
#main { ... overflow;auto; }

Den Syntax-Fehler hatte ich meinem Code aber schon korrigiert.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück