Fehler bei CSS

Toast · 8. Mai 2009

test.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><html><head><link href="style.css" type="text/css" rel="stylesheet" /></head><body><div id="header"></div><div id="steuerung"><a href="allgemein.html">Allgemein</a><br /><a href="news.html">Neuste&nbsp;News</a><br /><a href="aktionen.html">Aktionen</a><br/><a href="gewinnspiele.html">Gewinnspiele</a><br /><a href="spiele.html">Spiele&nbsp;Übersicht</a><br /><a href="dp.html">Diamant/Perl</a><br><a href="platin.html">Platin</a><br><a href="ranger2.html">Ranger&nbsp;2</a><br><a href="md2.html">Mistery&nbsp;Dungeon&nbsp;2</a><br /><a href="md3.html">Mistery&nbsp;Dungeon&nbsp;3</a><br /><a href="pokenews.html">Pokenews</a><br/><a href="impressum.html">Impressum</a><br/><a href="pb/index.php">Forum</a><br/><a href="jobs.html">Jobs</a><br/><a href="help_us.html">Unterstütze&nbsp;Pokenews</a><br /><a href="partner.html">Partner</a><br/><a href="links.html">Links</a><br/><a href="http://www.amazon.de">Amazon</a><br /></div><div id="inhalt"><a href="text.html">Test</a><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div><div id="fußzeile"><center>Pokenews.bplaced.de ist eine private Pokemon-Fanseite--<a href="impressum.html">Impressum</a><br/></center></div></html></body>

style.css

CSS

<style type="text/css">
  <!--
html, body {
  font: 100% Arial, Helvetica, sans-serif;
  background:url(hintergrund.png) repeat-x;
  background-color: #ffdcdc;
}


#steuerung {
  float: left;
  width: 150px;
  margin-bottom: 2px;
  margin-left: 10%;
  margin-top: 1px;
  padding: 0px;
  border: 1px solid black;
}


#inhalt {
  border: 1px solid black;
  width: 100%;
  margin-right: 10%;
  margin-left: 10%;
  padding: 2px;
  background:url(hintergrundcontent.png);
  margin-top: 1px;
}


#header{
  width: 100%;
  height: 250px;
  border: 1px solid black;
  margin-right: 10%;
  margin-left: 10%;
  background:url(hintergrundcontent.png);
  margin-top: 8px;
}


#fußzeile {
  border: 1px solid black;
  width: 100%;
  margin-right: 10%;
  margin-left: 10%;
  padding: 2px;
  background:url(hintergrundcontent.png);
  margin-top: 1px;
}


#steuerung a:link {
  background:url(link.png) no-repeat width: 180px;
  color: #ffffff;
  padding-left:11px;
  width: 400px;
  height: 19px;
  text-decoration:none;
  border: 1px solid black;
}


#steuerung a:visited {
  background:url(link.png) no-repeat width: 180px;
  color: #ffffff;
  padding-left:11px;
  height: 19px;
  text-decoration:none;
  width: 400px;
  border: 1px solid black;
}


#steuerung a:hover {
  background:url(hover.png) no-repeat width: 180px;
  color: #000000;
  padding-left:11px;
  height: 19px;
  text-decoration:none;
  width: 180px;
  border: 1px solid black;
}


#steuerung a:active {
  background:url(hover.png) no-repeat;
  color: #000000;
  padding-left:11px;
  height: 19px;
  text-decoration:none;
  width: 180px;
  border: 1px solid black;
}


a:link {
  color: #0000FF;
  text-decoration:none;
}


a:visited {
  color: #0000FF;
  text-decoration:none;
}


a:hover {
  color: #FF0011;
  text-decoration:none;
}


  -->
</style>

Alles anzeigen

Alle Bilddateien sind vorhanden, aber das Outcome sieht anders aus als es gecodet ist:

In der Steuerung haben die Links kein Hintergrund und der Hover ist Falsch. Außerdem ist der Content (div id="inhalt") unter der Steuerung anstatt links daneben.

Pls help.

Lithilion · 8. Mai 2009

kannst du mal dein layout reinstellen?
und was soll beim hover passieren?

Marv · 8. Mai 2009

Das ist nicht nötig.

CSS

#steuerung {
  float: left;
  width: 150px;
  margin-bottom: 2px;
  margin-left: 10%;
  margin-top: 1px;
  padding: 0px;
  border: 1px solid black;
}


#inhalt {
  border: 1px solid black;
  width: 100%;
  margin-right: 10%;
  margin-left: 10%;
  padding: 2px;
  background:url(hintergrundcontent.png);
  margin-top: 1px;
}

Alles anzeigen

Gecodet ist alles richtig.
Nimm mal die width bei Ihnalt raus xD
100% heißt, volle Seite, es kann also net daneben stehen :D

Toast · 8. Mai 2009

Das mite den breiten geht jetzt. Aber was ist der Fehler bei den Links?

Hier mal die Bilder:

link.png
[Blockierte Grafik: http://s6b.directupload.net/images/090508/gy6d7ygy.png]
19x180px

hover.png
[Blockierte Grafik: http://s1b.directupload.net/images/090508/vy43jht4.png]
19x180px

pls Help

Beim Hover soll das obere Hintergrundbild zum unteren werden und sich die Schriftfarbe von weiß zu schwarz ändern

Marv · 8. Mai 2009

ARg..

CSS

#steuerung a:hover {
  background:url(hover.png) no-repeat width: 180px;
  font-color: #000000;
  padding-left:11px;
  height: 19px;
  text-decoration:none;
  width: 180px;
  border: 1px solid black;
}

würde ich mal sagen..
Mit dem Bild kA, bin noch nicht so weit in meinen CSS buch xD

Lithilion · 8. Mai 2009

das bild musst du meiner meinung nach mit javascript machen!

Toast · 8. Mai 2009

Ne, das muss ich net mit Javascript machen. geht auch so Oo Habs mal mit 'background-image' probiert. Die Bilder werden ignoriert...

Okorin · 8. Mai 2009

Ich würde mal sagen...
Seit wann gehören HTML Tags in ein CSS Dokument o_O

CSS

html, body {  font: 100.01% Arial, Helvetica, sans-serif;  background:transparent url("hintergrund.png") repeat-x;  background-color: #ffdcdc;}#steuerung {  float: left;  width: 150px;  margin-bottom: 2px;  margin-left: 10%;  margin-top: 1px;  padding: 0px;  border: 1px solid black;}/* Die müsste funzen xD */#inhalt {  border: 1px solid black;  width: 100%;  margin: 0 10% 0 10%;  padding: 2px;  background-image:url("hintergrundcontent.png");  margin-top: 1px;}#header{/* Hier würde ich keine relativen Angaben nehmen, da ich aber nicht weiß, wie das BG bild aussieht, kann ich das erstmal so stehen lassen */  width: 100%;  height: 250px;  border: 1px solid black;  margin-right: 10%;  margin-left: 10%;  background:url("hintergrundcontent.png");  margin-top: 8px;/* Frage: wie ist der Header positioniert? */}#fußzeile {  border: 1px solid black;  width: 100%;  margin-right: 10%;  margin-left: 10%;  padding: 2px;  background:url("hintergrundcontent.png");  margin-top: 1px;}#steuerung a:link, #steuerung a, #steuerung a:visited {  background:url("link.png") no-repeat;width: 180px;  color: #ffffff;  padding-left:11px;  width: 400px;  height: 19px;  text-decoration:none;  border: 1px solid black;}#steuerung a:hover, #steuerung a:focus, #steuerung a:active {  background:url("hover.png") no-repeat;  color: #000000;  padding-left:11px;  height: 19px;  text-decoration:none;  width: 180px;  border: 1px solid black;}a:link {  color: #0000FF;  text-decoration:none;}a:visited {  color: #0000FF;  text-decoration:none;}a:hover {  color: #FF0011;  text-decoration:none;}

Mir fällt grad auf:
Niemals die

Code

- Zeichen vergessen :D

Toast · 8. Mai 2009

Die Ausrichtung und die Links gehen jetzt, aber i-wie greift er jetzt nicht auf den html, body tag zu.

style.css

CSS

<style type="text/css">


html, body {
  font: 100% Arial, Helvetica, sans-serif;
  background:url(hintergrund.png) repeat-x;
  background-color: #ffdcdc;
}


#steuerung {
  float: left;
  width: 150px;
  margin-bottom: 2px;
  margin-left: 10%;
  margin-top: 1px;
  padding: 0px;
  border: 1px solid black;
}


#inhalt {
  border: 1px solid black;
  margin-right: 10%;
  margin-left: 10%;
  padding: 2px;
  background:url("hintergrundcontent.png");
  margin-top: 1px;
}


#header{
  height: 250px;
  border: 1px solid black;
  margin-right: 10%;
  margin-left: 10%;
  background:url("hintergrundcontent.png");
  margin-top: 8px;
}


#fußzeile {
  border: 1px solid black;
  margin-right: 10%;
  margin-left: 10%;
  padding: 2px;
  background:url("hintergrundcontent.png");
  margin-top: 1px;
}


#steuerung a:link, #steuerung a, #steuerung a:visited {
  background:url("link.png") no-repeat;
  width: 180px;
  color: #ffffff;
  padding-left:11px;
  width: 400px;
  height: 19px;
  text-decoration:none;
}


#steuerung a:hover, #steuerung a:focus, #steuerung a:active {
  background:url("hover.png") no-repeat;
  color: #000000;
  padding-left:11px;
  height: 19px;
  text-decoration:none;
  width: 180px;
}


a:link {
  color: #0000FF;
  text-decoration:none;
}


a:visited {
  color: #0000FF;
  text-decoration:none;
}


a:hover {
  color: #FF0011;
  text-decoration:none;
}


</style>

Alles anzeigen

Mein Code imo. er hat jetzt aber ein "krüppelige" Font und i-wie übersieht er das hintergrund bild.

Außerdem wollte ich das sich bei den Links das Hintergrundbild über die Ganze Breite erstreckt, sie wird aber beim Textende abgeschnitten.

Pls Help

Okorin · 8. Mai 2009

Selber fehler wie zuvor...
mach bei

CSS

html, body {
background: url("hintergrund.png") repeat-x;
}

Dieses ' " ' Zeichen ist wichtig für css :D

Toast · 8. Mai 2009

Er ignoriert aber alle Codes die im html, body Tag stehen -.-

Screen:
-> http://s11.directupload.net/images/090508/tlo5ppfl.png

Das sich die Fußzeile und die Steuerung überlappen ist imo Kein Problem. Aber ich wollte noch wissen was man bei den Links machen muss um das Hintergrundbild über die Ganze Breite zu erstrecken, das Hintergrundbild wird immer beim Textende abgeschnitten.

**TimWolla** · 8. Mai 2009

Zitat von Meta Knight
Selber fehler wie zuvor...
mach bei
CSS
html, body {
background: url("hintergrund.png") repeat-x;
}
Dieses ' " ' Zeichen ist wichtig für css :D

Nope geht auch ohne.

@Wong Nimm mal nur body statt html, body

Okorin · 8. Mai 2009

vlt liegts auch daran, dass bei Mister Wong imma noch HTML Tags in der Css datei stehen /div/null? ;D

Toast · 8. Mai 2009

Nein ich hab keine HTML Tags in der CSS Datei mehr stehen. Außerdem gings auch mit denen -.-

@ Problem: Geht auch mit body { } net...

/Edit: Habs geschaft, waren doch noch HTML Tags drinn.

Aber wie kann ich machen das sich das Hintergrundbild über das ganze Bild erstreckt?

Fred · 8. Mai 2009

[CSS]
body {
background: url("hintergrund.png") repeat-x 100% 100%;
}
[/code]

sollte klappen ...

Toast · 8. Mai 2009

Das klappt schon ;)

Ich wollte wissen wie ich machen kann das sich der Hintergrund der Links im Steuerungsbereich über die ganze breite erstrekt, er wird immer nach dem Text abgeschnitten

Manuel · 8. Mai 2009

Versuchs mal mit display: block; ;)