Footer verschieben wenn der Inhalt größer wird.

Dieses Thema im Forum "Webentwicklung" wurde erstellt von klaxx, 23. September 2008 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 23. September 2008
    Huhu,

    ich habe schon wieder nen makel an meiner Seite Ich hab den Footer bis jetzt bei 1500px fest positioniert. Falls irgendeine Seite größer wird, wird der Footer überschrieben?

    Wie kann ich das ändern? :/ Fette Eule Production
    Hier mein Code:

    index.php
    Code:
     <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>Fette Eule Production</title> 
 <link href="style.css" rel="stylesheet" type="text/css" /> 
 <link href="step_2.css" rel="stylesheet" type="text/css" /> 
 <link rel="shortcut icon" href="images/favicon.ico" /> 
 <style type="text/css">
<!--
.Stil1 {color: #007DE2}
body {
 background-repeat: no-repeat;
}
-->
 </style>
</head> 
 
 <body>
 

 <div id="main"> 
 <div class="container">
 <div id="header"> 
 <ul id="menu"> 
 <li><a href="index.php?site=home"><strong>Home</strong></a></li> 
 <li><a href="index.php?site=news">News</a></li> 
 <li><a href="index.php?site=about">About</a></li> 
 <li><a href="index.php?site=team">Team</a></li> 
 <li><a href="index.php?site=imprint" target:">imprint</a></li> 
 </ul> 
 </div>
 <div id="logo"> 
 <h1>Fette Eule Production</h1> 
 <small>a friendship project of young people</small> 
 </div> 
 
 <div style="position:absolute; width:950px; height:17px; top:221px; left:0px; overflow: visible;" class="container">
 
 
<?php
 $site = $_GET['site'];
 if (!isset($site))
 {
 $site = "home";
 }
if (file_exists($site.".php"))
 {
 include($site.".php");
 }
 else 
 {
 $site = "404";
 include($site.".php");
 }
?>
 </div>
 </div>
 </div>
 </div>
 <div id="footer"> 
 <div class="footer_column long"> 
 <h3>Designed by klaxx &copy; 2007-2008 by Fette Eule Production</h3>
 <p>We are looking for funny people who wants to play in a movie like Bloodlords and the upcoming project &quot;Zombie&quot;. Contact Mr. klaxx for informations..</p>
 </div> 
 <div class="footer_column"> 
 <h3>More Links</h3> 
 <ul> 
 <li><a href="http://klaxx-design.com">klaxx Design</a></li> 
 <li><a href="http://videocopilot.net">Video Copilot</a></li> 
 <li class="Stil1">link of our sponsor?</li> 
 <li class="Stil1">link of our sponsor?</li> 
 </ul> 
 </div> 
 <div class="footer_column"> 
 <h3>RSS</h3> 
 <ul> 
 <li><a href="">in programing</a></li> 
 <li><a href="">in programing</a></li>
 <li><a href=""></a></li> 
 </ul> 
 </div> 
 </div> 
 </div> 
 </div> 
 </body> 
</html>
    Meine .css datei:
    Code:
    @charset "UTF-8"; // guck mal MurDoc son dummes @charset :D
/* Background-Styles */

body {
 margin:0px; padding:0px;
 background-color:#131211;
 font-family:Arial, Helvetica, sans-serif; 
 color:#7f7d78; 
 font-size:13px; 
 line-height:19px; 
}
#main {
 background-image:url(images/background_light.jpg);
 background-repeat:no-repeat; 
 /*background:#c4c0be url(images/background_light_slice.jpg) repeat-x;*/
}
#main .container {
 min-height:1500px;
}
#footer {
 background-image:url(images/background_footer.jpg);
 background-repeat:repeat-x;
 color:white;
 padding:40px;
}

.container {
 width:950px;
 margin:0 auto;
 position:relative;
}
/* Fix up IE6 PNG Support */ 
img, #logo { 
 behavior: url(scripts/iepngfix.htc); 
 } 
 
/* 
 Block-Styles 
*/

.block {
 border:1px solid #a3a09e;
 margin-bottom:20px;
}
.block_inside { 
 display:block; 
 border:1px solid #ffffff;
 /*background: #ffffff url(images/background_block_slice.jpg) repeat-x;*/ 
 padding:30px;
 overflow:auto;
}

.image_block {
 border:1px solid #b5b5b5;
 
 padding:5px;
 float:left;
}
.image_block img {
 border:1px solid #b5b5b5;
}
.text_block {
 float:left;
 width:430px;
 margin-left:30px;
}
 /* 
 Text-Styles 
 */ 
 
 h2 { 
 margin:0px 0px 10px 0px; 
 font-size:36px; 
 font-family:Helvetica, Arial, Sans-serif; 
 color:#08c0c5; 
 } 
 small { 
 color:#595856; 
 font-weight:bold; 
 font-size:11px; 
 display:block; 
 margin-bottom:15px; 
 } 
 a { 
 color:#007de2; 
 text-decoration:none; 
 } 
 a:hover { text-decoration:underline; } 
 p { margin: 0px 0px 15px 0px; } 
 
 a.button { 
 background:#32312f url(images/button_bg.jpg) repeat-x; 
 padding:5px 10px 5px 10px; 
 color: #ffffff; 
 text-decoration: none; 
 border:1px solid #32312f; 
 text-transform:uppercase; 
 font-size:9px; 
 line-height:25px; 
 } 
 a.button:hover { 
 background:#007de2 url(images/button_bg_o.jpg) repeat-x; 
 border-color:#007de2; 
 }
 /* 
 Portfolio-Home-Styles 
 */ 
 
 #block_portfolio { 
 overflow:auto; 
 margin-bottom:20px; 
 } 
 #portfolio_items { 
 width:615px; 
 margin-right:25px; 
 float:left; 
 
 } 
 #text_column { 
 float:right; 
 width:310px; 
 } 
 #text_column h2#text_title { 
 text-indent:-9999px; 
 background-image:url(images/creatif.jpg); 
 background-repeat:no-repeat; 
 width:310px; 
 height:129px; 
 } 
 
 .mini_portfolio_item { 
 border:1px solid #a3a09e; 
 margin-bottom:10px; 
 
 } 
 .mini_portfolio_item .block_inside { 
 background:none; 
 padding:25px 30px 15px 30px; 
 } 
 .mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }
 
 /*
 Footer-Styles
*/

#footer {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
}
.footer_column {
 float:left;
 width:120px;
 margin-right:30px;
}
#footer .long {
 width:610px;
}
#footer h3 {
 color:#e2dddc;
 text-transform:uppercase;
 font-size:10px;
}
.footer_column ul li, .footer_column ul {
 list-style:none;
 margin:0px;
 padding:0px;
}
    thx im vorraus fürs durchkauen
     
  3. 23. September 2008
    AW: Footer verschieben wenn der Inhalt größer wird.

    hiho, ich schon wieder

    dein footer sollte sich von selber verschieben

    //edit: position:absolute; -> nur verwenden wenn man wirklich einen layer haben will, in deinem fall brauchst du keinenlayer. (ein layer is sowas wie die werbung von layer-ads)
     
  4. 23. September 2008
    AW: Footer verschieben wenn der Inhalt größer wird.

    sag mal bin ich doof xD wo haste das absolute denn jetzt ausgegraben?
    das?
    Code:
    <div style="position:absolute; width:950px; height:17px; top:221px; left:0px; overflow: visible;" class="container">
 
 
<?php
 $site = $_GET['site'];
 if (!isset($site))
 {
 $site = "home";
 }
if (file_exists($site.".php"))
 {
 include($site.".php");
 }
 else 
 {
 $site = "404";
 include($site.".php");
 }
?>
 </div>
     
  5. 23. September 2008
    AW: Footer verschieben wenn der Inhalt größer wird.

    Try this: http://for3stgump.fo.funpic.de/index.php?site=index

    Du hast noch eine Sicherheitslücke.... Ich will gar nicht wissen wo noch überall php files rumliegen hast die ich finden kann

    $_GET['site'] is not validated

    Fix das mal. Wie verrate ich dir nicht, da du das am besten selbst rausfindest, um es zu verstehen.
     
  6. 23. September 2008
    AW: Footer verschieben wenn der Inhalt größer wird.

    hat einfach nix mit meinem problem zu tun oder?

    EDIT: margin-bottom: 10px; Des rätsels lösung wenn man sich mal hiermit befasst.

    Ich bin so stolz auf mich *hrhr*

    Close
    Auf zum nächsten Problem, das mit der Sicherheitslücke xD
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.