[[oktatas:web:html|< HTML]] ====== HTML elrendezések ====== * **Szerző:** Sallai András * Copyright (c) 2024, Sallai András * Szerkesztve: 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]] * Web: https://szit.hu ===== Háromoszlopos ===== Sablon
fejrész

Lorem ipsum

Lorem ...

body { margin: 0; padding: 0; } header { background-color: #c8c800; padding: 10px; } nav { background-color: #c0c000; color: white; padding: 10px; } #rest { position: absolute; top: 80px; bottom: 40px; left: 0; right: 0; } #sidebar1 { float:left; width: 20%; background-color: #e8e800; height: 100%; } #main { float:left; width: 60%; background-color: #d8d800; height: 100%; } #sidebar2 { float:right; width: 20%; background-color: #e8e800; height: 100%; } footer { position: absolute; width: 100%; bottom: 0; height: 40px; background-color: #c8c800; } section#bekezdes1 { height: 90%; padding: 5px 10% 0 10%; margin: 5% 5%; background-color: white; border-radius: 5px; overflow-y: auto; } section#bekezdes1 p { text-align: justify; } Működés: ===== Igazítás ===== ==== Blokk elemek középre igazítása ==== A blokk (block) elemek igazából nem igazíthatók, hiszen pont az a tulajdonságuk, hogy a tartalmazó doboz bal szélétől a jobb széléig érnek. Így nincs mit igazítani. Amit mi itt szeretnénk valójában az a margó. Mégpedig mindkét oldalon egyenlő hosszúságú margó.
alma
#boxContainer { border-style: solid; border-width: 1px; width: 50%; text-align: left; margin: auto; /* Igazítás a margin tulajdonsággal */ display: block; }
alma
A blokk elemen belül a szöveget, persze továbbra is a text-align tulajdonsággal állítjuk. ==== Soron-belüli-blokk elemek középre igazítása ==== A soron belüli blokk (inline-block) elemeket szövegként igazíthatjuk az alábbiakhoz hasonlóan.
alma
#boxContainerContainer { text-align: center; /* Igazítás a text-align tulajdonsággal */ } #boxContainer { border-style: solid; border-width: 1px; width: 50%; text-align: left; margin: auto; display: inline-block; } Működés:
alma