HTML div wrapper

pytanie zadane 14 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,140 p.)

Jakie ma zadanie div wrapper przy pisaniu strony w sekcji main.

Czy oprócz nadaniu szerokości i środkowaniu elementów ma inne cele ?. Patrząc na mój poniższy kod czy nie wystarczy sie odnieść się do body pominąwszy div wrapper ?

<body class="page2">
        <div class="wrapper">
            <header class="page2-header">
                <h1>About me</h1>
                <hr>
                <img src="headerpic.png" alt="header picture" class="headerpic">
            </header>
            <main>
                <p class="aboutmetext">
                     I'm learning how to make websites. Considering my soft skills I would like to emphasize my exceptional organizational and communication skills. I am a highly-motivated person who is willing to go above and beyond on any project and to learn valuable skills on my own time.
                </p>
                <h2 class="aboutmeinfo1">Get In touch</h2>
                <h1>Contact</h1>
                <p class="aboutmeinfo2">
                    Tel: 543-343-252 <br>
                    Email: kontakt@gmail.com
                </p>
            </main>
            <footer class="aboutmefooter">
                <p>Copyright &copy;</p>
            </footer>
        </div>
    </body>

1 odpowiedź

odpowiedź 14 lipca 2020 przez radek024 Szeryf (77,160 p.)
wybrane 14 lipca 2020 przez gmcode

Najlepsza

div.wrapper w tym momencie nie odnosi się do niczego konkretnego. To klasa nadana divowi. Na ogół wrapperowi (czy też containerowi) następujący zapis:

.wrapper{
 max-width: 960px;
 width: 100%;
 margin: 0 auto;
 padding: 0 2%;
}

Efektem czego faktycznie służy on do wyśrodkowania treści na stronie w poziomie. Czy jest konieczny? Tak jak sam zauważyłeś, można zrobić to samo za pomocą znacznika body. Tylko co w przypadku gdy potrzebujesz czegoś poza zakresem wyśrodkowanych treści? Przy div.wrapper nie masz problemu, aby utworzyć zwykłego diva, w którym będziesz miał dostęp do pełnej szerokości ekranu (powszechnie nazywa się to container-fluid). Lepiej zostać przy rozwiązaniu gdzie stosujesz div.wrapper, ponieważ jest nieco bardziej elastyczne. Rzecz jasna nadając analogiczne wartości dla body możesz później działać za pomocą position, ale to trochę niewygodne.