Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Problem z ułożeniem bloków na stronie


17 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
wolfdz

    Stary wyjadacz

  • PipPipPip
  • 252 postów
    • Czas spędzony online: 10d 19m 41s
14
Dobra
  • LocationKraśnik

Napisano 31 grudnia 2015 - 15:10

#1

Mam pewien problem i trochę wstyd się do niego przyznać. Otóż wymyśliłem sobie jak będzie wyglądać templatka do WP, którą robię, ale mam problem z napisaniem kodu HTML. Przedstawiam fragment screena tego jak sobie to umyśliłem i gdy już wszystko mam tak jakby w głowie ułożone to problemem staje się kontener, który ma zachowywać się normalnie obejmując dwa różne bloki. Dodam, że używam Bootstrapa i Sass więc jeżeli coś nie da się za pomocą zwykłego CSSa zrobić to może Sass da radę, przyznam się, że nie używam wszystkich możliwości jakie oferuje Sass ale to dlatego, że nie wszystko jeszcze poznałem. Na razie wystarczy mi to, że arkusze stylów pisze się o wiele szybciej :D

bYzFoHy.png

 

Tak więc jak powinien wyglądać kod HTML, aby container objął to co jest w środku dwóch bloków (content & sidebar) oraz menu i header choć jeżeli chodzi o drugą parę to myślałem by dla nich zrobić po prostu drugi container i mieć tak jakby dwa albo i jeszcze trzy (bo stopka) na stronie. Macie jakieś pomysły?


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 31 grudnia 2015 - 19:34

#2

Czy container wyznacza szerokość całej strony, czy tylko jej zawartości? W tym pierwszym przypadku byłoby dużo prościej coś takiego zrobić.


  • 0

logo-green-dark.png


wolfdz

    Stary wyjadacz

  • PipPipPip
  • 252 postów
    • Czas spędzony online: 10d 19m 41s
14
Dobra
  • LocationKraśnik

Napisano 01 stycznia 2016 - 13:58

#3

Zawartości strony. Treść ma nie wychodzić po za granice containera. Jakby wyznaczał szerokość całej strony to tak, byłoby o wiele prościej XD


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 01 stycznia 2016 - 15:51

#4

W takim razie do menu i do headera musisz wsadzić osobne cointainer'y.

contentu i sidebara jakoś nie mogę sobie wyobrazić.


  • 0

logo-green-dark.png


wolfdz

    Stary wyjadacz

  • PipPipPip
  • 252 postów
    • Czas spędzony online: 10d 19m 41s
14
Dobra
  • LocationKraśnik

Napisano 01 stycznia 2016 - 16:14

#5

Tyle to i ja wiem xD

A gdyby do containera, który ma objąć część Contentu i Sidebara w Sass zrobić coś takiego, że pobieram całą szerokość tego containera a następnie odejmuje od niego pewną wartość i wychodzi mi szerokość jaką chce osiągnąć? Wiem, że da sie zaimportować sass bootstrapa do mojego, ale nie wiem jak pobrać "zmienną" odpowiedzialną za container >.>


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 01 stycznia 2016 - 16:48

#6

Szerokość containera masz chyba w zmiennych $container-sm, $container-md i $container-lg, w zależności od urządzenia i rozdzielczości. variables.scss


  • 0

logo-green-dark.png


Mattheo

    Nowy użytkownik

  • 38 postów
    • Czas spędzony online: 2d 8h 32m 56s
20
Bardzo dobra

Napisano 02 stycznia 2016 - 16:10

#7
W sumie nie wiem jaki sens ma wyciąganie w taki sposób contentu i sidebara. Jeżeli ma być to tylko dla tła to raczej dałoby się to zrobić w globalnym contencie.

Coś na takiej zasadzie?
<header> <div class="cointarner"></div> </header>
<section class="content"> <div class="content-cointainer"></div> </section>
<aside class="content"> <div class="sidebar-cointainer"></div> </aside>
.cointainer {
width: 1000px;
}

.content-cointainer {
width: 800px;
float: right;
}

.sidebar-cointainer {
width: 200px;
}

  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 02 stycznia 2016 - 18:50

#8

W sumie nie wiem jaki sens ma wyciąganie w taki sposób contentu i sidebara. Jeżeli ma być to tylko dla tła to raczej dałoby się to zrobić w globalnym contencie.

Coś na takiej zasadzie?

<header> <div class="cointarner"></div> </header>
<section class="content"> <div class="content-cointainer"></div> </section>
<aside class="content"> <div class="sidebar-cointainer"></div> </aside>
.cointainer {
width: 1000px;
}

.content-cointainer {
width: 800px;
float: right;
}

.sidebar-cointainer {
width: 200px;
}

Nie wiem w jakim celu napisałeś ten post. Nie jest on w ogóle związany z tym tematem, który jest - De facto o Bootstrapie.

Poza tym nie powinieneś używać znacznika aside jako sidebar dla całej strony. Może on się znajdować w sekcji, artykule, czy samym sidebarze, ale nie powinien on definiować samego sidebara. Następnym razem nie wstawiaj kodu, który jest semantycznie niepoprawny.


  • 0

logo-green-dark.png


przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 02 stycznia 2016 - 20:20

#9

Może on się znajdować w sekcji, artykule, czy samym sidebarze, ale nie powinien on definiować samego sidebara.

Jak zwykle uczeni się spierają :P http://html5doctor.c...side-revisited/

 

The spec has changed to allow aside to be used for secondary content, changing its context depending on whether it's contained within an article.

...

The aside element can now represent secondary content when used outside of an article.


Użytkownik przemoo83 edytował ten post 02 stycznia 2016 - 20:24

  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 02 stycznia 2016 - 21:39

#10

Jak zwykle uczeni się spierają :P http://html5doctor.c...side-revisited/

Już dzisiaj rozmawiałem na temat dostępności witryn i pod tym względem jest duża różnica między tym

<aside>
<div></div>
<div></div>
</aside>

a tym:

<div>
<aside></aside>
<aside></aside>
</div>

  • 0

logo-green-dark.png


przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 02 stycznia 2016 - 23:47

#11

 

Już dzisiaj rozmawiałem na temat dostępności witryn i pod tym względem jest duża różnica między tym

<aside>
<div></div>
<div></div>
</aside>

a tym:

<div>
<aside></aside>
<aside></aside>
</div>

Mógłbyś rozwinąć temat albo wskazać jakieś źródła? Sam jestem ciekaw jak to wygląda w praktyce bo jedyne z czym miałem styczność w tym temacie to wiele sprzecznych opinii w artykułach.


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 03 stycznia 2016 - 12:17

#12

Mógłbyś rozwinąć temat albo wskazać jakieś źródła? Sam jestem ciekaw jak to wygląda w praktyce bo jedyne z czym miałem styczność w tym temacie to wiele sprzecznych opinii w artykułach.

Poprawne zrozumienie dokumentacji WCAG będzie kluczowe.

Specyfikacja HTML5 cały czas się zmienia i chyba pozwala na takie używanie aside, jednak nie jest to dobre rozwiązanie.

Chociaż jak teraz się zastanowię, to bardziej to powinno zależeć od przeznaczenia i zawartości strony.


  • 0

logo-green-dark.png


przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 postów
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Napisano 03 stycznia 2016 - 13:17

#13

Poprawne zrozumienie dokumentacji WCAG będzie kluczowe.

Właśnie wiedziałem, że jest jakaś specyfikacja ale nie kojarzyłem nazwy. WCAG 2.0 - muszę sobie poczytać o tym.

 

Specyfikacja HTML5 cały czas się zmienia

O ile dobrze kojarzę to właśnie w jakiejś ksiżące o HTML5 było takie zdanie, które utkwiło mi w pamięci: "Prepare tu unlearn everything you've learned every few months" :P


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 04 stycznia 2016 - 08:21

#14

Panowie, to nie jest temat do roztrząsania jak używać a jak nie używać aside. Jeżeli chcecie sobie o tym porozmawiać to proponuję osobny temat.

 

Co do samego tematu to również miałem kiedyś taki problem i niestety wstyd się przyznać ale poległem :/

Próbowałem robić coś na zasadzie (zrobie inline żeby było łatwiej zobaczyć co i jak):

<div id="wrap">
  <div class="left" style="float:left;width:60%;">
    <div class="content" style="float:right;width:500px;"></div>
  </div>
  <div class="right" style="float:left;width:40%;">
    <div class="content" style="float:left;width:300px;"></div>
 </div>
</div>

Dzięki temu ten 'content' miał szerokość 800px. Ale się rozjeżdżało przy skalowaniu ;/ w momencie kiedy nad nim było menu które również miało 800px szerokości to jedno nie pasowało do drugiego ;/

 

https://jsfiddle.net/9w1e4vez/


  • 0

webDeveloper


writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 04 stycznia 2016 - 17:24

#15
Panowie, to nie jest temat do roztrząsania jak używać a jak nie używać aside. Jeżeli chcecie sobie o tym porozmawiać to proponuję osobny temat.

Niestety, ale już jest :P
  • 0

logo-green-dark.png


Zimistrz

    Stary wyjadacz

  • 465 postów
    • Czas spędzony online: 14d 2h 42m 38s
116
Znakomita!

Napisano 10 stycznia 2016 - 02:01

#16

Problem w tym, że nie ma jednego rozwiązania. A czy podane okaże się działać, zależy od reszty specyfikacji.
Jeśli podchodzisz do rzeczy wg specyfikacji html5, to menu i header są elementami niezależnymi, więc nie muszą siedzieć w żadnym wrapperze.
W szczególności przy schemacie jaki sobie założyłeś, gdzie kontenery lecą kaskadowo.

Natomiast content i sidebar klasycznie, poprzez opływanie (float:left) nałożonych na elementy zagnieżdżone będzie najbezpieczniejszy ( w tym przypadku content).
Gdy dojdziesz do AWD, ułożenie wszystkiego kaskadowo nie będzie zbyt pracochłonne.
Innym rozwiązaniem - ku któremu osobiście skłaniam się niechętnie -  jest wyświetlanie elementów jako tabelaryczne (container -> display:table; zagnieżdżone elementy-> display: table cell). Ale to wbrew wszystkiemu, nawet teorii ewolucji ;)

No i boostrapowe podejście, gdzie 12-kolumnowy grid możesz ułożyć na zasadzie

<div class="row-fluid"><!-- container -->
  <div class="span8">content</div>
  <div class="span4">sidebar</div>
</div>

Układ leci automatycznie w jednostkach %, nie pamiętam klas o wartościach w px.

Tak w ogóle to w czym jest problem ?
Tworzenie gridów to przedszkole ;)

---

Wy tu - puryści html5 -o aside'ach, a czemu na schemacie w ogóle brak logotypu i czy <figure> będzie odpowiedni do tego ? :P


  • 0

wolfdz

    Stary wyjadacz

  • PipPipPip
  • 252 postów
    • Czas spędzony online: 10d 19m 41s
14
Dobra
  • LocationKraśnik

Napisano 10 stycznia 2016 - 10:37

#17

Wybaczcie mi brak odzewu, ale nie miałem dostępu do notebooka z powodu braku klawiatury i nic nie mogłem zrobić przez ten czas :(

Jak będę dzisiaj miał trochę czasu to wypróbuje wasze propozycję choć mam przeczucie, że to nie będzie takie proste :P

@Zimistrz chodzi o to, że sidebar będzie miał inne tło niż content i nie wiedziałem jak ułożyć grid do tego aby container był w "dwóch" blokach ale nie ograniczał ich tak jakby szerokości.


  • 0

zlotas
-1
Neutralna

Napisano 19 stycznia 2016 - 19:25

#18

W razie problemów użyj poleceń z arkusza CSS


  • 0





Podone tematy Collapse

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych