Fabio Mosti
consulente informatico
stressato e bastardo

realizzazione siti internet con xhtml/css parte 2

12/06/2012 - realizzazione siti internet con xhtml/css parte 2
tags: css, web design, xhtml
benvenuti aspiranti web designer al nostro secondo incontro con l'impaginazione con xhtml e css; questa volta vediamo alcuni templates elementari basati sul concept generico delle due colonne affiancate. Iniziamo col vedere il sorgente html che rimarrà invariato per i vari esempi mentre cambieranno leggermente le regole css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="./stile2.css" />
        <title>bozza 02</title>
    </head>
    <body>
		<div id="menu">
			<ul>
				<li>elemento 1</li>
				<li>elemento 2</li>
				<li>elemento 3</li>
				<li>elemento 4</li>
				<li>elemento 5</li>
			</ul>
		</div>
		<div id="contenuti">
			<div id="corpo">
				<h1>titolo documento</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
				reprehenderit in voluptate velit esse cillum dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
				reprehenderit in voluptate velit esse cillum dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
				do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
				enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
				reprehenderit in voluptate velit esse cillum dolore eu fugiat 
				nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
				sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
    </body>
</html>
la struttura quindi è formata da due colonne affiancate, la prima contenente una lista (che si trasformerà in menù in una delle prossime lezioni) e la seconda dedicata al testo. L'effetto che andremo ad ottenere è il seguente:



il foglio di stile è molto semplice:
html, body {
	height: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
}

body {
	font-family: verdana;
	font-size: 0.8em;
	margin: 0px;
	padding: 0px;
}

h1 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

p {
	line-height: 1.5;
	text-align: justify;
	text-indent: 3em;
	margin: 20px 0px;
	padding: 0px;
}

ul {
	margin: 0px;
	padding: 0px;
}

#corpo {
	padding: 20px;
}

#menu {
	background-color: #dddddd;
	width: 160px;
	position: absolute;
}

#contenuti {
	background-color: #eeeeee;
	margin-left: 160px;
	min-height: 100%;
	padding: 0px;
}
come è possibile notare, le colonne si adattano al contenuto e in particolare si noterà che la colonna di sinistra è più corta della destra e questo avviene in quanto l'altezza è lasciata in automatico; volendo entrambe le colonne che si estendono in altezza sarebbe errato assegnare anche a #menu l'attributo min-height: 100% in quanto questo produrrebbe effetti imprevisti nel caso in cui il contenuto di uno dei due ecceda la viewport (provate!).

per ottenere l'effetto della figura sottostante è necessario impostare per entrambi i div l'attributo height a 100% e per #contenuti (che ragionevolmente potrebbe eccedere la viewport) impostare l'attributo overflow a auto.



ovviamente chi ci farà sudare sette camicie è Internet Explorer 7 (argh), che fra i suoi vari bug ne ha uno bellissimo sui div con height 100% risolvibile fortunatamente assegnando overflow hidden al container. In sostanza riepilogando il css compatibile con Firefox e con entrambe le versioni di Explorer è questo:
html, body {
	height: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

body {
	font-family: verdana;
	font-size: 0.8em;
	margin: 0px;
	padding: 0px;
}

h1 {
	font-size: 1.3em;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

p {
	line-height: 1.5;
	text-align: justify;
	text-indent: 3em;
	margin: 20px 0px;
	padding: 0px;
}

ul {
	margin: 0px;
	padding: 40px;
}

#menu {
	background-color: #dddddd;
	width: 160px;
	height: 100%;
	position: absolute;
	left: 0px;
}

#contenuti {
	background-color: #eeeeee;
	margin: 0px;
	margin-left: 160px;
	height: 100%;
	overflow: auto;
	padding: 0px;
}

#corpo {
	padding: 20px;
}
e con questo abbiamo visto il nostro semplice template a due colonne. La prossima volta vedremo come aggiungere un header e un footer per ottenere un template leggermente più complesso e tutto sommato già «commercializzabile».

questo template...  
occupa l'intero schermo?
è fluido? complessivamente è fluido sia in orizzontale che in verticale
anche se la colonna di sinistra è rigida in orizzontale
come si comporta con i contenuti lunghi? la colonna dei contenuti si adatta, compare una barra di scorrimento sulla destra
con quali browser è stato provato? Mozilla Firefox 12.0, Microsoft Internet Explorer 7 e 8 su Microsoft Windows XP
Warning: Illegal string offset 'codice' in /var/www/vhosts/videoart000003/httpdocs/_codice/_templates/_default_/_template.footers_pagina.php on line 10