Sablon

[[oktatas:web:html|< HTML]] ====== HTML elrendezések ====== ===== Háromoszlopos =====






Sablon





	fejrész
	menü
	
		baloldal
		
							
				
				Lorem ipsum
				
				
				Lorem ...
				
			
		
		jobboldal
	
	lábrész


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