Simon: Warum Funktionieren die Befehle nicht?

Hey.

Ich bin gerade dabei ein bisschen die Grundlagen von HTML und CSS zu lernen. Dazu wollte ich eine kleine Website, bestehend aus einer Titelseite programmieren. Den meisten Teil habe ich mit der Hilfe von Tutorials gemacht. Der Footer der mir gerade Kopfschmerzen bereitet funktioniert auch mit der Hilfe von Tutorials nicht. Ich poste hier mal meinen Code und schreibe unten detailliert das Problem:

<!DOCTYPE html>

<html lang="de">

<head>
    
    <meta charset="utf-8">
    <title>Page One</title>

    <link rel="stylesheet" type="text/css" href="style.css">
    
</head>


<body>

    
    <section class="intro">
        <div class="inner">
            <div class="content">
                <h1>THIS IS A TITLE</h1>
                <h3>this is a really great subtitle</h3>
                <a class="btn" href="#">LEARN MORE</a>
                <ul class="footer">
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">IMPRESSUM</a></li>
                    <li><a href="#">DATASECURITY</a></li>
                </ul>
            </div>
        </div>
    </section>
    
    
</body>


</html>
@import url('https://fonts.googleapis.com/css?family=Dosis: 800|Roboto:300');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.intro {
    height: 100%;
    width: 100%;
    margin: auto;
    background: url(https://static.pexels.com/photos/26206/pexels-photo.jpg) no-repeat 50% 50%;
    display: table;
    top: 0;
    background-size: cover;
}

.intro .inner {
    padding-top: 7%;
    display: table-cell;
    vertical-align: top;
    width: 100%;
    max-width: none;
}

.content {
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.content h1 {
    font-family: 'roboto', sans-serif;
    color: #F9F3F4;
    text-shadow: 0px 0px 300px #000;
    font-size: 500%;
}

.content h3 {
    font-family: 'roboto', sans-serif;
    color:  #f2f1ff;
    text-shadow: 0px 0px 300px #000;
    font-size: 350%;
    font-weight: 300;
}

.btn {
    border-radius: 9px;
    font-family: 'Dosis', sans-serif;
    font-weight: 800;
    color: #ff5757;
    font-size: 150%;
    padding: 10px 20px;
    border: solid #ff0000 3px;
    text-decoration: none;
}

.btn:hover {
    color: #ff0000;
    border: solid #ff0000 3px;
    background-color: #262626;
}


.footer {
    color: #fff;
    list-style: none;
    text-align: center;
    vertical-align: bottom;
    text-decoration: none;
}

.footer > li {
    color: #fff;
}


@media screen and (max-width: 770px) {
    
    .intro .inner {
        padding-top: 100px;
        vertical-align: top;
    }
    
    .content h1 {
        font-size: 250%;
    }
    
    .content h3 {
        font-size: 175%;
    }
    
    .btn {
        font-size: 100%;
        padding: 7px 15px;
    }
    
}

Die drei Wörter im Footer sind blau trotz "color: #fff". Das liegt warscheinlich an der Textdekoration die ich aber ausgeschaltet habe ("text-decoration: none"). Außerdem ist der Footer direkt unter meinem Button und nicht am unteren Rand ("vertical-align: bottom"). Auch macht es keinen Unterschied ob ich diese Befehle für den Footer (".footer") oder für die Liste im Footer (".footer > li") schreibe.

Kurz gesagt: Alles was mit dem Footer zusammenhängt funktioniert nicht. Warum?

Danke schonmal :)

  1. Hallo

    Warum?

    Keine Ahnung. Das wird aber nicht nur mir so gehen.

    Dein Quelltext enthält keinen Footer. Und das CSS ist offensichtlich unvollständig.

    Da es keinen Spaß macht dir Quellcodeschnipsel für Quellcodeschnipsel aus der Nase zu ziehen wäre ein Link zu der Seite am sinnvollsten.

    Wenn bei dir die Textfarbe nicht angezeigt wird solltest du dich mal mit dem Thema Spezifität beschäfigen.

    Weiterhin werden Flexbox und Sticky Footer für dich interessant sein.

    Und insgesamt naürlich die Grundlagen vom aktuellen HTML und CSS.

    Gruss

    MrMurphy

  2. @@Simon

    Die drei Wörter im Footer sind blau trotz "color: #fff".

    Weil es Links sind und du für a-Elemente nicht angegeben hast; demzufolge also die Angaben aus dem browserinternen Stylesheet wirken, wonach (unbesuchte) Links blau dargestellt werden (und besuchte violett).

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  3. @@Simon

    Ich poste hier mal meinen Code

    Dass ein Online-Beispiel mehr sagt als 1000 Code-Zeilen, deutete MrMurphy schon an. Aus Gründen.

    Ein paar Hinweise zum Markup:

    <html lang="de">
    

    Das an der Stelle die Sprache des Seiteninhalts angegeben werden sollte ist richtig; es muss aber auch die richtige Sprache angegeben werden. Bei dir passt das nicht zusammen. Wenn der Seiteninhalt englisch ist: lang="en".

    Außerdem sollte <meta name="viewport" content="width=device-width, initial-scale=1.0"> im head nicht fehlen, damit die Seite auf Smartphones vernünftig dargestellt wird.

        <section class="intro">
            <div class="inner">
                <div class="content">
    

    section ist für Unterabschnitte des Inhalts in einem Dokument. Ein solcher liegt hier nicht vor, section ist falsch.

    Die ganzen divs brauchst du auch nicht.

                    <h1>THIS IS A TITLE</h1>
    

    Auch wenn du die Ausgabe in Großbuchstaben haben willst, sollte im Quelltext die normale Schreibweise verwendet werden: <h1>This is a title</h1>

    Ein Screenreader könnte sonst unverständliches „te-ha-i-es i-es a te-i-te-el-e“ ausgeben. (Auf deutsch buchstabiert, da ja Deusch angegeben ist – ein Grund, warum es wichtig ist, die richtige Sprache anzugeben.)

    Die Ausgabe in Großbuchstaben erfolgt per CSS: h1 { text-transform: uppercase }.[1]

                    <h3>this is a really great subtitle</h3>
    

    Ein Untertitel darf nicht in einem h#-Element stehen. Entweder alles in h1 – in spans eingepackt, damit man’s unterschiedlich stylen kann – oder

    <header>
      <h1>This is a title</h1>
      <p>this is a really great subtitle</p>
    </header>
    
                    <a class="btn" href="#">LEARN MORE</a>
                    <ul class="footer">
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">IMPRESSUM</a></li>
                        <li><a href="#">DATASECURITY</a></li>
                    </ul>
    

    Für Footer gibt es ein spezielles HTML-Element: footer.

    Für den Hauptinhalt auch: main. Darin könnte der Link „Learn more“ untergebracht werden – muss aber hier in dem Fall nicht sein.

    Das Markup sollte dann so aussehen:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Page One</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
      </head>
      <body>
        <header>
          <h1>This is a title</h1>
          <p>this is a really great subtitle</p>
        </header>
        <p><a class="btn" href="#">Learn more</a></p>
        <footer>
          <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#" lang="de">Impressum</a></li>
            <li><a href="#">Data security</a></li>
          </ul>
        </footer>
      </body>    
    </html>
    

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory

    1. Dass dabei ß zu SS anstatt zum großen ẞ wird, ist eine kleine Unschönheit. ↩︎

    1. @@Gunnar Bittersmann

      Das Markup sollte dann so aussehen: …

      Und gestylt könnte es so aussehen.

      Wichtig: Die Angabe einer Hintergrundfarbe. Ansonsten siehst du, wenn das Hintergrundbild aus irgendeinem Grund nicht geladen wird, die ostfriesische Nationalflagge: weißer Adler auf weißem Grund.

      body ist eine Flexbox, deren Kinder header, p und footer sich untereinander anordnen und die volle Höhe des Viewports (oder bei Bedarf mehr) ausfüllen.

      Der Footer kommt nach unten durch header { margin-top: auto } p { margin-bottom: auto }.

      Hinweis: Die präsentationsbezogene Klasse "btn" hab ich gar nicht benutzt; die kann auch weg.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    2. Aloha ;)

                      <h3>this is a really great subtitle</h3>
      

      Ein Untertitel darf nicht in einem h#-Element stehen.

      Außer falls man hgroup verwendet. Was man vielleicht eher nicht will, weil der Verbleib des Elements in der Spec noch unklar ist. Nach allem was ich weiß sieht das W3C hgroup als deprecated, die WHATWG hält nach meinen Informationen noch daran fest.

      Die Darstellung im Wiki, dass hgroup keine Auswirkungen habe und durch div ersetzt werden könnte, ist meinem Kenntnisstand nach falsch.

      Hgroup hat deutliche Auswirkungen auf den Outline-Algorithmus und ist eben die Vorbedingung dafür, dass man Untertitel auch als h-Element auszeichnen kann, da im Außenverhältnis (outline) nur die höchstrangige Überschrift gezählt wird während man im Innenverhältnis auch einen rangniedrigeren Untertitel durchaus als Überschrift auffassen kann.

      Das ist ja überhaupt erst der Grund, warum man das Element eingeführt hat. Es ist einfach nur gering verbreitet und man kann das, wie Gunnar vollkommen richtigerweise sagte, auch anders auszeichnen, was im Endeffekt jetzt der Grund dafür ist, dass es vielleicht doch wieder aus dem Standard entfernt wird.

      Ich sehe schon einen semantischen Mehrwert in

      <hgroup>
        <h1>Überschrift</h1>
        <h2>Unter-Überschrift</h2>
      </hgroup>
      

      gegenüber

      <h1>Überschrift</h1>
      <p>Unter-Überschrift</p>
      

      oder

      <h1>
        Überschrift
        <span>Unter-Überschrift</span>
      </h1>
      

      In ersterer Variante wird die Auszeichnung dem Titel-Charakter der Unter-Überschrift nicht gerecht (auch der Untertitel einer Überschrift hat noch die Eignung, den Inhalt zu umschreiben und ist mit einem einfachen „paragraph“ nicht wirklich gut semantisch erfasst; in einem Absatz erwartet man eigentlich Inhalt in vollständigen Sätzen, keine stichwortartige Umschreibung), in zweiterer Variante wird die Outline der Seite durch die Unter-Überschrift unnötig aufgebläht, da für die Belange der Outline die eigentliche Überschrift schon inhalts-vollständig ist, während die Unter-Überschrift die Information dann doppelt. Die Dopplung möchte man aber nicht im Inhaltsverzeichnis, sondern über dem konkreten Artikel.

      Klar kann man jetzt argumentieren, dass Outline keine größere Bedeutung habe. Dabei macht man aber mMn den Fehler, sich zu sehr Scheuklappen darüber aufzusetzen, welche Art von Dokument sinnvoll durch HTML beschrieben werden kann. Es kann durchaus auch Sinn ergeben, ein ganzes Manuskript mit mehreren Kapiteln in ein HTML-Dokument zu fassen - und auf einmal wird Outline zu einem ganz wichtigen Faktor. Dass das im Web aus naheliegenden Gründen (große Datenmenge auf einmal statt selektiv) meist nicht die Handhabung ist, bedeutet nicht, dass der Aspekt automatisch für die Sprache vernachlässigt werden kann.

      Was Elemente mit semantischer Bedeutung angeht, sei sie auch auf den ersten Blick noch so unscheinbar, bin ich definitiv Inklusionist.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
      1. @@Camping_RIDER

        Außer falls man hgroup verwendet. Was man vielleicht eher nicht will, weil der Verbleib des Elements in der Spec noch unklar ist.

        Für mich ist das klar: Es ist draußen.

        Nach allem was ich weiß sieht das W3C hgroup als deprecated, die WHATWG hält nach meinen Informationen noch daran fest.

        Was ist WHATWG? ;-)

        Hgroup hat deutliche Auswirkungen auf den Outline-Algorithmus

        Es gibt (praktisch) keinen Outline-Algorithmus.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory