• Ja


    Also ich bin heute dabei, nachdem ich schon einiges gelernt habe, meine eigene webseite zu coden.

    Habe dieses basic layout ( bild anbei ) auch schon ausgedruckt gehabt und div und header und so runderherum gezeichnet wie von einem youtube video gesehen. das hat auch geholfen.


    Naja jedenfalls bin ich komplett fertig mit html und css. aber habe es irgendwie völlig verwurstet .


    Wollte nur fragen ob ihr mal über mein Grundlayout drüber schauen könnt und tipps habt. überlege schon den ganzen topfen neu zu machen :)

    Und weil das jemand gesagt hat nein ich habe das nicht aus dem internet zusammenkopiert :D habe mir extra viel mühe gegeben sogar mit den commentar zeugs.


    falls ihr euch wundert warum beim menü home also die index.html als letztes kommt fragt mich nicht haha. ich habe das im css gemacht und dann float rechts und dann war alles in der verkehrten reihenfolge daher habe ichs in der html umgeordnet. aber das ist css problem das tut nichts zur sache das löse ich auch noch. geht jetzt eher um die grundlegende struktur im html. das css bekomm ich bestimmt noch gebacken.


    http://pastie.org/p/7HzxqvvDK55b0wXIuHflNZ


    lg


    PS mit layout meine ich das HTML Gerüst also einfach nur die TAGS also diese <> elemente :D

    habe versucht mich soweit wie möglich an html5 standards zu halten mit den definitionen von header, article, main etc. habe zwar gelesen es geht einfach über divs und man classifiziert sie dann zb in main aber wollte es halt nahe dem standard ausführen

  • Und weil das jemand gesagt hat nein ich habe das nicht aus dem internet zusammenkopiert

    War das zufällig auf mich gemünzt :D



    habe zwar gelesen es geht einfach über divs und man classifiziert sie dann zb in main aber wollte es halt nahe dem standard ausführen

    Gehn tut vieles. Man kann es auch komplett in div's machen.

    Die Tags wie "main, article, section, header,ect..." sind ja nicht nur als "Ersatz" eingeführt worden. Sie tragen grundlegendes zur Struktur einer Seite bei und werden von den Suchmaschinen entsprechend interpretiert.


    Dein Code sieht schon recht gut aus.

    Meine Verbesserungsvorschläge wären:


    • Ich würde nicht 3 Stylesheets verwenden. Header & Footer sind sicherlich nicht so groß, das man dafür eine eigene CSS braucht. Auch sind die Anfragen zum Server dann unnötig mit 2 weiteren Stylesheets behaftet.
    • Aus deinem Header

      würde ich das machen

    • Änderungen:
      • Nicht überall ne Klasse einsetzen. Stylen kann man bei so kleinen Abschnitten wunderbar ohne!
      • Beim Logo eine ID anstatt einer Klasse verwenden. Brauchst es ja nicht mehrmals.
      • Nav-Tags sind ja für ne Navigation gedacht. Also nutzen wir sie doch auch mal ;)
      • Stylen kannst du die Sachen im CSS wunderbar ohne Klassen z.B. mit "header>div" und "header>nav".
    • Aus deinem Haupt-Container würde ich machen
    • Änderungen:
      • Die beiden div's vor & nach "main" brauchst du nicht.
      • Den table-Tag würde ich heutzutage auch wirklich nur noch für Tabellen nutzen, nicht zum "designen". Daher hier "section" gewählt.
      • Da du in der "Tabelle" mit articel arbeitest (btw. den article-Tag öffnest du IN der Tabelle, schließt ihn aber NACH ihr) und auch der restliche Inhalt auf mich bischen entsprechend wirkt, habe ich da mal mit article gearbeitet.
      • Den Bild-Link und die Überschrift jedes article-Abschnitts habe ich in header-Tags umschlossen.
    • So, das mal ebend von mir...
  • danke ich schau mir das gleich an sehr freundlich, dass du antwortest.


    das problem für mich momentan ist, dass alle informationen im internet verfügbar sind.

    nur schwer genau das richtige zu finden haha. oder halt den einfachen basic weg. aber eine wanderung über 1000km beginnt ja auch immer mit dem ersten schritt :)


    lg

  • danke habe mal überflogen sieht sehr spannend aus :)

    schau ich habe meine html durch den w3s validator ding geschickt.


    da kamen auch viele fehler raus, habe einen nach den andren rausgelöscht nur dann stimme plötzlich das ganze layout nicht mehr haha


    also versuche schon selber sehr fleißig trouble shooting zu betreiben . soll halt einfach sein wenn ich mir den quelltext von einer webseite ansehe bin ich ehrlich gesagt noch etwas überfordert mit der masse an zeugs das man da drinnen findet.

    lg


    // Die bananen klasse habe ich gewählt weil ich verzweifelt versucht habe alles zu stylen mit css und mir class namen ideen ausgegangen sind ^^


    und der zugang mit header > div ist genial. ich kannte ihn nur bin ich nicht auf die idee gekommen das zu nutzen um dinge zu vereinfachen :D

  • So das wars für heute.

    15 Stunden schon am coden :)


    ums verrecken schaffe ich 2 dinge nicht. habe schon sämtliches zeugs ausprobiert von google, nichts fruchtet


    1) Die Bilder an den Artikelrahmen anpassen.

    Habe den Articel einen rahmen verpasst damit ich sehe wie das aussieht. unmöglich für mich das bild auf diese größe zu bringen und darunter den text zu platzieren. auch wenn ich die höhe mit pixeln bestimme das bild macht was es will.


    es passiert auch nix. bei overflow hidden sollte man doch das überhängende bild nicht sehen. denkst , schaut scheisse aus haha (siehe bild anbei)

    2) 2 artikel nebeneinander platzieren (so wie in der skizze anbei )

    ich habe was über flex gefunden, über positionen und insgesamt bin ich verwirrt. sogar 12 minuten positions video von YT gegönnt aber klappt nicht


    welcher ansatz wäre hier richtig zu wählen ?


  • Oha, du wirfst ja absolute Position, float und flex zusammen. Das ist echt nicht toll. Vor allem float sollte Vergangenheit sein!

    Auch brauchst du Standardwerte nicht angeben (z.B. "position: relativ" ohne absoluten Child oder "flex-direction: row").

    Alles in allem müsstest du noch etwas mehr an den Grundlagen pfeilen, dann erkennst du auch, das einige Sachen in deinem CSS nicht so passend/nötig sind.


    Das obere Bild ist also in voller Größe, die anderen beiden Bilder sollen nur Ausschnitte so groß wie das Elternelement sein?


    Dein Layout könnte z.B. so aussehen: Codepen...