Margin-bottom nie działa w górę.

pytanie zadane 8 października 2021 w HTML i CSS przez Rever Początkujący (290 p.)

Witam, mam mały problem, ponieważ nie mogę poruszyć <footer> do góry. Wie ktoś co zrobić, lub macie jakieś propozycje?

header{
    text-align: center;
    color: white;
    font-size: 50px;
    padding-bottom: 15px;
    padding-top: 15px;
}
.menu{
    background-color:#333366;
    margin-top: -10px;
    width: 1250px;
    margin-left: 150px;
}

.nav{
    background-color:#dddddd;

    width: 350px;
    margin-left: 150px;
    height: 450px;
    float: left;
}
.con{
    background-color:gray;

    width: 350px;
    margin-right: 100px;
    height: 450px;
    margin-bottom: 100px;
    width: 900px;
    display: inline-block;
}
.content{
   text-align: center;
   font-size: 30px;
}
footer{
    background-color:gray;
    margin-left: 150px;
    height: 100px;
    width: 1250px;
    margin-bottom: 200px;
    clear: both;
}

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Site</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="menu">
    <header>Logo</header>
</div>

<div class="nav">
    <br><b>Nawigation page:</b>
    <ol type="1">
        <a href=""><li>Page1</li></a>
        <a href=""><li>Page2</li></a>
        <a href=""><li>Page3</li></a>
        <a href=""><li>Page4</li></a>
        <a href=""><li>Page5</li></a>
        <a href=""><li>Page6</li></a>
</div>
<div class="con">
    <article><br><br><div class="content"><b>Content</b></div><br><br><br>
Strona testowa przedstawiajaca pozycjonowanie na stronie elementow
<ul>
    <li>header</li>
    <li>section</li>
    <li>nav</li>
    <li>article</li>
    <li>footer</li>
</ul>
    </article>
</div>
    <footer>
        Autor strony: Imie i nazwisko / Ostatnia data modyfikacji: 07.10.2021
    </footer>
</body>
</html>

2 odpowiedzi

odpowiedź 8 października 2021 przez Vese Obywatel (1,160 p.)
wybrane 8 października 2021 przez Rever

Najlepsza

Przeszkadza w tym dolny margines elementu wyżej nad footerem, czyli div z klasą con. Warto go usunąć.
A poza tym, to margin-bottom nie służy do unoszenia elementu wyżej na stronie.

Polecałbym ogólnie usunięcie wszystkich zbędnych marginesów, najlepiej z użyciem konsoli w przeglądarce. Masz tam całkiem dobry obraz tego, co się dzieje z elementami na stronie. Marginesy te to głównie lewe u wszystkich elementów oraz górny, ujemny dla elementu menu. Gdy nie chcesz tego odstępu pomiędzy nim a ramą strony, ustaw w CSS:

body {
    margin: 0;
}

1	komentarz 8 października 2021 przez Rever Początkujący (290 p.) Dziękuje, pomogło :)

odpowiedź 8 października 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

Zainteresuj się Flexboxem i Gridem zamiast borykać się z przestarząłym flot:left. Naprawdę znika wiele problemów.

komentarz 8 października 2021 przez Rever Początkujący (290 p.)

Niestety, ale muszę robić wszystko, jestem w 1 klasie na kierunku technik programista, znam podstawy grida i flexboxa, lecz na razie nie możemy z niego korzystać, bo robimy podstawy :)

komentarz 8 października 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

Nóż się w kieszeni otwiera... Prehistoria w akcji. Dobrze, że chociaż CSS już nauczyciel wprowadził.

komentarz 8 października 2021 przez ScriptyChris Mędrzec (190,190 p.)

przestarząłym flot:left

@SzkolnyAdmin, float sam w sobie nie jest przestarzały, bo nadal nadaje się do tego, do czego został pierwotnie stworzony - do opływania elementu przez tekst (i inne elementy typu inline). Problem w tym, że przez lata nie było lepszych rozwiązań pokroju wspomnianych Grid czy Flexbox, przez co float był używany jako hack do układania layoutu.

1	komentarz 8 października 2021 przez SzkolnyAdmin Szeryf (86,360 p.) Wiem o tym, do czego i dziś float jest wykorzystywany, ale obecnie do układania bloków na stronie, daruj...