• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Co ustawić do pozycjonowania elementów na stronie?

VPS Starter Arubacloud
0 głosów
396 wizyt
pytanie zadane 22 sierpnia 2022 w HTML i CSS przez Yorweth Obywatel (1,310 p.)

<!DOCTYPE html>
<html lang="pl-PL">
<head>
    
    <meta charset="UTF-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>Tytuł</title>
    
    <link rel="stylesheet" href="styles/main.css" />
</head>
<body>
   
    <section class="content">
        <secton class="rectengle_note">

        </secton>
        <secton class="rectengle_calendar">

        </secton>
        <secton class="rectengle_pictures">

        </secton>
        <secton class="rectengle_other">

        </secton>
    </section>
    
    <!-- Site footer -->
    <footer>
<div class="logo_container">

            <img src="img/logo.png" alt="website logo"/>

        </div>

            <section class="info">

                <h2>About Us</h2>

            </section>

            <secion class="focials">

                <h2>Social</h2>

                <ul>

                    <li>Facebook</li>

                    <li>Instagram</li>

                    <li>Linkedin</li>

                </ul>

            </secion>

            <section class="contacts">

                <h2>Contacts</h2>

                <ul>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul>

            </section>

        <section class="copywrite">

            &copy; 2022 AlphaMind. All Rights Reserved.

            <a href="#">Terms&amp; Conditions</a>

            <a href="#">Privacy Policy</a>

        </section>


    </footer>
</body>
</html>
:root{
    --green:#17EAD0;
    --pink:#0076EA;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    list-style: none;
    text-decoration: none;
}
html{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}
body{
    background: linear-gradient(to left top, var(--pink),var(--green));
    width:100vw;
    height: 100vh;
    display: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.content{
    width:76%;
    height: 76%;
    background: linear-gradient(to left top,  rgba(0,0,0,0.75), rgba(0,0,0,0.25));
    border-radius:20px;
    box-shadow: 0px 0px 25px rgba(0,0,0,0.75);
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
}
footer{
    width:100%;
    height: auto;
    position:fixed;
    bottom:0;
    left:0;
    overflow: hidden;
    padding: 30px 20px 0px 30px;
    background: linear-gradient(to left top,  rgba(0,0,0,0.5), rgba(0,0,0,0.1));
    box-shadow: 0 0 9px black;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
}
.logo_container{
    width: 25%;
    height: 100%;
    display: block;
    float:left;
}
.logo_container img{
    width: 150px;
    height: 100%;
}
.info{
    width: 25%;
    height:100%;
    float:left;
}
.focials{
    width:25%;
    height: 100%;
    float:left;
}
.contacts{
    width:25%;
    height: 100%;
    float:left;
}
.copywrite{
    width:100%;
    clear:both;
    text-align: center;
    padding-top:20px;
}
.copywrite a{
    color: white;
}

Cześć

Wiem, że mój kod nie jest responsywny i chciałbym go dlatego zmienić oraz dlatego, że stopka najeżdża mi na content. 

Szczerze nie wiem czego zastosować, czy grid czy flexbox, co o tym sądzicie? 

Chciałbym nauczyć się tych technik, dlatego również jeżeli macie dobry film który to wyjaśnia na jakimś większym przykładzie chętnie poproszę o taki! 

Ustawiając wszystko w grid-template-areas wszystko ładnie się układa, ale nie wiem czy przejrzyste jest dzielenie strony na około 8x8 i rozpisywanie wszędzie area, w dodatku gdy to już poukładam nie wiem jak prawidłowo ułożyć elementy w środku... Czy do wielkości layautu użyć grida, a do ustawienia elementów wewnątrz flexa?

komentarz 22 sierpnia 2022 przez VBService Ekspert (251,210 p.)
edycja 23 sierpnia 2022 przez VBService

Czy do wielkości layautu użyć grida, a do ustawienia elementów wewnątrz flexa?

Jak najbardziej możesz łączyć grid z flex przykłady

 

BTW, tu masz błąd

body{
    background: linear-gradient(to left top, var(--pink),var(--green));
    width:100vw;
    height: 100vh;
    display: relative; /* TUTAJ */
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

 

chodziło Tobie pewnie o ...

body{
    background: linear-gradient(to left top, var(--pink),var(--green));
    width:100vw;
    height: 100vh;

    position: relative;
    display: flex;

    justify-content: center;
    align-items: center;
    overflow: hidden;
}

 

 

P.S. ciekawy kolor --pink  smiley, który

Color #0076ea contains mainly BLUE color.

chyba chodziło o #EA0076 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
3 odpowiedzi 1,658 wizyt
pytanie zadane 20 października 2016 w HTML i CSS przez kieryk123 Początkujący (300 p.)
0 głosów
1 odpowiedź 298 wizyt
pytanie zadane 3 stycznia 2020 w HTML i CSS przez BlvckFox Gaduła (4,240 p.)
0 głosów
1 odpowiedź 680 wizyt
pytanie zadane 25 lipca 2018 w HTML i CSS przez agipacz Początkujący (460 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...