Skocz do zawartości

Szyk diva width 100% z tłem, a wewnętrzna zawartość


Gość
 Udostępnij

Rekomendowane odpowiedzi

Witam  Od razu zaznaczę, że w sumie nie wiedziałem jak to nazwać, więc nazwałem tak... dziwnie. 

Ogólnie nie chodzi mi tu o stricte pomoc, a radę, czy też opinię. Ogólnie polubiłem robienie stron na zasadzie dwóch divów: pierwszy, który ma tło i rozciągnięte jest na 100%, a w nim właściwa zawartość z X width. I obecnie realizuje to na tej zasadzie, że:

- Mam diva konkretnego elementu, np. nav/header/footer/main który ma width: 1000% i drugą klasę, która ustala tło (np. .stopka green-bg);

- Druga diva, "wrapper" który jest wewnątrz nav/header/footer/main, który ma width w media queries i margin:0 auto. I w nim jest cała treść, tj. menu, zawartość danej podstrony itd., czyli wygląda to tak dla przykładu:

<header class="header">
        <div class="top">
            <div class="wrapper">
                <div class="title">
                    <h1><a href="index.html"></a></h1>>
                </div>
                <div class="account">
                    <span class="login"><a href="#"></a></span>
                    <span class="register grn"><a href="#"></a></span>
                </div>
                <div style="clearboth"></div>
            </div>
        </div>
</header>

Gdzie klasa "header" nie ma żadnego CSS, wrapper width zależnie od RWD i margin:0 auto dla wyśrodkowania, a klasa "top" ma width 100% i wszystko czego chcę.

I ogólnie pytam o to dlatego, że kiedy chcę robić bardziej "skomplikowane" treści, to bawię się w rodziców i dzieci, więc wszędzie tego wrappera musze ustalać. Przez co jak mam rozwijane menu to linijka wygląda tak:

.top-nav > .wrapper > ul > li > ul > li > a{

I nie wiem, czy poprawniej byłoby dać wrappera na 100%, a ustaloną szerokość dawać konkretnemu elementowi (header/nav/main/section/footer), czy zostawić tak jak jest Obecna opcja daje mi ten profit, że przy media queries muszę ustalać tylko szerokość wrappera, a nie osobno headeru/nav/main/footer, ale z kolei wszedzie musze ustawiać rodzicielstwo wrappera (nie mogę tego robić na zasadzie top-nav li bo mam ich kilka). 

Więc jak będzie poprawniej i "lepiej"?

Odnośnik do komentarza
Udostępnij na innych stronach

Bootstrapa nie strawię, już wolę sobie sam pisać RWD niż brać "gotowce". Dłużej mi schodzi ogarnięcie jak je modyfikować, i robię większy syf w kodzie, niż samemu pisać od zera. No i jakoś tak więcej satysfakcji. PHP Storm którego mam daje fajne możliwości tworzenia projektów pod różne tego typu bajery, ale korzystam z Boilerplate co najwyżej. Bootstrap nigdy :v Takie skrzywienie. 

@Mativve

Nie zauważyłem Twojego postu najpierw. Ten link do CAŁEGO kursu html i css to jakaś sugestia? Nie znajdę tam chyba odpowiedzi na moje pytanie nie wałkując całego kursu, a jakoś nie lubię przerabiać czegoś, co umiem >.>

Edytowane przez Gość
Odnośnik do komentarza
Udostępnij na innych stronach

Wiadomo, co kto lubi. Ja mam skrzywienie np. do NodeJS (jak można wykorzystać JS jako język po stronie serwera..), ale jednak będę musiał się tej technologii w końcu nauczyć bo wiele obojętnie co o niej nie myślę to wiele rzeczy można dzięki niej zrobić prościej niż np. w PHP  

System gridów bootstrapa to najlepsza rzecz jaką wprowadzili, jest genialny 

Odnośnik do komentarza
Udostępnij na innych stronach

10 godzin temu, Salvation napisał:

Po co bawisz się w takie długie ścieżki? Nie lepiej <ul> nadać ID lub CLASS i z tego miejsca zacząć?

Pozwolę sobie uzupełnić wypowiedź ( rade ).

Selektor potomka znaczni skrócił by twój zapis.

Dzieki temu wystylizowałbyś wszystkie okreslone elementy. A selektor dziecka posłużyłby ci do wystylizowania konkretnego elementu co zresztą mógłbyś zastąpić klasą. O czym wspomniał @Salvation .

Odnośnik do komentarza
Udostępnij na innych stronach

11 godzin temu, Salvation napisał:

Po co bawisz się w takie długie ścieżki? Nie lepiej <ul> nadać ID lub CLASS i z tego miejsca zacząć?

Czyli po prostu, jak mam:

.top-nav > .wrapper > ul > li > ul > li > a{ xxx }

To zamiast tego zrobić:

.klasa { xxx }

? W sumie nie wiem czemu tak męczę te parent-child, chyba dlatego, że dzięki temu chcąc nie chcąc tylko jeden konkretny element będzie mieć te klasy :v Teraz w sumie faktycznie to takie na siłę.

34 minuty temu, Master Yoga napisał:

Pozwolę sobie uzupełnić wypowiedź ( rade ).

Selektor potomka znaczni skrócił by twój zapis.

Dzieki temu wystylizowałbyś wszystkie okreslone elementy. A selektor dziecka posłużyłby ci do wystylizowania konkretnego elementu co zresztą mógłbyś zastąpić klasą. O czym wspomniał @Salvation .

 

 

Tego nie rozumiem. Tak jakbyś tłumaczył zupełnie na odwrót to co Salvation, żebym właśnie używał rodziców i dzieci, co dotychczas robiłem. 

Odnośnik do komentarza
Udostępnij na innych stronach

  • Ekspert

CSS jest językiem opisowym selektorów języka HTML. Po to powstały klasy, żeby ich używać. Przykładowo chcesz w dwóch miejscach strony umieścić identyczny element, to co wtedy? Będziesz pisał znowu ścieżkę z 10 elementów i wkleisz do niej identyczny kod, który już użyłeś wcześniej? To jest bez sensu i proszę takiego zabiegu nie stosować.

To, że ktoś robi strony "bo lubi" i nie ma wykształcenia stricte Informatycznego, nie oznacza, żeby stosować się do technologii w inny sposób niż pozostali. Bo raz, że CSS będzie zajmował dużo więcej miejsca niż innych, to dodatkowo zmiany - przykładowo tych dwóch elementów co wspomniałem wcześniej - będą zajmować 2x więcej czasu i stanie się to nieoptymalne, bo w 2 miejscach trzeba będzie to zmienić. Pomijam już znalezienie tych elementów po tak długich ścieżkach.

Edytowane przez Salvation
Odnośnik do komentarza
Udostępnij na innych stronach

8 godzin temu, Salvation napisał:

CSS jest językiem opisowym selektorów języka HTML. Po to powstały klasy, żeby ich używać. Przykładowo chcesz w dwóch miejscach strony umieścić identyczny element, to co wtedy? Będziesz pisał znowu ścieżkę z 10 elementów i wkleisz do niej identyczny kod, który już użyłeś wcześniej? To jest bez sensu i proszę takiego zabiegu nie stosować.

To, że ktoś robi strony "bo lubi" i nie ma wykształcenia stricte Informatycznego, nie oznacza, żeby stosować się do technologii w inny sposób niż pozostali. Bo raz, że CSS będzie zajmował dużo więcej miejsca niż innych, to dodatkowo zmiany - przykładowo tych dwóch elementów co wspomniałem wcześniej - będą zajmować 2x więcej czasu i stanie się to nieoptymalne, bo w 2 miejscach trzeba będzie to zmienić. Pomijam już znalezienie tych elementów po tak długich ścieżkach.

Merytorycznie.

Mam nadzieję, że to tylko moja nadinterpretacja. Ale w pierwszym zdaniu nie miałeś chyba na myśli, iż CSS składa się z selektorów HTML ?

Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

×