seminar: css lernen - Website-Layout mit Float, DIVs, CLASS

  • nabend zusammen.


    Bei dem html/css Seminar bin ich auf ein Problem gestoßen welches ich nicht lösen kann.
    Bei dem Schritt "Website-Layout mit Float, DIVs, CLASS" soll man eine Menuleiste und einen Inhalt erstellen welcher dann so aussehen soll.
    [attachment=1]<!-- ia1 -->float r.jpg<!-- ia1 -->[/attachment]


    Der dazu gehörige code (laut Toturial)


    Bei mir sieht es aber wie folgt aus.
    [attachment=0]<!-- ia0 -->float f.jpg<!-- ia0 -->[/attachment]
    Ich versuche das ganze mit einer ausgelagerten CSS zu gestalten.
    Der Code der HTML:


    und der CSS:


    Selbst wenn ich den Code aus dem tut 1:1 übernehme wird es nicht korrekt angezeigt.


    Weiß jmd Rat?


    Greetz mude

  • Interessanter Lösungsweg O.o
    Also spontan würde ich dir dazu raten die Liste in div zu setzten.
    Wenn die Liste als erstes in dem Div steht und ein float: left; bekommt, sollte es korrekt dargestellt werden :)

  • Ob der Code aus dem HTML-Seminar richtig angezeigt wird hängt vom verwendeten Browser ab.
    Firefox, Chrome und Safari zeigen es so an, wie es im HTML-Seminar steht, während Opera und der Internet-Explorer (IE8) die Boxen nebeneinander anzeigen (also so, wie es bei dir aussieht).


    Ich denke, dass liegt an dem fehlenden Seitenaufbau, da der Code aus dem HTML-Seminar um Doctype und den Tags html, head und body ergänzt, in allen Browsern richtig angezeigt wird. Dein Code wird, da er diese Sachen schon enthält, auch überall richtig angezeigt.


    Ich habe dir mal ein Bild davon gemacht:
    [attachment=0]<!-- ia0 -->Unbenannt.JPG<!-- ia0 -->[/attachment](von oben: Firefox, Chrome, Safari, Opera, Internet-Explorer; links: original, rechts: mit Aufbau)

  • jau :)


    Vielen Dank für die schnelle Hilfe. Ich hatte es im FF garnicht erst probiert, da es mir bei der Vorschau funktion von "Scriptly" nicht korekt angezeigt wurde. Gut zu wissen dass es also auch am browser liegen kann. Und ebenfalls gut einen weiteren grund zu kennen warum man Mozilla nutzt ;)


    Aber ist es denn grundsätzlich ok die Klassen und ID´s (also das was damit geschehen soll) in die css zu packen? Sie gehören ja (für mich zumindest) zum design/layout/aufbau oder wie auch immer man es nennen möchte. Oder sollte man diese lieber wie im tutorial direkt auf die seite packen?

  • Ja, dass mit den unterschiedlichen Browsern wird noch lustig :P Besonders der IE ist da gaaaanz lustig :D


    Das Design (css) ist die Eine Sache, der Inhalt die andere.
    Und der Inhalt steht auf der (z.b.) index.html . Ergo: Trenne Inhalt vom Design :P
    Ich meine außerdem, dass es bei Suchmaschienen jenachdem auch auf das Verhältnis "Code der Seite" zu "Inhalt" ankommt :)
    Außerdem gehört es zum guten Stil, CSS auszulagern :)

  • Zitat von &quot;Sarkkan&quot;

    Besonders der IE ist da gaaaanz lustig :D


    Na da bin ich ja mal gespannt :lol:


    Spaß machts trotzdem. Würde am liebsten glei weiter basteln... wenn doch nur die arbeit nich wär :wink:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!