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.
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:
img01.jpg (background-image: url(img01.jpg);)
