Obal <body>, nebo <div id=container>?
Ve standardním režimu lze značku <body> stylovat jako normální <div>. Má to cenu?
Zadáme jednoduchý CSS kód.
body {margin: auto; width: 960px}K jednoduchému HTML:
<!doctype html>
<title>Titulek</title>
<h1>Nadpis</h1>
<p>OdstavecA máme vycentrovanou 960 pixelů širokou stránku bez nějakého balastu v HTML. Není to skvělé? Funkční všude od Exploreru 6.
Jenže…
- Vícenásobné pozadí
- Řešené kvůli starším prohlížečům několika obaly (každý obal má jeden obrázek) a najednou se celá stránka musí předělávat, protože
<body>už není čím obalit. - Lightbox skript
- Má najednou problém se připlácnout na stránku, protože s omezenou šířkou
<body>vůbec nepočítá.
Zdá se tedy, že používat obal <div id=container> má pořád smysl.
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.