Hilfe bei Testwebseite

indahouse · 29. Januar 2010

Hallo ich bin gerade dabei HTML und CSS zu lernen und habe nun mit dem Tutorial auf der HP versucht die Seite mit den Säulen nachzubauen.
Doch irgendwie ist das Bild doppelt und eins über dem anderen.
Hier mal die Seite: <a class="postlink" href="http://niki321.ni.funpic.de/">http://niki321.ni.funpic.de/</a>

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>Säulen</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="kopfbereich"><p>Säulen des 20.Jahrhunderts</p></div>
<div id="steuerung">Steuerung</div>
<div id="schatten"></div>
<div id="inhalt">der inhaltsbereich</div>
</body>
</html>

CSS:
html,body
#kopfbereich {
background: url(haus.jpg) no-repeat left top;
height: 150px;
margin:0;
padding:0;
}
#steuerung {
background-color: #DFCFB3;
padding-left:1em;
margin: 0;
padding: 0;
}
#schatten {
background: url(schatten.png) repeat-x; height:12px;
margin: 0;
padding: 0;
}
#inhalt {
background-color: blue;
padding-left:2em;
margin: 0;
padding: 0;
}
html, body {
font: 100% Arial;
}
#kopfbereich p {
color: white;
text-align: right;
font-size: 2em;
padding:0.4em 0.4em 0 0;
}

Ich hoffe ihr könnt mir helfen

Basi · 29. Januar 2010

Füge mal das in deine CSS Datei ein:

Code

* {
  margin:0;
  padding:0;
}

Am besten ganz oben.

indahouse · 29. Januar 2010

Danke das 2. Bild ist jetzt weg, aber ich habe immernoch diesen Bikinistreifen.

Basi · 29. Januar 2010

Was genau meinst du mit "Bikinistreifen" ?

indahouse · 29. Januar 2010

Dass das Bild nicht direkt oben und links am Rand ist.

Basi · 29. Januar 2010

Versuch mal:

Code

#kopfbereich {
  background:url(bilder/hg-saeulen-img-9599.jpg) no-repeat left top;
  height:150px;
}

indahouse · 29. Januar 2010

Zitat von "Basiii"

Versuch mal:

Code

#kopfbereich {
  background:url(bilder/hg-saeulen-img-9599.jpg) no-repeat left top;
  height:150px;
}

Klappt leider nicht.

Basi · 29. Januar 2010

Sorry, ich kann nicht guckn:

Code

* {
margin: 0;
padding: 0;
}




html, body { 
font: 100% Arial; 
} 




#kopfbereich { 
background: url(haus.jpg) no-repeat left top; 
height: 150px; 
margin:0; 
padding:0; 
} 




#steuerung { 
background-color: #DFCFB3; 
padding-left:1em; 
margin: 0; 
padding: 0; 
} 




#schatten { 
background: url(schatten.png) repeat-x; height:12px; 
margin: 0; 
padding: 0; 
} 




#inhalt { 
background-color: blue; 
padding-left:2em; 
margin: 0; 
padding: 0; 
} 




#kopfbereich p { 
color: white; 
text-align: right; 
font-size: 2em; 
padding:0.4em 0.4em 0 0; 




}

Alles anzeigen

So muss deine CSS Datei aussehen

indahouse · 29. Januar 2010

Danke jetzt hat es geklappt!

Basi · 29. Januar 2010

Wunderbar,

Fehler können am Anfang viele passieren, zum Beispiel hast du 2 mal html, body drinne gehabt, aber einmal nur mit einer { und das andere mal mit Schriftattributen,

so ein Quellcode wird schnell unübersichtlich, deshalb immer schön alle Attribute untereinander und nicht mit Kommentaren sparen, viele Absätze einbauen und fertig, dann kann nicht viel schief gehen und Fehler sind schnell gefunden.

Noch ein Tipp,

du kannst wenn du hier einen Beitrag schreibst oben auf Code klicken

[ code ] Hier dein Code [ /code ]

ergiebt dann:

Code

Hier dein Code

Das erleichtert uns das lesen.

Herzlich willkommen im Forum.

Hilfe bei Testwebseite

Jetzt mitmachen!

Teilen