Vai ai contenuti
Ti trovi in:   Home > CSS Layout > Layout n.01/F

CSS Layout - CSS Template

CSS Layout fisso

Layout n.01/F - Source XHTML e CSS

Layout fisso con larghezza dimensionata in 760 pixels e con menu orizzontale
Il menu orizzontale usato descritto al punto n.01/O nella sezione Css Menu
L'immagine utilizzata nell'header proviene dalla raccolta Foto Desktop presente in questo sito.

Layout fisso n.01/F

XHTML:

<!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" xml:lang="it" lang="it">
<head>
<title>Layout fisso n.01/F</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="default01f.css" rel="stylesheet" type="text/css" title="default" />
</head>

<body>

	<div id="header">
	<h1>css template .com</h1>
	</div>

	<div id="menu">
			<ul>
			<li><a href="#" title="link 1">Link 1</a></li>
			<li><a href="#" title="link 2">Link 2</a></li>
			<li><a href="#" title="link 3">Link 3</a></li>
			<li><a href="#" title="link 4">Link 4</a></li>
			<li><a href="#" title="link 5">Link 5</a></li>
			</ul>
	</div>

<div id="content">
	<h1>CSS LAYOUT FISSO N.1/F</h1>

	<h2>1.PARAGRAFO</h2>
	
	<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  ...
	</p>
	
	<h2>2.PARAGRAFO</h2>
	
	<p>
	Vivamus mattis nisi id pede. Nunc rhoncus mauris quis  ...
	</p>
	
	<h2>3.PARAGRAFO</h2>
	
	<p>
	Sed mollis dolor nec est. Integer iaculis nonummy lorem.  ...
	</p>

</div>

<div id="footer">This Page Is Valid XHTML 1.0 Strict and Valid CSS v.2
<br />No tables have been used to make this layout<br />
</div>

</body>
</html>	
						  
						  

CSS (default01f.css):

body{
	margin: 0;
	padding: 0;
	margin-bottom: 0.95em;
	font-family: arial, helvetica, verdana, tahoma, sans-serif;
	font-size: 80%;
	color: #000;
	background-color: #fff;
	line-height: 180%;
}
#header{
	margin: 0 auto;
	width: 760px;
	height: 190px;
	border: 1px solid #000;
	border-top: 1px;
	border-bottom: 1px;
	background-image: url(img01.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-color: #B2CEDC;
	color: #000;
}
#header h1{
	margin: 0;
	font: normal 280% Georgia, "Times New Roman", Times, serif;
	color: #000;
	background-color: #B2CEDC;
	padding-left: 0.6em;
	padding-top: 0.1em;
}
#menu{
	margin: 0 auto;
	width: 760px;
	background: #41545F;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #fff;
}
#menu ul{
	margin: 0;
	padding-left: 0;
	list-style: none;
}
#menu li{
	font-size: 1.1em;
	display: inline;
	margin: 0;
	padding: 0;
}
#menu a:link, #menu a:visited{
	float: left;
	background: #41545F;
	color: #fff;
	margin: 0em;
	padding: 0.3em 1.5em 0.3em 1.5em;
	text-decoration: none;
	border-right: 1px solid #000;
}
#menu a:hover, #menu a:focus, #menu a:active{
	color: #B2CEDC;
	background: #05181E;
}
#content{
	margin: 0 auto;
	width: 740px;
	padding: 1.25em 0.8em;
	border: 1px solid #000;
	border-top: 0;
	border-bottom: 0;
	background: #fff;
	color: #000;
}
#content p {
	font-size: 100%;
	line-height: 1.8em;
	padding-left: 1em;
	padding-right: 1em;
}
#content h1 {
	padding-bottom: 0.3em;
	padding-top: 0.3em;
	font: normal 180% Georgia, "Times New Roman", Times, serif;
	color: #05181E;
	background-color: #FFFFFF;
}
#content h2{
	background: #fff;
	color: #940D1E;
	padding-bottom: 0.3em;
	font: normal 150% Georgia, "Times New Roman", Times, serif;
	border-bottom: 1px dotted #FF9006;
}
#content a:link, #content a:visited {
	font-size: 95%;	
	font-weight: normal;
	color: #41545F;
	background-color: #fff;
	text-decoration: underline;
}
#content a:hover {
	color: #fff;
	background-color: #41545F;
	text-decoration: none;
}
#footer{
	margin: 0 auto;
	width: 740px;
	background: #41545F;
	text-align: center;
	color: #fff;
	border: 1px solid #000;
	border-top: 1px;
	border-bottom: 1px;
	font-family: helvetica, arial, verdana, tahoma, sans-serif; 
	padding: 0.8em 0.8em;
}
#footer a:link, #footer a:visited {
	color: #fff;
	background-color: #41545F;
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
	color: #41545F;
	background-color: #fff;
}

JPEG:

immagine sfondo header
img01.jpg (background-image: url(img01.jpg);)

Artwork & Design Copyright 2000-     Ivano Montanari    Verona - Italy

Mappa del sito | Privacy | Informativa cookie | Accessibilità | Accesskey | Contattami

W3C Valid XHTML 1.0 Strict W3C Valid CSS ver.2 W3C-WAI Web Content Accessibility Guidelines 1.0 Level Triple-A conformance Layout senza tabelle