html
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="descriptions" content="" />
<meta name="keywords" content="" />
<title>Nita home page</title>
<link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
<!--[if lt ie 8]>
<link rel="stylesheet" type="text/css" media="screen" href="ie_win.css" />
<![endif]-->
<style type="text/css">
@font-face {
font-family: "";
src: url() format("truetype");
}
p { font-family: "Kimberley", sans-serif }
</style>
</head>
<body>
<div class="boxassoluto">
[img]img/logo.gif[/img]
</div>
<div id="links">
[img]img/img05.gif[/img] | [img]img/img06.gif[/img]
<div id="formitems">
<div id="login">
<form class="loginform" action="/user.php" method="post">
<input type="text" class="formstext" name="uname" size="12" value="User Name" />
<input type="password" class="formstext" name="pass" size="12" value='mypass'/>
<input type="hidden" name="op" value="login" />
<input type="submit" class="formsbutton" value="Login" />
</form>
</div></div>
</div>
<div id="bgcontainer">
<div id="container">
<div id="subcontainer">
<div id="header">
<h1>Nita</h1>
</div>
<div id="navigation">
<ul>
[*]sedi
[*]contatti
[*]servizi
[*]prodotti
[*]confronti
[*]links
[/list]
</div>
<div class="spazio"></div>
<div id="img"></div>
<div id="barra">
</div>
<div id="extraleft">
<div class="bottom">
<h1> Chi siamo </h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. </p>
</div>
</div>
<div id="extraright">
<div class="news">
<h3>News </h3>
<h4>Sep.14.07.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum neque eu nisl. Morbi eget ... read more </p>
<h4>Sep.09.07.</h4>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. D. read more </p>
</div>
</div>
<div id="content">
<h1>Filosofia</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem </p>
</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
css
codice:
* {
padding : 0;
margin : 0;
}
body{
font-family: arial,sans-serif;
font-size: 76%;
text-align:center; /*centra in IE 5.x*/
margin:0;
padding:0;
width:100%;
background-image: url(img/bg.gif);
background-repeat: repeat;
background-position: 70% 19%;
background-attachment: scroll;
}
/* Struttura */
#container{
width:760px;
margin-top:20px;
margin:0px auto;
text-align:left;
}
#bgcontainer {
background-image: url(img/bgcontainer2.gif);
width: 780px;
margin:0px auto;
background-repeat: repeat-y;
}
#subcontainer{
text-align: left;
background-color: #dfdddd;
}
#header {
width: 760px;
height: 35px;
background-image: url(img/header-bottom.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
#header h1{
background-image: url(img/bgheadercontenuti.gif);
display: block;
color: #d3d3d3;
background-repeat: repeat;
}
#img {
height: 140px;
border-top-width: 7px;
border-top-style: solid;
border-top-color: #efefef;
background-color: #FFFFFF;
background-image: url(img/imgnita.jpg);
}
.spazio {
background-color: #FFFFFF;
height: 15px;
}
#barra {
height: 25px;
margin-top:0px;
background-image: url(img/grid.gif);
background-repeat: no-repeat;
}
#extraleft {
width:210px; /* dimensioni per Opera 5 */
width:210px; /* dimensioni per Explorer 5.x */
width:210px; /* dimensioni per browser standard compliant */
float: left;
border-right : 1px dotted #336699;
padding-left : 2px;
padding-bottom : 5px;
margin-left : 5px;
margin-right : 0px;
text-align : left;
padding-right : 10px;
}
#extraright{
margin-top:10px;
float: right;
width:210px;
width:210px;
width:210px;
padding: 1em 5px;
border-left : 1px dotted #336699;
}
#content
{
margin-top: 0;
margin-right: 210px;
margin-bottom: 0;
margin-left: 210px;
padding-top: 1em;
padding-right: 10px;
padding-bottom: 1em;
padding-left: 10px;
}
#footer{
clear:both;
text-align:center;
padding: 7px 0;
color: #000;
margin-top:2px;
margin-bottom:1px;
background-image: url(img/wrapper.gif);
background-repeat: no-repeat;
background-position: left bottom;
}
/* Navigazione */
#navigation {
padding-bottom:35px;
width:760px;
height:10px;
list-style:none;
background-image: url(img/navbg2.gif);
background-repeat: repeat;
}
#navigation ul
{
margin: 0;
padding: 0;
float: left;
width: 100%;
list-style-type: none;
font-size: 14px;
font-weight: bold;
}
#navigation li {
float:left;
width:124px;
list-style:none;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
#navigation a {
color:#FFFFFF;
display:block;
line-height:50px;
text-align:center;
text-decoration: none;
}
#navigation a:hover {
color:#666666;
background-color: #FFFFFF;
}
#navigation .active {
color:#666666;
background-color: #FFFFFF;
}
#links
{
margin-left: auto;
margin-right: auto;
padding: 10px 0px 0px 0px;
width: 100%;
height: 26px;
font-size: 80%;
text-transform: uppercase;
background-image: url(img/links.gif);
color: #999999;
background-repeat: repeat;
margin-top:0px auto;
}
#links{
text-align: right;
text-decoration: none;
}
#links a {
text-decoration: none;
}
#links a:hover{
text-decoration: none;
}
#formitems {
padding:0px;
display:block;
clear:both;
margin-top: -15px;
margin-right: 30px;
margin-bottom: 0px;
margin-left:460px;
height:26px;
width:450px;
}
#login {
width:400px;
float:right;
}
news {
width : 190px;
min-height : 100px;
background-color:#e0dfdf;
}
.newsbottom {
height : 19px;
}
.news h3 {
color : #336698;
font-family : verdana;
font-size : 1em;
text-align:center;
padding-top : 2px;
line-height:30px;
margin-left: 10px;
margin-top: -12px;
}
.news h4 {
font-family : verdana;
font-size : 0.9em;
padding-top : 10px;
padding-left : 15px;
padding-bottom : 5px;
color : #e47059;
background-repeat : no-repeat;
background-position : left 12px;
margin-left : 10px;
}
.news p {
font-family : verdana;
font-size : 10px;
padding-left : 15px;
padding-bottom : 5px;
margin-left : 10px;
margin-right : 10px;
text-align : left;
padding-right : 20px;
background-color : #e0dfdf;
line-height:140%;
}
.news a {
padding-right : 10px;
}
#content h1 {
color : #336698;
font-family : verdana;
font-size : 1em;
text-align:center;
padding-top : 1px;
margin-top:-7px;
line-height:30px;
margin-left: 20px;
background-image: url(img/h1bg.jpg);
margin-right:10px;
}
.bottom {
width:180px;
background-repeat: repeat;
background-position: left bottom;
background-image: url(img/h1bottom.jpg);
margin-left:10px;
margin-right:10px;
margin-top:5px;
padding-bottom:10px;
}
#extraleft .bottom p {
padding-top:30px;
padding-left:5px;
background-color: #f2f2f2;
padding-bottom: 15px;
font-family : verdana;
font-size : 11px;
text-align : left;
line-height: 140%;
}
#extraleft .bottom h1 {
color : #336698;
font-family : verdana;
font-size : 1em;
text-align:center;
padding-top : 1px;
margin-top:2px;
line-height:30px;
margin-left: 0px;
background-image: url(img/h1bg.jpg);
}
#logo {
position: absolute;
height: 107px;
width: 236px;
top:60px;
left:100px;
}
.boxassoluto {
position: absolute;
top: -10px;
right:10px;
left:-15px;
padding: 10px;
margin: 5px;
width: 320px;
}
#content h1 {
color : #336698;
font-family : verdana;
font-size : 1em;
text-align:center;
padding-top : 1px;
margin-top:-7px;
line-height:30px;
margin-left: 20px;
background-image: url(img/h1bg.jpg);
margin-right:20px;
}
#content p {
padding-top:30px;
padding-left:20px;
padding-bottom: 40px;
font-family : verdana;
font-size : 11px;
text-align : left;
line-height: 140%;
padding-right: 30px;
margin-right:20px;
margin-left: 20px;
background-repeat: repeat-x;
background-position: left bottom;
background-image: url(img/h1bottom.jpg);
background-color: #f2f2f2;
}
spero sia corretto inserimento del codice
Nota del moderatore:
ho convertito i tag HTML <code> in tag VB [ code ]
Permessi di invio
Rispondi quotando