3-Spaltiges Layout: Inhalt läuft in Footer

hume · 25. August 2017

Hallo Boogie61,

für die Fehler mit Überschriften usw.

würde ich die HTML, CSS Datei durch W3C durchlaufen lassen. Dann erkennst du deine Fehler besser und kannst sie auch korrigieren. Da erst h1 kommt und nicht erst h2.

Link HTML Validator: https://validator.w3.org/

Link CSS Validator: https://jigsaw.w3.org/css-validator/

PS: Ich würde dir dringend Raten alle Fehler zu korrigieren, dies kann irgendwann negative Auswirkungen haben auf Seo (Google) etc. Warum nicht gleich alles richtig? Irgendwann musst du vielleicht nochmal alles nacharbeiten.

Weiterhin muss für Seo dass Keyword folgendermaßen vorkommen: Überschrift, Inhalt, URL.

Sempervivum · 25. August 2017

Zitat

Auf der Startseite stehen die Farbkleckse untereinander

Man kann das aber sehr einfach beheben:

Code

<h2>Herzlich Willkommen.<br>Erfahren Sie mehr über mich als:</h2>
    <section id="ckleckse">
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/erziehungsberatung.html"><img src="./Elke Meiners - Start_files/rot-e.jpg" alt="Erziehungsberatung" width="95%" height="95%"></a>
        </aside>
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/verfahrensbeistand.html"><img src="./Elke Meiners - Start_files/lila-v.jpg" alt="Verfahrensbeistand" width="95%" height="95%"></a>
        </aside>
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/berufsvormund.html"><img src="./Elke Meiners - Start_files/gelb-b.jpg" alt="Berufsvormund" width="95%" height="95%"></a>
        </aside>
        <aside class="klecks-Start">

            <a href="http://www.elke-meiners.de/umgangspflege.html"><img src="./Elke Meiners - Start_files/blau-u.jpg" alt="Umgangspflege" width="95%" height="95%"></a>
        </aside>
    </section>

    <div id="filler"></div>
    
    <footer>
        <img src="./Elke Meiners - Start_files/verlauf.jpg" alt="Trenner" width="98%" height="98%">
        <a href="http://www.elke-meiners.de/ueber-mich.html" target="_self">Über mich</a> | <a href="http://www.elke-meiners.de/kontakt.html" target="_self">Kontakt</a> | <a href="http://www.elke-meiners.de/impressum.html" target="_self">Impressum</a>
    </footer>

Alles anzeigen

Code

/* Kopfzeile, für Banner */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    display: block;
    margin: 0px auto;
}

/* Navigation, mittig, */
nav {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 5px;
    font-size: 1.2em;
    color: #7B4487;
}

/* Fußzeile, zentriert */
footer {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 8px;
    width: 99%;
    text-align: center;
}

/* Links die Kleckse */
#kleckse {
    align-self: flex-start;
    margin: 0;
    margin-top: 10px;
    padding: 1% 2%;
    height: auto;
    flex-basis: 170px;
    flex-grow: 0;
    flex-shrink: 0;
}

/* Paragraphenzeichen */
#paragraf {
    margin: 0;
    margin-top: 10px;
    padding: 1% 2%;
    border: 0;
    width: 10%;
    height: auto;
}

/* Inhalt zentriert */
#imp {
    overflow-y: scroll;
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: justify;
    margin-right: 1%;
    margin-left: 21%;
    padding: 2% 2%;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}


/* Inhalt zentriert */
main {
    overflow-y: auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: center;
    padding: 2% 2%;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Zitatenbox */
#zitate {
    font-family: "Times New Roman", Times, serif;
    font-size: medium;
    font-style: italic;
    color: #7B4487;
    text-align: center;
    margin: 0;
    padding: 1%;
    border-color: #7B4487;
    border-style: dotted;
    margin-top: 30px;
    overflow-y: auto;
    max-height: calc(100% - 30px);
}

#wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
}

#filler {
    flex-basis: 0px;
    flex-grow: 1;
}
/* Überschriften */
h2 {
    font-size: x-large;
    color: #7B4487;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 10px;
}

/* Inhaltstext */
h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: left;
    font-size: medium;
}

/* Impressumschrift */
h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: left;
    font-size: small;
}
/* Kleckse für Index.html */
#ckleckse {
    display: flex;
    flex-direction: row;
}
/* Elkes Foto auf "Über mich" */
#foto {
    margin: 0;
    margin-top: 10px;
    padding: 1% 2%;
    border: 0;
    width: 30%;
    height: auto;
}

/* Inhalt von "Über mich" */
#ich {
    font-family: Arial, Helvetica, sans-serif;
    color: #7B4487;
    text-align: center;
    margin-right: 47%;
    margin-left: 15%;
    padding: 2% 2%;
    border: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 43%;
    height: auto;
}

Alles anzeigen

Boogie61 · 28. August 2017

Ok, danke für die Hinweise. Ich werde mich drum kümmern.

3-Spaltiges Layout: Inhalt läuft in Footer

Jetzt mitmachen!

Teilen

Tags