Layout Problem

Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!

Zu der Infoseite von „Die Mo-Mo-Manie“

    Ich habe einen schweren Fehler:


    Fehler Screen


    Alle Bilder exsistiern, doch der Komplette Header und kein Bild wird angezwegt. Außerdem kein Margin...


    style.css

    CSS
    html,body {  font: 100% Arial, Helvetica, sans-serif;  color: #000000;  background-color: #ebebff;}#steuerung {  float: left;  margin-left: 10%;  width: 80px;   border: none;}#news {  float: right;  margin-right: 10%;  width: 80px;  border: none; }#content{  width: 60%;  margin-left: 20%  margin-right: 20%  margin: 1px;  border: none;}#content.middle_top {  background-image:url(mt.png) repeat-x;  border: none;  hight:8px;}#content.middle {  border: none;}#content.middle_bottom {  background-image:url(mb.png) repeat-x;  hight:8px;  border: none;}#content.open_c {  background-image:url(co.png) repeat-y;  width: 8px;  border: none;}#content.close_c {  background-image:url(cc.png) repeat-y;  width: 8px;  border: none;}#content.1 {  widht: 8px;  hight: 8px;  background-image:url(1.png) no-repeat;  border: none;}#content.2 {  widht: 8px;  hight: 8px;  background-image:url(2.png) no-repeat  border: none;}#content.3 {  widht: 8px;  hight: 8px;  background-image:url(3.png) no-repeat  border: none;}#content.4 {  widht: 8px;  hight: 8px;  background-image:url(4.png) no-repeat  border: none;}#header{  hight: 250px;  border: none;}#header.open{  width: 75%;  hight: 250px;  background-image:url(open.png) no-repeat;  border: none;}#header.close{  width: 25px;  hight: 250px;  background-image:url(close.png);  border: none;}#footer{  width:80%;  margin-left: 10%;  margin-right: 10%;  border: none;}#footer.open_f {  hight: 50px;  background-image:url(fo.png) no-repeat;  border: none;}#footer.close_f {  hight: 50px;  background-image:url(fc.png) no-repeat;  border: none;}#footer.middle_f {  background-image:url(fm.png) repeat-x;  hight:50px;  border: none;}#steuerung a:link, #steuerung a, #steuerung a:visited {  background:url("link.png") no-repeat;  width: 100px;  padding-left:6px;  height: 20px;  text-decoration:none;  display: block;  border: none;}#steuerung a:hover, #steuerung a:focus, #steuerung a:active {  background:url("hover.png") no-repeat;  padding-left:6px;  height: 20px;  text-decoration:none;  width: 100px;  display: block;  border: none;}a:link {  color: #0000FF;  text-decoration:none;}a:visited {  color: #0000FF;  text-decoration:none;}a:hover {  color: #FF0011;  text-decoration:none;}


    test.html


    php nicht beachen, außer es ist falsch ;)

    Validier mal dein HTML und dein CSS Code.
    Dein HTML-Code ist nämlich sehr fehlerhaft. Allein schon die ganzen Inline-Style-Angaben sind ganz normale HTML-Attribute. Heißt, du musst auch = als Zuweißungsoperator verwenden.

    Ich weiß nicht mal, ob das Attribut "background-image" überhaupt die Wiederholung umsetzt ;o
    und height war richtig geschrieben xD
    ich denke für die wiederholung solltest du "background-repeat" nehmen.
    Oder du machst es so:

    CSS
    #content.middle_top {
  background: transparent url(mt.png) repeat-x top left;
  border: none;
  height: 8px;
}

    So, ich hab mir das auch mal angeschaut. Ziemlich viele Fehler, ich hab mal den groeßten Teil verbessert. Das mit den Pfaden musst du nochmal selbst pruefen, ich weiß ja nicht, wie es in deinen Ordnern aussieht. Ich mach es mal im Spoiler.


    Im CSS habe ich folgendes verbessert. Also, die Angaben width und height waren fast alle falsch. Die hab ich nun verbessert. (Danke an "~Riku~") Dann hast du bei einigen vergessen im CSS anzugeben, das sie im background-image:url() in den Klammern die Anfuehrungszeichen einzusetzen. (Danke an "Meta Knight") Was mir noch aufgefallen ist, das du einige Bilder einfach nur 1.png, 2.png, 3.png etc. geschrieben hast. Das geht nicht, denn man kann zum Beispiel bei Pixelangaben wie bei width zum Beispiel schreiben 11.5 Pixel. Es ist dann wie ein Komma, also nur 11 einhalb. Die muesstest du dann zum Beispiel aa.png, ab.png, ac.png etc. nennen. Nun der HTML Code.


    Hier hast du glaube ich, fast ueberall zum Beispiel in td, table undso geschrieben: <td style:
    Das geht nicht, unter HTML musst du auch wenn du Style machen willst, ein = benutzen, und dann wie ueberall zwei "" verwenden, und dort kannst du dann alles unter CSS machen, sprich auch Doppelpunkte. (Danke an "Leon") Ich kann verstehen, das beim Programmieren von HTML und CSS immer solche Verwechslungsfehler auftauchen koennen. Dieses geht mir genauso. Sonst wieder widht statt width, und bei height genauso. Nun musst du noch die id's und class pruefen, ob die stimmen, ich hab in ihnen glaube ich keinen Fehler entdeckt. Einmal hab ich auch im style ein = gesehen, auch geaendert. Ich kann es nun bei mir nicht pruefen, kopier mal, und pruefe es. Denk noch an die 1.png's die du noch umbennen musst. Aber vielleicht irre ich mich auch, bloß daraus kenn ich das. Vielleicht lag es auch nur an den Ausfuehrungszeichen. Ich kann es natuerlich nicht pruefen, ich hoffe, ich konnte dir helfen.


    Liebe Grueße: Paul13

    Das da ziemlich viele Fehler drin sind, weiß ich xD
    Aber:
    ich lasse bei allen Bg-images die ich bezeichne die ' " ' weg, und meine Website sieht in allen Browsern (IE ausgeschlossen, der kenn keine Transparenz & wer mit dem Surft muss nicht mehr alle haben xD) gleich aus...
    Wenn du das Stylesheet in einem unterordner aufbewahrst, die bilder in einem anderen ordner, musst du relativ addressieren...
    also ->
    z.B.:
    Der style liegt im ordner "style", die bilder im ordner "img", dann müsste man, um ein Bild einzubinden, ja schreiben:

    CSS
    background-image: url(../img/bildname.endung);

    (ist HTML oder ordnerstrukturen der billigsten Ebene)
    Daran kanns natürlich liegen...

    IE kann auch mit Transparenzen umgehen.. du musst sie nur anders angeben..


    Also zumindest wenns um CSS Transparenzen geht..
    PNGs mit Alphatransparenz sind da so ne sache ;)

    :thumbsup:

    Yeah, hatte grade meinen 256. Beitrag :D Beim 512. wird dann aber richtig gefeiert :D

    Einmal editiert, zuletzt von Chris! ()