Problem z pozycjonowaniem div'ów obok siebie i responsywnością HTML CSS

0

Witam!
Mam problem z wyświetlaniem 3 div'ów obok siebie, a mianowicie jeżeli ustawię ich szerokość (nieważne czy procentowo, czy w pikselach) to przy zmniejszeniu rozdzielczości ekranu, ostatni z nich przeskakuje niżej. Nie mam pojęcia również dlaczego pod obrazkiem w divie po lewej i prawej stronie pojawia się dodatkowa, pusta przestrzeń. Próbuję stworzyć stronę, która będzie automatycznie się dopasowywać do rozdzielczości ekranu i nie wiem, w czym dokładnie tkwi problem. Jeżeli chodzi o CSS to dopiero się uczę, dlatego proszę o pomoc.

Tak strona wygląda
Tak wygląda

A tak chciałbym, żeby strona wyglądała
Tak chciałbym, żeby wyglądała

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Dark Triumph Records">
        <meta name="keywords" content="black metal">
        <meta name="author" content="Ereb">
        <title>
            Dark Triumph Records
        </title>
        <link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua&amp;subset=latin-ext" rel="stylesheet">
        <link rel="icon" href="favicon.ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div id="container">
            <br>
            <div id="header">
                <img class="logo" src="img/dark-triumph-logo-3.png" alt="Dark Triumph Records" />
            </div>
            <div id="nav">
                <a class="menu active" href="#">AKTUALNOŚCI</a> | <a class="menu" href="#">ZINE</a> | <a class="menu" href="#">ZESPOŁY</a> | <a class="menu" href="#">WYDAWNICTWA</a> | <a class="menu" href="#">O NAS</a> | <a class="menu" href="#">KONTAKT</a>
            </div>
                <div id="ad">
                    <img class="ad" src="img/ad.jpg" alt="Ad"/>
                </div>
                <div id="content">
                
                </div>
                <div id="ad">
                    <img class="ad" src="img/ad.jpg" alt="Ad"/>
                </div>
            <div id="footer">
                
            </div>
        </div>
    </body>
</html>
* {
    margin: 0;
    padding: 0;
    font-family: 'Inknut Antiqua', serif;
    box-sizing: border-box;
    align-content: center;
}

body {
    background-color: #adadad;
    color: white;
}

#container {
    max-width: 1000px;
    display: block;
    margin: 0 auto;
    padding: 0;
}

#header {
    width: 100%;
    display: block;
    padding: 10px;
}

.logo {
    width: 100%;
}

#nav {
    display: block;
    text-align: center;
    margin: 10px;
    padding: 5px;
    border: 1px;
    border-color: white;
    border-style: solid;
}

.menu {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

.menu:hover {
    color: black;
}

.active {
    color: black;
}

.ad {
    width: 100%;
}

#content {
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px;
    border-style: solid;
    border-color: white;
    width: 53.6%;
    height: 710px;
}

#ad {
    float: left;
    margin: 10px;
    padding: 10px;
    border: 1px;
    border-style: solid;
    border-color: white;
    width: 20.2%;
}

#footer {
    clear: both;
    color: white;
    font-size: 10px;
    text-align: center;
}

Co robię źle? Proszę o pomoc. Z góry serdecznie dziękuję.

PS. Strona będzie wykorzystana na moje własne potrzeby, nie robię jej dla nikogo innego.

3

Problem z szerokością polega na tym, że właściwość border-box zawiera dopełnienie i obramowanie, ale nie margines. Więc musisz go odjąć od szerokości np za pomocą calc(). Przy float należy pamiętać o jego wyczyszczeniu np. za pomocą clearfix

#ad::after {
  content: "";
  clear: both;
  display: table;
}

Jeżeli masz odstępy między kolumnami to równie dobrze można użyć inline-block
Odkąd pojawił się flexbox nie ma sensu budować układu strony na float.
Jeżeli chodzi o odstep pod obrazkami to jest to spowodowanie tym, że img jest elementem liniowym, wystarczy dodać display: block;

0

Po co ci znacznik br w HTML

0

@pablop76 Dziękuję! Zastosowanie calc() pomogło.
@piotrek1998 Żeby robić odstępy między konkretnymi rzeczami. Jeżeli można inaczej to zrobić, to chętnie dowiem się jak.

Mam jeszcze jeden problem. Co zrobić, gdy chciałbym, aby #content miał stałą wysokość, taką samą jak #ad, lecz żeby skalował się razem z #ad? Aktualnie przy zmniejszaniu rozdzielczości #ad się zmniejsza proporcjonalnie, a #content ma cały czas taką samą wysokość.

1

Po co ci znacznik br w HTML
[...]
Żeby robić odstępy między konkretnymi rzeczami. Jeżeli można inaczej to zrobić, to chętnie dowiem się jak.

No zasadniczo za tematy związane z prezentacją powinny odpowiadać style CSS. Zamiast wstawiać <BR> to określ dla poszczególnych elementów strony takie atrybuty jak padding czy margin i tym operuj podczas ustawiana układu/wyglądu.

0

chciałbym, aby #content miał stałą wysokość, taką samą jak #ad, lecz żeby skalował się razem z #ad?

Może to nie jest odpowiedź wprost na Twoje pytanie, ale rzuć okiem na ten wątek: [CSS] DIV lewy z IMG i prawy z MENU - responsywnie. Dość podobny problem był tam poruszany, może jak przejrzysz zaproponowane rozwiązanie, to wyciągniesz jakieś wniosku w swojej sprawie :)

0

A da się to zrobić zachowując obecną strukturę, nie korzystając z flex?

1

Tak. Szukaj pod hasłem equal height css

0

@pablop76 Szukałem, ale nie znalazłem niczego, co by mi pomogło.

0

Największy problem mam z tym, że wysokość #ad musi wynosić zawsze 600px i ma się zmniejszać proporcjonalnie do rozdzielczości ekranu, a ustawiając #content {min-height: 600px} przy mniejszej rozdzielczości, ta wysokość pozostaje stała. Próbowałem flexem i display:table, ale nie mogę sobie z tym sam poradzić. Proszę o pomoc.

1

Przeczytaj, co napisałeś: **"musi wynosić ZAWSZE" ** oraz **"ma się zmniejszać" **. To są trochę sprzeczne wymagania :p

0

Orlan18 napisz Jeszce raz o co chodzi tylko powoli

0

Obrazki w divach #ad mają wymiary 160x600px. Przy zmniejszaniu rozdzielczości, ich rozmiar jest pomniejszany i dopasowywany do rozdzielczości ekranu. Chciałbym, aby dolna krawędź (czyli wysokość) diva #content kończyła się równo z divem #content. Również chcę, żeby cała ramka skalowała się tak samo, jak obrazki w #ad. W przyszłości dodam trochę tekstu do #content, ale raczej nie wypełni on idealnie miejsca.
Może tutaj będzie to bardziej widoczne, o co mi chodzi: https://jsfiddle.net/mtszmlr/ye47j93a/

0

Dobra, jednak poradziłem sobie z kolumnami. Przepisałem całość na flex od nowa i jednak zadziałało. Teraz niestety wszystkie elementy znajdują się po lewej stronie ekranu, zamiast na środku, jak to mogę naprawić?

0

Wrzuć kod po zmianach

1

Tak jak napisał @piotrek1998 - wrzuć kod. Do centrowania zawartości we flexboxie służy atrybut css'owy "justify-content" z wartością "center" na elemencie, który zawiera w sobie te rzeczy, które chcesz wycentrować. Polecam tę stronkę do nauczenia się flexboxa: https://flexboxfroggy.com/#pl

1 użytkowników online, w tym zalogowanych: 0, gości: 1