Ist mein Layout stabil?

  • Hallo, nun ist es soweit, ich habe mit HTML und CSS mein erstes Layout erstellt.
    Validiert ist das HTML und CSS.
    Könnt ihr mal kurz ein Blick drauf Werfen, ob das gnaze auch stabil ist bzw. ob ich grobe Planungsfehler gemacht habe trotz der geprüften Grammatik ?
    Das wäre echt lieb!

    Hier der Link: http://www.schultes-playmowelt.de

    Danke!

    LG Jenny

  • Ich empfinde den inneren Scrollbalken störend und unnötig; dafür gibt es schließlich die Browser-Scrollbar.
    Verzichte deshalb auf einen height-Wert.

    Auch finde ich die Seite zu breit. Hierdurch werden die Textzeilen sehr lang und erfordern eine hohe Konzentration beim Lesen.

    Die Navi ist ne reine Div-Suppe und das nur, um jedem Link einen margin-left-Wert zu verschaffen. Das könntest du ebenso mit einem padding-left-Wert bei .navi_left erreichen und alle Navi-Divs wären überflüssig.
    Besser und üblich wäre jedoch eine Listen-Navi.

  • Hallo sejuma,
    danke für deine schnelle Antwort.

    Ja, das mit den Scrollbalken habe ich so gemacht, weil ich möchte das der Textbereich mit dem Ende der Navileiste am Schluss gleich ist.
    Wie bekomme ich das dennn ohne festgelegte Größe hin? :confused:

    Ja, die Auflösung habe ich auch schon versucht zu ändern, indem ich versucht habe dem "root" eine prozentuale Breite zu geben, aber da habe ich noch keinen Plan wie ich vielleicht die Seite in eine flexible Seite umwandeln kann, die sich dann dem Browserfenster anpasst. An sowas dachtest du doch oder?
    Wenn ich dem "root" eine Breite von 80% gebe, springen mir die zwei Drachengrafiken oben aus dem Kopfbereich raus. Auch hier wäre ich um jede Hilfe dankbar. :)

    Äh, die Navi insgesamt ist eine Divgeschichte ( Hab sie so aus einem Tutorial übernommen)
    Die einzelnen Links sind eigentlich verlinke Buttons. ( Oder hab ich jetzt nicht kapiert was du meinst) :confused:
    Muss ich die verlinken img Buttons noch mal extra in <li> setzen oder wie meinst du das?

    Oh... und ich war so stolz auf mein erstes Layout :oops:

    LG Jenny

  • Ist ja nicht so schlimm, nur heißt das nicht, dass es perfekt ist. Irgendwo muss man ja anfangen ;)

    Meine erste Seite will ich auch wieder neu machen, hab den Kerle scho überredet den Hoster zu wechseln damit ich auch eine DB hab :rolleyes:


    1. schau dir Faux Columns an, wobei bei deinen 2 Divs würde es sogar noch n bisl einfacher gehen. Da könntest du den Navi Hintergrund (die Farbe) als Grafik einbinden und nur ein repeat-y einstellen, den 2ten Bereich eben als Color. Wirst vllt. verstehen was ich meine wenn du dir die Fauxcolumns anschaust *g*

    2. den Inhalts div allgemein schmaler halten, ich hock hier grad an einem 15" und die Seite passt nciht mehr drauf von der breite her :D, aber das wäre ja noch nicht das schlimmste -> nervig wirds erst wenn man sich so einen Textklotz wirklich durchlesen will. Schau dir eine Zeitung an, die sind leicht Lesbar und überleg ob du sowas ähnliches bei dir auch umsetzen kannst.

    3. Kann mir dein Quelltext hier grad nicht anschauen, aber ich denke er meint, dass du in der navi sehr viele Divs hast (Divsuppe eben) die unsinnig sind - es würde ohne gehen. Wie? Steht bei Sejuma's Post ;)

  • Moin,


    Oh... und ich war so stolz auf mein erstes Layout :oops:

    was leider semantisch und SeO-mäßig eine ziemliche Katastrophe ist.

    ich dachte du hast Little Boxes 1 gelesen???

    Ein Menü ist eine Aufzählung von Links und gehören semnatisch in eine ul.

    Wo ist denn deine Hauptüberschrift (h1) ??
    Google kann nicht in Grafiken lesen, deshalb solltest du den Kopf mit einer Image Replacement Technik gestalten.

    Dein grafisches Menü ist ebenfalls äußerst suboptimal.
    Es gibt zwei Fälle von grafischem Menü, einmal Text im HG-Bild, einmal nur HG-Bild
    Ein img hat in einem grafischen Menü nichts zu suchen.

    Bleib erstmal bei festen px-Layouts.
    Das mit dem %-Layout kann bei breiten Bildschirmen übel ausschauen oder wegen der größeren Zeilenweite dann sehr mühsam zu lesen sein.

    Flexibler ist auch z.B. ein em-Layout.

    Little Boxes 1 gibts jetzt auch als kostenlosen Onlinekurs.

    Vielleicht solltest du auch erstmal dann Little Boxes 2 durcharbeiten.

    Du mußt bedenken, du stehst noch am Anfang.
    Das alles zu verstehen ist nicht so leicht und braucht seine Zeit.

    Wenn du z.B. meinen Link zu Image Replacemnet nach Gilder /Levin nicht verstehst, hast du letztlich position:absolute/relative auch nicht verstanden.

    Sei also nicht ungeduldig, kommt alles mit der Zeit. :)

    edit Grevas
    das in der Zeitung ist Blocksatz und der ist fürs Web leider ungeeignet.

    edit. edit. @Jenny du hast auch gefloatet und nicht gecleart.
    Außerdem leidet die Seite an der 18px-Seuche, eine Abart der 12px-Seuche.

    3 Mal editiert, zuletzt von koslowski (20. Oktober 2009 um 10:06)

  • Ich meinte ja auch die Kolumnen Aufteilung, bei einem Fortlaufenden Text ist das natürlich schwierig.
    Für Dynamische Seiten hast du wohl Recht, ist begrenzt aber durchaus möglich. Man sollte sich trotzdem eine andere Lösung dafür überlegen ;) . Es geht mir letztendlich nur um eine sinnvolle Textgestaltung und kein riesenblock :D

  • Hi Grevas,

    Ich meinte ja auch die Kolumnen Aufteilung, bei einem Fortlaufenden Text ist das natürlich schwierig.
    Für Dynamische Seiten hast du wohl Recht, ist begrenzt aber durchaus möglich. Man sollte sich trotzdem eine andere Lösung dafür überlegen ;) . Es geht mir letztendlich nur um eine sinnvolle Textgestaltung und kein riesenblock :D

    ja okay, das du für Riesentexte keinen Blocksatz hernimmst, hätte ich mir fast denken können. :)
    (Du ahnst aber nicht wieviel Klappstühle meinen ihre Monstertexte mit Blocksatz gestalten zu müssen, weil es von weitem so schön geschlossen ausschaut. Wahrscheinlich lesen die sich ihre eigenen Texte mit dem Blocksatz nicht mehr durch, sonst wüßten sie wie mühsam das sein kann. :D )

    Meine persönliche Erfahrung mit sinnvoller Textgestaltung ist, das die Laufweite der Zeilen nicht zu groß sein darf.
    Außerdem ist es schön, wenn der Text mit sinnvollen Überschriften und Absätzen durchstrukturiert ist, das ist beim "Seite durchscannen" so angenehm.

  • also ich muss sagen, dass ich die leistung recht gut empfinde, für ihr erstes layout in einem so komplexen zusammenhang is des ok!
    klar sind da noch semantikfehler drin und ja mich stört auch der zweite scrollbalken und die langen textzeilen, aber alles in allem hast du da schon gut was geleistet jenny :)
    wenn du weiterhin so am ball bleibst wird aus dir bald nen profi

  • synaptic:
    Danke :oops:

    Aber ich bin ja auch froh wenn mir hier meine Fehler aufgezeigt werden und ich noch den einen oder anderen Tipp mitnehmen kann. :rolleyes:
    Denn aus diesen Fehlern lerne ich ja hoffentlich!:)

    Dieses Forum ist echt klasse und ich fühle mich hier recht wohl!

    So, jetzt kommen meine Kinder gleich nach Hause und wenn die heute Abend versorgt sind, kümmere ich mich darum meine Fehler auszumerzen!

    LG Jenny

  • Bearbeitest du die Seite noch? Ich würde Sie lieber etwas schmaler machen. Ich habe zwar das volle Bild bei dir aber viele andere noch nicht.

  • Der Quelltext scheint seit der ersten Kritik hier verbessert worden zu sein. Eine DIV-Suppe kann ich nicht mehr erkennen. Daher schwenke ich mal zur Optik. Die Text- und Grafikeffekte finde ich albern (lass ich einfach mal so stehen). Die Farben an sich sind anstrengend für meine Augen, was auch für die Schrift an sich gilt. Wenn ich persönlich auf eine solche Startseite stoße, muss schon massig Interesse vorher an den Inhalten geweckt worden sein, so dass ich auch noch weiter und nicht [X] klicke.

    Probiere es doch lieber mal mit einem farblich neutralerem Outfit.

  • Hallo Leute,
    so hab mal versucht eure Tipps umzusetzten.... fehlt noch die Umsetzung der Buttons mit dem image replacement nach gilder...
    und die faux columns muss ich mir auch noch anschauen.

    Aber die Navileiste hab ich schon in eine ul verwandelt, den Kopfbereich habe ich mit der image replacement technik ausgebessert, die Seite verkleinert... der Rest folgt noch...

    Gute Nacht und Danke für Eure Tipps!

    LG Jenny