PARTE HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="master">
<div id="ubox"><img src="mapworld.jpg"/></div>
<div id="abox"></div>
<div id="bbox"></div>
<section>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Viaggi</a>
<ul class="sub">
<li><a href="#">Item 2.0</a></li>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
<li><a href="#">Item 2.3</a></li>
</ul>
</li>
<li><a href="#">Backpacking</a>
<ul class="sub">
<li><a href="#">Item 3.0</a></li>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
<li><a href="#">Item 3.4</a></li>
<li><a href="#">Item 3.5</a></li>
<li><a href="#">Item 3.6</a></li>
<li><a href="#">Item 3.7</a></li>
</ul>
</li>
<li><a href="#">About Me</a>
<ul class="sub">
<li><a href="#">Item 4.0</a></li>
<li><a href="#">Item 4.1</a></li>
</ul>
</li>
</ul>
</nav>
</section>
<div id="cbox"></div>
<div id="dbox"></div>
<aside></aside>
<div id="contform">
<div id="contforma">
<form>
<label><b>Username</b></label>
<input type="text"
name="firstname"
id="firstname"
value=""
size="20">
<br/><br/>
<label><b>Password</b></label>
<input type="password"
name="password"
id="password"
size="20">
<br/><br/>
<label><b>Textarea</b></label>
<br/>
<textarea rows="2" cols="35" maxlength="200" id="ciao">Hello Guys!!!!
</textarea>
</form>
</div>
</div>
</div>
</body>
</html>
PARTE CSS:
*{padding:0px;
margin:0px;}
body{background-color:#EBEBEB;}
#master{margin:auto;
background-color:white;
width:800px;
height:1500px;}
#ubox{width:800px;
height:350px;
position:absolute;
z-index:1;}
#abox{width:800px;
height:15px;
position:absolute;
z-index:2;
background-color:black;
opacity:0.5;
top:300px;}
#bbox{width:400px;
height:80px;
position:absolute;
z-index:3;
background-color:black;
opacity:0.5;
top:220px;
margin-left:400px;
border-radius:60px 0px 0px 0px;}
aside{width:385px;
height:210px;
position:absolute;
z-index:4;
background-color:black;
top:235px;
margin-left:415px;
border-radius:60px 0px 0px 60px;}
section{position:absolute;
z-index:5;
width:415px;
height:50px;
top:315px;
background-color:black;}
nav{background-color:black;
width:415px;
height:30px;
margin-top:10px;}
ul.menu{list-style-type:none;}
ul.menu li{width:95px;
height:30px;
background-color:#BFBF7F;
float:left;
border-radius:10px;
text-align:center;}
ul.menu li a{text-decoration:none;
font-weight:bold;
line-height:30px;
color: black;}
ul.menu > li {margin-left: 7px;}
ul.menu, ul.sub{list-style-type:none;}
ul.menu ul.sub{display:none;}
ul.menu li:hover ul.sub{display:block;}
ul.menu li.active, ul.menu li:hover {background-color:#C1DE3F;}
#cbox{width:800px;
height:15px;
position:absolute;
z-index:2;
background-color:black;
opacity:0.5;
top:365px;}
#dbox{width:400px;
height:80px;
position:absolute;
z-index:3;
background-color:black;
opacity:0.5;
top:380px;
margin-left:400px;
border-radius:0px 0px 0px 60px;}
#contform{height:180px;
width:365px;
background-color:#BFBF7F;
position:absolute;
z-index:6;
margin-left:435px;
border-radius:50px 0px 0px 50px;
top:250px;}
#contforma{height:180px;
width:325px;
background-color:none;
position:absolute;
z-index:7;
margin-left:40px;
border-radius: 0px 0px 0px 0px;
top:0px;}
Rispondi quotando
Originariamente inviata da Giuseppe91
