HTML elrendezések

Szerző: Sallai András
Copyright © 2024, Sallai András
Szerkesztve: 2024
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Háromoszlopos

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sablon</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
 
<div id="content">
	<header>fejrész</header>
	<nav>menü</nav>
	<div id="rest">
		<aside id="sidebar1">baloldal</aside>
		<div id="main">
			<section id="bekezdes1">				
				<h3>
				Lorem ipsum
				</h3>
				<p>
				Lorem ...
				</p>
			</section>
		</div>
		<aside id="sidebar2">jobboldal</aside>
	</div>
	<footer>lábrész</footer>
</div>
 
</body>
</html>

style.css

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ó.

<div id="boxContainerContainer">
    <div id="boxContainer">
	alma
    </div>
</div>

#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.

<div id="boxContainerContainer">
    <div id="boxContainer">
	alma
    </div>
</div>

#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