✔ #Div zeigt kein background-image an

D

D3_signup

Grünschnabel
Servus !

Ich habe das Problem, dass mein #kopfbereich keine Hintergrundgrafik anzeigt
Weiß nicht woran es liegen kann?

Die CSS Datei
Code: 
*/* Stylesheet der "Little Boxes DVD */

  * { padding: 0; margin: 0; }
  
  h2, p, ul, ol { margin-bottom: 1em; }
  
  ol ul { margin-bottom: 0; }
  
  li { margin-left: 2em; }
  
body { 
  background-color: #353535; /* dunkles Grau */
  color: black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small;
}

}

h1 { font-size: 150%; }
h2 { font-size: 130%; }



a { 
  text-decoration: none; 
  outline: none;  
}

a:link { color: #d90000; } /* nicht besuchte Links */
a:visited { color: #cc6600; } /* besuchte Links */
a:hover, a:focus { border-bottom: 1px solid #d90000; } /* durchgezogener Ramen */
a:active { 
  background-color: #d90000;
  color: white;
}

#wrapper {
  background-color: #353535;
  color: black; 
  width: 660px;
  height:410px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -205px;
  margin-left: -330px; 
}

#kopfbereich {
  height:100px;
  width:650px;
  background-color: darkred;
  background-image: url (grafiken/headertsmll.jpg);
  border: 2px solid #000000;
}

#inhalt {
	margin-left:auto;margin-right:auto;
	height: 300px;
	width: 500px;
	top: 50%;
	left: 50%;
	background-color: #FFFFFF;
	border: 1px dashed #000000;
}

address {
  text-align: center;
  font-site: 80%;
  font-style: normal;
  letter-spacing: 2px;
  line-height: 1.5;
}

#fussbereich {
  padding: 10px 20px 20px 20px;
  border-top: 1px solid #353535;
  margin-top: 20px;
}

Die Index.html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Willkommen auf unserer HP! </title>
  
  <link href="mystyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body id="startseite">

<div id="wrapper">

<div id="kopfbereich" align="center">
<h1>Herzlich willkommen auf unserer Homepage!</h1>
</div>

<div id="inhalt" align="center">
..
</div>

</div>

</body>
</html>
 
Zuletzt bearbeitet:
Hi,

die Ursache findet sich in dem Leerzeichen zwischen url und der öffnenden (-Klammer.

mfg Maik
 
Oha ! Ja sauber vielen Dank!

Hätte da noch eine Frage. Wie bekomme ich es hin, das bei dem Text im Inhaltsbereich, links und rechts jeweils so 5 px Rand frei bleiben?
Oder kann man das garnicht festlegen?

Weil wenn ich da einen Text reinschreibe, füllt dieser den gesammten Bereich bis zum Schluss aus. Das sieht optisch natürlich sehr schlecht aus.
Wollte da nicht noch nen Spacer.gif erstellen.
 
Innenabstand:

CSS: 
#inhalt{
  padding-left: 5px;
  padding-right: 5px;
}

//Spacers braucht im Zeitalter von CSS keiner mehr :)
 
Also

padding-left: 5px;
padding-right: 5px;

Hatte ich auch schon versucht und da wurde der Bereich in der Tat breiter.
Welche Regel muss man denn da beachten? Bzw. wie errechnet man das?
Stehe hier gerade auf dem Schlauch :(
 
Das ist doch einfache Mathematik ;-)

CSS: 
#inhalt {
	margin-left:auto;margin-right:auto;
	height: 300px;
	width: 490px; /* 500px - 2*5px = 490px */
	top: 50%;
	left: 50%;
	background-color: #FFFFFF;
	border: 1px dashed #000000;
    padding:0 5px; /* Innenabstand oben-unten / links-rechts */
}

mfg Maik
 
:)
Ok jetzt schnall ich es. Bin in Sachen css noch nicht so fit.
Und der Wert 0 sorgt dafür das es unsichtbar bleibt oder woher kommt die 0.

Bin halt noch nen Anfänger *schäm*
 
Ich hab's doch kommentiert; der erste Wert "0" steht für den oberen und unteren Innenabstand.

Vielleicht solltest du dich mal grundsätzlich in die Materie einlesen: Stylesheets (CSS) ;)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück