Forum PHP.pl > Centrowanie strony HTML5

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

vermer

27.07.2012, 16:58:43

Witam,
zastanawiam się nad faktem centrowania strony w HTML5. W założeniu nie korzystamy tam z divów już do układania treści więc stare wyjścia z centrowany divem chyba odpadają w przedbiegach. i zastanawiam się jak to zrobić skoro strona ma strukturę

[HTML] pobierz, plaintext 
<body>
<header></header>
.
.
.
<footer></footer>
</body>
 
[HTML] pobierz, plaintext

Body ma tło jakiegoś gradientu header i footer mają miec tła rozciągnięte na 100%
A potrzebuje żeby treść tej strony była klasycznie wyśrodkowana i nie wiem zbytnio jak to zrobić tak żeby zachować tła o szerokości 100%
Czy normalnie tak jak kiedyś nadać im id powiedzmy i centrować każdy indywidualnie?

thek

27.07.2012, 18:39:05

A po co id? To co jest centrum strony to na pewno jakiś blok section... Prawda? To czemu nie użyć CSS w stylu body > section {} a chyba rozumiesz jak to działa.

vermer

27.07.2012, 19:36:42

No tak wykorzystujemy drzewo, ale ja zakładałem iż w każdym z 3 elementów boksem który będzie się centrował będzie coś innego dla tego będziemy musieli powielać kod css

thek

27.07.2012, 20:48:38

A tam powielać... Czy nie wystarczy "drzewa" tych elementów wymienić po przecinku?

Efekt przecież ten sam... No i nie zapomnijmy, że w pełni poprawny, semantyczny, html5 to więcej nowych tagów o określonym celu, więc prościej reguły css stosować.

vermer

27.07.2012, 21:34:32

No tak ale wszędzie gdzie podglądam źródła wszyscy stosują strukturę np np:

[HTML] pobierz, plaintext 
<footer>
  <div class="centered">
 
  </div>
</footer>
[HTML] pobierz, plaintext

[CSS] pobierz, plaintext 
.centered{...}
[CSS] pobierz, plaintext

thek

27.07.2012, 22:24:13

Bo pewnie używają layoutu o stałej szerokości, gdzie mają width, margin: 0 auto; a footer, header i sekcja środkowa mają jakieś tła czy gradienty, które się rozciągają na całą szerokość ekranu

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.