Flytande element

I den här uppgiften får du lära dig hur du kan arbeta med flytande element för att skapa struktur på sidan. Du kan läsa mer om hur du skapar flytande element på sidan https://www.w3schools.com/css/css_float.asp. Det är bra exempelvis om du vill skapa en sidomeny.

Instruktioner

  1. Ladda ner och packa upp denna zip-fil
  2. Följ instruktionerna i CSS-filen
  3. Du får endast ändra i CSS-filen
  4. Kontrollera så att resultatet blir som facit
  5. Denna uppgift behöver du inte lämna in

Lycka till!

HTML

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <title>Flytande element</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Flytande element</h1>
        <p>Lär dig mer om hur flytande element kan användas</p>
    </header>
    <aside>
        <h3>Logga in</h3>
        <p>Använd detta formulär för att logga in</p>
        <form>
            <label for="username">Användarnamn</label>
            <input type="text" id="username">
            <label for="username">Lösenord</label>
            <input type="password" id="password">
            <button>Logga in</button>
        </form>
    </aside>
    <article>
        <img src="face.jpeg" class="portrait" alt="Ett ansikte">
        <h2>Detta är en artikelrubrik</h2>
        <p>Detta är sidans själva huvudinnehåll. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi corporis dolores ex mollitia, optio quas, quibusdam ratione rem sed sit tempore veritatis voluptate? Ad architecto beatae commodi ipsum itaque, perspiciatis.</p>
        <img src="floating.jpeg" alt="En flytande kvinna">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque debitis delectus doloribus ex excepturi explicabo facere fuga impedit, laborum nobis non optio pariatur porro praesentium quasi quibusdam, quos repudiandae voluptatem.</p>
    </article>
    <footer>
        <h3>Detta är sidans sidfot</h3>
        <p>Här brukar man lägga länkar och information om sidan</p>
    </footer>
</body>
</html>

CSS

* {
    /* Gör så att padding-värdet inte läggs till bredden på elementet */
    box-sizing: border-box;
}
 
body {
    /* Typsnittsfamiljen ska vara Helvetica, därefter Arial, därefter sans-serif */
}
 
aside, article, header, footer {
    /* Sätt en utfyllnad på 2em på elementen aside, article, header och footer */
}
 
header {
    /* Sätt bakgrundsfärgen till lightskyblue */
}
 
aside {
    /* Skapa ett vänster-flytande element som är 30% av dokumentet */
}
 
article {
    /* Skapa ett vänster-flytande element som är 70% av dokumentet med en 1px bred heldragen vänster-kant med färgen lightskyblue */
}
 
footer {
    /* Lägg elementet efter alla flytande element och sätt bakgrundsfärgen till aliceblue */
}
 
img {
    /* Gör så att ingen bild kan vara bredare än maximalt 100% */
}
 
img.portrait {
    /* Skapa ett höger-flytande element med bredden 6em och en 1em tjock marginal överallt utom till höger där marginalen helt ska tas bort */
}
 
label {
    /* Visa elementet som ett block, ge den en toppmarginal på 1em, färgen grå och en textstorlek på 0.8em */
}
 
input {
    /* Gör så att elementet tar upp 100% av bredden och sätt höjden till 2em */
}
 
button {
    /* Ge bakgrunden färgen lightskyblue, själva texten till white, sätt höjden till 2em, ta bort alla kantlinjer och sätt topp-marginalen till 1em */
}