HTML Layout

codelegend27 · 15. Mai 2020

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 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

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

nextuser · 15. Mai 2020

Zitat von codelegend27

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

War das zufällig auf mich gemünzt

Zitat von codelegend27

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

Code

<header>
        <div class="header">
            <img src="img/logo.png" class="logo" alt="LOGO">
            <h1 class="h1h">
                author
            </h1>

        </div>
        <div class="nav">
            <ul>

                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About me</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="index.html">Home</a></li>



            </ul>
        </div>
    </header>

Alles anzeigen

würde ich das machen

Code

<header>
    <div>
        <img src="img/logo.png" id="logo" alt="LOGO">
        <h1>author</h1>
    </div>
    <nav>
        <ul>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="about.html">About me</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="index.html">Home</a></li>
        </ul>
    </nav>
</header>

Alles anzeigen

Ä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

Code

<div class="mainwrapper">
        <main>
            <div class="container">
                <table class="banane">
                    <tr>
                        <h1>
                            This is my first <br>website :D
                        </h1>
                    </tr>

                    <tr>

                        <!-- Articles -->

                        <article>
                            <div class="articlebig">
                                <a href="http://www.samsung.at"><img src="img/Phone.png" class="imgbigarticle"
                                        alt="Artikelbild"></a>

                                <h2>
                                    Samsung Galaxy S11/S20 Plus video leaks showing phone in real life!
                                </h2>
                            </div>
                    </tr>

                    <tr>


                        <td class="saleft">

                            <a href="http://www.polizei.at"><img src="img/Debit_card_ATM.jpg" class="imgsmallarticle"
                                    alt="Artikelbild"></a>
                            <h2>
                                Police are investigating three ATM explosions in two Floria counties
                            </h2>


                        <td class="saright">

                            <a href="http://www.bolt.eu"><img src="img/Taxify-Scooters.jpg" class="imgsmallarticle"
                                    alt="Artikelbild"></a>
                            <h2>
                                E-Scooter firm Bolt pulls out of 12 cities
                            </h2>
                        </td>

                    </tr>


                </table>
            </div>
            </article>
    </div>
    </main>
    </div>

Alles anzeigen

würde ich

Code

<main>
    <!-- Die Banane ??? -->
    <section>
        <h1>This is my first Website :D</h1>
        <article>
            <header>
                <a href="http://www.samsung.at"><img src="img/Phone.png" class="imgbigarticle" alt="Artikelbild"></a>
                <h2>Samsung Galaxy S11/S20 Plus video leaks showing phone in real life!</h2>
            </header>
            <!-- HIER DANN DER INHALT ...-->
        </article>
        <article>
            <header>
                <a href="http://www.polizei.at"><img src="img/Debit_card_ATM.jpg" class="imgsmallarticle" alt="Artikelbild"></a>
                <h2>Police are investigating three ATM explosions in two Floria counties</h2>
            </header>
            <!-- HIER DANN DER INHALT ...-->
        </article>
        <article>
            <header>
                <a href="http://www.bolt.eu"><img src="img/Taxify-Scooters.jpg" class="imgsmallarticle" alt="Artikelbild"></a>
                <h2>E-Scooter firm Bolt pulls out of 12 cities</h2>
            </header>
            <!-- HIER DANN DER INHALT ...-->
        </article>
    </section>
</main>

Alles anzeigen

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...

codelegend27 · 15. Mai 2020

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

codelegend27 · 15. Mai 2020

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

nextuser · 15. Mai 2020

Ist gut, wenn man sich da selber so reinfuchst. Bleibt echt im Kopf.

Zu den Klassen: Ich persönlich nutze Klassen / ID's nur bei notwendigen Sachen für CSS oder Javascript zum Ansprechen.

HTML-Code halte ich immer gerne möglichst schlank.

codelegend27 · 15. Mai 2020

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 ?

Code

/* Header and Navigation Menu*/
.topheader {
  background-color: #ebd9d9;
  height: 200px;
  position: relative;
}
.topheader > div > img {
  width: 350px;
  flex-direction: row;
  float: right;
  padding-top: 1em;
  padding-right: 3em;
}
.topheader > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.topheader > div > h1 {
  flex: auto;
  padding-top: 1em;
  padding-left: 2em;
}
nav {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
}

/* Navigations Bar */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #c65252;

  width: 100%;
  position: absolute;
}

li {
  float: right;
  padding: 2px 1.6em 2px 0;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 5px;
  font-size: 1.5em;

  text-decoration: none;
}

/* Main Content */
section {
  margin-left: 5%;
  margin-right: 5%;
}
section > h1 {
  text-align: center;
  font-size: 5em;
  margin-left: 30%;
  margin-right: 30%;
}

article {
  width: 100%;
  border: solid black 5px;
  height: 300px;
}

h2 {
  position: relative;
  bottom: 0;
  text-align: center;
}

section > h1 {
  text-align: center;
  font-size: 5em;
}

.imgbigarticle {
  position: relative;
  object-fit: cover;

  overflow: hidden;
}

/** Footer **/
footer {
  text-align: center;
  width: 100%;
  background-color: #cabbb7;
}
footer img {
  width: 350px;
}

footer h3 {
  padding-bottom: 2em;
}

Alles anzeigen

nextuser · 16. Mai 2020

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...

codelegend27 · 16. Mai 2020

sehr spannend deinen Zugang zu der Sache zu sehen

werde den code abermal neu schreiben weil anpassen bekomme ich nicht hin

ich werde mir nochmal infos zu den flex positionen gönnen um da besser zu werden.

danke -

HTML Layout

Jetzt mitmachen!

Teilen

Tags