Über*
Danke für die schnelle Antwort !
Der sticky footer ist kein Pronblem, allerdings hat der Inhalt einen anderen Hintergrund als der Body, deswegen ist zwar dann der footer sticky aber die Lücke zwischen Inhalt und footer immer noch ersichtlich (wenn nicht genug Inhalt vorhanden)
Habe ich dann nur die möglichkeit, die height entsprechend groß genug zu wählen, oder gibt es eine art height:auto - befehl ?
Hallo Zusammen,
ich habe folgendes Problem und komme einfach nicht weiter, ich möchte die Höhe des Contents meiner Webseite an den jeweiligen Monitor anpassen.
Jetzt ist es so das der Contetnt immer zu klein ist, also der auf der Mitte der Seite aufhört, stelle ich in der css datei "height:100%" ein, ist der content zu lang, so das man nach unten scrollen muss.
Ich würde gerne immer die richtige Größe einstellen können, egal für welchen Monitor.
Ich fachkundige Hilfe wäre ich begeistert 
html:
<!doctype html>
<html lang="de">
<head>
<title>Website in HTML 5 als direktes Beispiel</title>
<link rel=stylesheet type="text/css" href="cssfrage.css"> </link>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<p> </p>
</header>
<nav>
<ul>
<li><a href="1.html">Startseite</a></li>
<li><a href="2.html">Landwirtschaft</a></li>
<li><a href="3.html">Hofladen</a></li>
<li><a href="4.html">Sozialarbeit</a></li>
<li><a href="5.html">Ausbildung</a></li>
<li><a href="6.html">Energie</a></li>
<li><a href="7.html">Aktuelles</a></li>
<li><a href="7.html">So finden Sie uns</a></li>
<li><a href="8.html">Kontakt</a></li>
<li><a href="9.html">Impressum</a></li>
</ul>
</nav>
<div id="container">
<p> Inhalt </p>
</div>
<footer>
<p> webdesign: Bastian Lehmann
</p>
</footer>
</body>
<html>body, html { height:100%; margin: auto; width: 1000px; max-width: 1500px; text-align:center; background-color:#8fa670; #fff2cc}
header { margin:0; background-image: url("Kühe.jpg"); background-repeat: no-repeat; background-size:1000px; height:332px; border-top: 1px solid #fff;}
ul{ list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden;}li{ float: left;}a:link, a:visited { display: block; width: 11.10em; font-weight: bold; color: #FFFFFF; background-color: #487360; text-align: center; padding: 10px; text-decoration: none; text-transform: uppercase;}a:hover, a:active{ background-color: #de8d56;}#container { width: 100%; height:50%; background-color: white; position: relativ; margin-top:0; }
footer { width:100%; margin-top: -15px; position:realive; color:white; background-color:#487360;}Hallo Zusammen,
ich möchte gerne eine Slideshow mit wenigen Bildern in meinem Headder(mit html, css und js) realisieren.
Leider wechseln die Bilder nicht ineinander, sondern erst in den background und dann zum nächsten Bild!
kann mir jemand weiter helfen? 
<!DOCTYPE html>
<head>
<style type ="text/css">
#wss{
opacity:0;
-webkit-transition:opacity 1s linear 0s;
transition: opacity 1s linear 0s;
}
</style>
<script>
var wss_i = 0;
var wss_array = [
"<img src='pics/1.jpg'>",
"<img src='pics/2.jpg'>",
"<img src='pics/3.jpg'>",
"<img src='pics/4.jpg'>",
"<img src='pics/5.jpg'>"
];
var wss_elm;
function wssNext() {
wss_i++;
wss_elm.style.opacity = 0;
if(wss_i > (wss_array.length - 1)){
wss_i = 0;
}
setTimeout ('wssSlide()',1000)
}
function wssSlide() {
wss_elm.innerHTML = wss_array[wss_i]
wss_elm.style.opacity = 1;
setTimeout('wssNext()',8000);
}
</script>
</head>
<body>
<img id="wss"></img>
<script>
wss_elm = document.getElementById("wss"); wssSlide();
</script>
</body>
</html>Vielen Dank MrMurphy !
Es war tatsächlich das "ü"
Hallo Zusammen.
ich habe noch eine Frage zum gleichen Code und zwar habe ich das Problem, das auf größeren Monitoren: 1. der Footer nicht ganz unten ist und 2. der Background des contets nicht bis zum footer reicht, sondern mit dem Footer zusammen mittig auf der Seite aufhört.
Was muss ich in meinem Code ändern um einen stetig bottom-bündigen footer incl eines füllenden content backgrounds zu realisieren?
Es handelt sich um den Content in #main und #main1, in der hmtl Datei sind nur wenige Worte und einige Bilder. Ist der Content voll genug, dann scrolle ich nach unten und habe einen bottom-bündigen Footer, reicht der Contet nicht aus, dann ist der Footer mittig.
Mein Code ist noch sehr lang und weißt sicherlich einige Redundanzen auf, ich hoffe die Frage ist trotzdem gut verständlich.
/* allgemeines*/body {
margin: auto;
font-size:100%;
padding:0em;
width: 62.5625em;
max-width: 1500px;
height: 100%;
text-align:center;
background-color:#8fa670;
font-family: calibri light;
}
/*headder*/
header {
background-image: url("../pics/Kuhe.jpg");
width: 100%;
height:20.75em;
}
/*navigation*/
nav a:link, a:visited {
list-style-type: none;
display: block;
width: 11.1875em;
font-weight: bold;
color: #FFFFFF;
background-color: #487360;
text-align: center;
padding:0.625em;
text-decoration: none;
text-transform: uppercase;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
nav a:hover, a:active{
background-color: #de8d56;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
}
/*content area*/
#main {
background-color: #FFFACD; /*hsla(80,90%,95%,0.9);*/
width:100%;
max-width:1500px;
margin:0;
height:100%;
padding-bottom: 5em;
height: 60%;
}
#main1{
height: 100%;
background-color: #FFFACD;
color:black;
width: 100%;
padding-bottom: 2em;
}
...
/*footer*/
footer {
width:62.4375em;
position:relative;
bottom:0;
background-color:#487360;
clear: both;
margin:0em;
}
footer p {
color:white;
text-align:center;
color: white;
}
footer a {
color:white;
text-decoration:none;
}Hallo Zusammen,
ich verzweifele seit Tagen an folgendem Problem:
ich habe mir eine html/css webside gebastelt und im offline Modus funktioniert alles wunderbar. Sobald ich die html und css dateien hochlade mit einem FTP Programm wird mein background image meiner css datei in meinem header nicht mehr erkannt. Den Pfad habe ich entsprechend angepasst in ..url( "../pics/Kühe.jpg").
Also Offline: Bild, Nav, Inhalt, Footer. Online: Leer-Platz, Nav, Inhalt, Footer. Wie kann das sein?
HTML:
<!doctype html>
<html>
<head>
<title>Homepage</title>
<link rel=stylesheet type="text/css" href="style.css"> </link>
<meta charset="UTF-8">
<meta name="author" content="beispiel">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
</header>
<nav class="nav">
<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
<li><a href="Ausbildung.html">Ausbildung</a></li>
<li><a href="Energie.html">Energie</a></li>
<li><a href="Aktuelles.html">Aktuelles</a></li>
<li><a href="Sofindensieuns.html">So finden Sie uns</a></li>
<li><a href="Kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
<section id="main">
<h1> Wilkommen </h1>
<img src="rapsfeld.jpg" >
</section>
<footer>
<p> webdesign:
<a href="mailto:Beispiel@gmail.com">Beispiel</a> </p>
</footer>
</body>
<html>
CSS:
/* allgemeines*/
body {
margin: auto;
font-size:100%;
padding:0em;
width: 1001px;
max-width: 1500px;
height: 1000px;
text-align:center;
background-color:#8fa670;
font-family: calibri light;
}
h1{
font-size:2.5em;
line-height:3.8em;
font-weight:100;
font-family: calibri;
color: #487360;
margin: 0em;
text-align:center;
}
p {
margin:0;
font-family:calibri;
}
/*headder*/
header
background-image: url("../pics/Kühe.jpg");
width: 100%;
height:20.75em;
}
/*navigation*/
nav a:link, a:visited {
list-style-type: none;
display: block;
width: 11.1875em;
font-weight: bold;
color: #FFFFFF;
background-color: #487360;
text-align: center;
padding:0.625em;
text-decoration: none;
text-transform: uppercase;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
.
.
.
Ich hoffe jemand kann mir weiterhelfen ...