online modus verschluckt background image

Pete · 19. Oktober 2015

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

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;
}

Alles anzeigen

.
.
.
Ich hoffe jemand kann mir weiterhelfen ...

MrMurphy · 19. Oktober 2015

Hallo,

entweder ist die Datei nicht hochgeladen

oder

der Pfadname stimmt nicht

Code

../pics/Kühe.jpg

vs.

Code

Kühe.jpg

oder

der Dateiname macht Probleme, hier das ü

oder

der Dateiname stimmt in Groß-/Kleinschreibung nicht mit der Angabe in der CSS-Datei überein.

Pfad-, Datei- und Ordnernamen sollten nur aus Buchstaben des englischen Alphabets, Zahlen und dem Unterstrich bestehen, das vermeidet viele Probleme im Vorfeld. Noch mehr Probleme werden vermieden wenn von den Buchstaben nur die Kleinbuchstaben verwendet werden, also die Kleinbuchstaben des englischen Alphabets, Zahlen und der Unterstrich.

Gruss

MrMurphy

Pete · 20. Oktober 2015

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.

CSS

/* 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;




}

Alles anzeigen

online modus verschluckt background image

Jetzt mitmachen!

Teilen