Beiträge von NinaH

NinaH

Hier der Link: http://yh-webbutvecklare.se/yh09/

NinaH

Hallo! Ich habe ein Problem mit dem Aufbau einer Seite. Wer kann mir helfen, den Fehler zu finden warum der div #container nicht bis zum Seitenende läuft (hier orange), obwohl height: 100%? Dadurch sitzt auch der footer nicht am unteren Rand, sondern steht quasi mitten auf der Seite. Für Hilfe wäre ich sehr dankbar!! Hier mein Code:<!doctype html>
<html>
<head>
<title>Start PTM</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

* { margin:0;
padding:0;
}

#container { position: relative;
min-height: 100%;
height: 100%;
background-color: orange;}

#header { margin: 0px 0px 15px 0px;
background-color: #336666;
height: 100px;
width: 100%;
}
#headerBox { width: 960px ;
margin: auto;
}

#logo {
margin-top: 20px;
}
#headerRight { float: right;
margin-top: 10px;
}

#headerText { font-size: 0.8em;
color: #fff;
}
#headerRight a {text-decoration: none;
color: #fff;
font-family: arial, sans-serif;
font-size: 0.8em;
}
#headerRight a:hover { color: rgb(91,234,205);
}
#headerRight a:visited { color: #fff;
}
form {
margin-top: 4px;
}
input { height: 20px;
outline: none;}

button {height: 22px;
width: 50px;
}

#mainnav { margin-bottom: 10px;
}

#mainnav li {
float: left;
width: 240px;
height: 25px;
background-color: #2D3E4E;
text-align: center;
line-height: 25px;
font-size: 1em;
list-style-type: none;

}
#mainnav li a {
text-decoration: none;
display: block;
font-family: sans-serif;
color: #fff;
}

#mainnav li a:hover { background-color: #999;
}

#imgCenter { margin-top: 10px;
margin-bottom: 10px;

}
.maincontent { margin: auto;
width: 960px;
background-color: red;

}

#textLeft {background-color: #fff;
float: left;
padding: 8px;
width: 450px;
margin-right: 14px;

}

#textRight {background-color: #fff;
float: left;
padding: 8px;
width: 450px;
margin-left: 14px;

}

#imgRight {float: right;
margin: 0 4px 4px 10px;

}
#imgLeft {float: right;
margin: 20px 4px 4px 30px;

}

.text {font-size: small;
font-family: "Times New Roman";
color: gray;}
h3 {font-size: medium;
color: #242491;}

hr { margin: 8px 3px;
color: #ccc;
}

.footer { position: absolute;
bottom:0;
background-color: #336666;
width: 100%;
height: 30px;
font-family: sans-serif;
color: #fff;
font-size:0.6em;
text-align: center;
line-height: 30px;

}

</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="headerBox">
<img id="logo" src="bilder/logo2.png" width="167" height="47" alt="BILD" title="BILD" />

<div id="headerRight">
<p id="headerText"><a href="#">Lorem</a> | <a href="#">Ipsum</a> | <a href="#">Kontakt</a></p>

<form>
<input type="text" name="text" />
<button type="button">Suche</button>

</form>

</div>
</div>
</div> 
<div class="maincontent">
<div id="mainnav">
<ul>
<li><a href="#">START</a></li>
<li><a href="#">ABFAHRT</a></li>
<li><a href="#">VERSPÄTUNG</a></li>
<li><a href="#">S-BAHN</a></li>
</ul>
</div>

<img id="imgCenter" src="bilder/header_960.jpg" width="960" height="314" alt="BILD" title="BILD"/>

<div id="textLeft">
<h3>Curabitur</h3>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed magna porta,
bibendum eros a, tristique nisi. Quisque velit ipsum, tempor fermentum porta sed, porta
vitae ante. </p>
<hr>
<h3>Maecenas</h3>
<img id="imgLeft" src="bilder/springa_s.jpg" width="80" height="68" alt="BILD" title="BILD"/>
<p class="text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nunc vestibulum egestas dolor, et feugiat felis mattis sit amet. Quisque vitae lorem nec arcu viverra
dictum. Proin sit amet porta est, quis pharetra turpis. Nulla fermentum tincidunt augue, non rhoncus augue
aliquet quis. Ut nec fringilla.</p>
<hr>
</div>

<div id="textRight">
<h3>Quisque velit</h3>
<img id="imgRight" src="bilder/farligt_s.jpg" width="170" height="109" alt="BILD" title="BILD"/>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed magna porta,
sökord bibendum eros a, tristique nisi. Quisque velit ipsum, tempor fermentum porta sed, porta
vitae ante. Vivamus vitae felis interdum, rhoncus libero sed, fermentum dolor. Nunc et ultrices lectus.
Proin imperdiet leo nibh, eu vehicula orci aliquam eget. Donec in accumsan felis.</p>
<p class="text">Nunc iaculis suscipit arcu, id auctor elit. Nullam sit amet quam faucibus, ornare metus
faucibus, fermentum metus. Maecenas metus tortor, ullamcorper at pulvinar eget, volutpat id metus.
Fusce aliquet nunc sollicitudin quam tempus, viverra faucibus magna egestas. Vestibulum eget ipsum mi.
</p>
<hr>
</div>

</div>

<div class="footer">
<p id="footerText">© 2013 Lorem Ipsum</p>
</div>

</div> 
</body>
</html>

NinaH

Hallo!
Mein Problem: Der footer sitzt zwar am unteren Rand. Wenn ich aber das Fenster verkleinere und nach oben schiebe, wandert der footer mit nach oben. WARUM? Ich habe u.a. die äussere "Container-Box" auf position: relative gesetzt und footer position: absolute; bottom: 0.

Hier mein Code (bitte das Layout nicht weiter beachten!! Die Seite ist nur eine ÜBUNGSSEITE!). Wäre toll, wenn sich jemand den Code ansehen und den Fehler finden könnte! DANKE schon mal!

<!doctype html>
<html>
<head>
<title>Sticky footer</title>

<style type="text/css">

body, html { height: 100%;
}

* {margin: 0; padding: 0;}

#wrapper { position: relative;
margin: 0 auto;
min-height: 100%;
height: 100%; /* Für IE */
background-color: orange;}

#header { height: 200px;
border: 2px solid blue;
margin-bottom: 20px;
}

#content { margin: 0 auto;
width: 960px;
/*height: 100%;
background-color: silver;
}

#column1 { border: dotted 3px red;
background-color: #fff;
float: left;
width: 43%;
padding: 8px;
}

#spacer { backrground-color: orange;
float: left;
border: 1px solid;
background-color: orange;
width: 8%;}

#column2 { border: dotted 3px green;
background-color: #fff;
float: left;
width: 43%;
padding: 8px;
}

#footer { position: absolute;
bottom:0;
background-color: blue;
width: 100%;
}

</style>

</head>
<body>
<div id="wrapper">

<div id="content">

<div id="header">

<p>HEADER</p>

</div>

<div id="text">
<p id="column1">Text paragraph left. Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.Text paragraph left.</p>
<div id="spacer">SPACER</div>
<p id="column2">Text paragraph right.</p>
</div>

</div>

<div id="footer">

<p>FOOTER</p>

</div> 

</div> 
</body>
</html>

Beiträge von NinaH

Problem mit Footer / Container-Boxen

Problem mit Footer / Container-Boxen

Problem mit sticky footer (footer wandert nach oben)