[CSS] Achtergrond haalt onderkant pagina niet! (footer) - Softwareontwikkeling

donderdag 28 augustus 2008 21:13

Acties:

Verwijderd

Topicstarter

De website heb ik nu zo gemaakt dat onderin de browser eindigd met een footer (sticky-footer).
Helaas wanneer de inhoud van de pagina groter is dan de browser en dus moet scrollen blijft de schaduw achter.
Hier kan ik echter maar geen oplossing voor verzinnen om dit toch zo te realiseren.
Kan iemand mij hier misschien aangeven waar het mis gaat?

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
  height: 100%;
  background-image: url('achtergrond.png');
  background-position: center;
  margin:0; 
  padding:0; 
  border:0;
  }

body {
  height: 100%;
  background-image: url('schaduw.png');
  background-repeat: repeat-y;
  background-position: center;
  margin:0; 
  padding:0; 
  border:0;
}

#container {
  position: relative; 
  min-height: 100%; 
  background-image: url('content_bg.png');
  background-position: top left;
  margin:auto; 
  width:900px;
  color: white;
  }
  
* html #container {
  height: 100%;
  }
    
#header {
  width:900px; 
  height:198px; 
  margin:auto; 
  background-color:#ECECEC; 
  }
    
#maincontent {
  background-image: url('content.png');
  background-repeat: repeat-x;
  background-position: top left;
  vertical-align:top;
  padding-bottom: 30px;
  margin: -19px auto 0 auto;
  }

#footer {
  width:900px; 
  height: 30px; 
  background-image: url('footer.png');
  background-repeat: repeat-x;
  position: relative; 
  margin: -30px auto 0 auto;
  font-size: 10px;
  font-family: Verdana;
  color: #C0C0C0;
  } 

#home {
  float: left;
  }

#inloggen {
  margin-left: 20px;
  float: right;
  }

input.name {
  height: 21px;
  width: 94px;
  border: 0px;
  background-image: url('input.png');
  background-repeat: no-repeat;
  background-position: center;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: Lucida Console, Courier New, Verdana;
  color: #C0C0C0;
  }

input.ok{
  height: 21px;
  width: 24px;
  border: 0px;
  background-image: url('ok.png');
  background-repeat: no-repeat;
  background-position: center;
  color: #C0C0C0;
  font-size: 10px;
  font-family: Verdana;
}

</style>
</head>

<body>
        <div id="container">
            <div id="header">Header</script></div>
            <div id="maincontent">
                    Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>Hallo<br><br>   
            </div>
        </div>
    <div id="footer">
            <div id="home"><a href="index.php">home</a></div>
            <div id="inloggen">
            gebruikersnaam:<input class="name" type="text" maxlength="11" name="username">
            wachtwoord:<input type="password" class="name" maxlength="11" name="password">
            <input type="submit" class="ok" name="submit" value="OK">
            </div>
    </div>
</body>
</html>

donderdag 28 augustus 2008 21:23

Acties:

Tomfish

Waarom geef je de #maincontent geen shadow.png mee?

donderdag 28 augustus 2008 21:28

Acties:

Verwijderd

Topicstarter

Xtresis schreef op donderdag 28 augustus 2008 @ 21:23:
Waarom geef je de #maincontent geen shadow.png mee?

Deze zit binnen de container die 900px breed is en de schaduw moet er buiten vallen.
Vandaar dat ik hem aan "body" heb meegegeven.

vrijdag 29 augustus 2008 08:48

Acties:

marty

het komt door je height: 100%;
de browser tekent je body nu precies tot 100% van de hoogte van het scherm en de achtergrond dus ook. De content kan daar wel overheen gaan, maar de body zal toch ophouden na 100% van de schermhoogte.

vrijdag 29 augustus 2008 08:58

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

in plaats van de BODY kun je beter een algemeen container-element gebruiken en dat 'min-height 100% geven...

daarmee voorkom je ook problemen optrend de twee verschillende background-images die je toepast op HTML en BODY .... eigenlijk mogen Browsers HTML niet renderen als visueel element, dat is het namelijk niet, hooguit is het zo dat browsers de viewbox door CSS ook laten aanspreken via HTML, waarbij volgens mij sommige browsers hetzelfde viewbox/document-element dan aanpassen

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen