Simon: Warum Funktionieren die Befehle nicht?

Beitrag lesen

SELF-Forum

Warum Funktionieren die Befehle nicht?

Simon
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln