salve,
Perchè il footer sta in mezzo?
chi mi aiuta a capire come fare?
Grazie
ecco il codice:
<!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" />
<title>Gioconda - x f</title>
<style type="text/css" media="screen, tv, projection">
#lista {float: right;}
#immagine{float: left;}
#immagine img {float:left;margin-top:15px;margin-left:15px;margin-right: 20px;}
.foto img{border: none; float:left;}
h1 {margin-top: 0;}
body{font:100% arial,sans-serif;margin:0;background:#eaeeeb url(immagini/sfumaturavg.gif) top left repeat-x;
}
body,.menu ul,.menu,.menu li{padding:0; margin-bottom: 0;
}
#wrapper,#immagine,#content{background:#9c9;
}
#wrapper{margin-right: 10%; margin-left: 10%;border: 1px solid #060; height: 680px;
}
#header{width:auto;height:111px;padding-bottom:0;background:#dea url(immagini/sfumaturagb.jpg) top left
repeat-x; border-bottom: 1px solid #060;
}#header,#header h2,#footer p{margin-top:0;
}
#header img,.menu ul{position:absolute;top:0
} #header img{left:15px
}
#header img,.menu li{border:0
}
#header h2,#header h1,#footer p{color:#fff
}
#header h2,#header h1,.menu li,#alles,#footer p{text-align:center
}
#header,.menu li{position:relative
}
#header h1{margin-bottom:0;padding-top:15px
}
p{line-height:1.5; font-size: 0.8em;
}
#content{display:inline-block;margin-left:330px;margin-right:25px; font-size: 0.8em;
}
.menu {
width: 10em;
}
.menu, .menu ul { /* remove all list stylings */
margin: 15px 15px;
padding: 0;
border: 1px solid #064206;
position: relative;
float: right;
display: inline;
}
.menu li {
padding: 0;
border: 0;
display: block;
position: relative; /* position each LI, thus creating potential IE.win overlap problem */
z-index: 5;
text-align: center;
/* thus we need to apply explicit z-index here... */
}
.menu li:hover {
z-index: 10000; /* ...and here. this makes sure active item is always above anything else in the menu */
white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not
present)
see http://www.tanfa.co.uk/css/articles/pure-css-popups-
bug.asp for other stuff that work */
}
.menu ul {
visibility: hidden; /* initially hide all submenus. */
position: absolute;
z-index: 10;
right: 0; /* while hidden, always keep them at the top right corner, */
top: 0;
/* to avoid scrollbars as much as possible */
}
.menu li:hover>ul {
visibility: visible; /* display submenu them on hover */
right: 100%;
/* and move them to the left of the item */
}
/* -- float.clear --
force containment of floated LIs inside of UL */
.menu, .menu ul {/* IE7 float clear: */
min-height: 0;
}
/* - - - ADxMenu: DESIGN styles - - - */
.menu, .menu ul li {
}
.menu {
width: 10em;
float: right;
}
.menu ul {
width: 10em;
}
.menu a {
color: #064206;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-size: .8em;
text-decoration: none;
padding: .4em 1em;
display: block;
background: url(immagini/sfumaturalo.jpg) top left repeat-y ;
}
.menu a:hover, .menu li:hover>a {
background: url(immagini/sfumaturaol.jpg) top right repeat-y;
font-weight: normal;
}
.menu li { /* create borders around each item */
border-bottom: 1px #064206;
font-weight: bold;
list-style: none;
}
.ultimo {border-bottom: none!important;}
.menu>li + li, .menu ul>li + li { /* and remove the top border on all but first item in the list */
border-top: 0;
}
ul li.primo {
color: #064206;
background-color: #ADC1AD;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-size: .8em;
background-position: 0 0;
text-decoration: none;
padding: .4em 1em;
display: block;
background: url(immagini/sfumaturalo.jpg) top left repeat-y;}
.menu li:hover>ul { /* inset submenus, to show off overlapping */
top: 5px;
right: 80%;
}
#footer{background:#060; position: relative;margin-left: 10%; margin-right: 10%;
}
#footer p{font-size:0.8em; margin-bottom: 0;
}
#validator img{float: left;margin-left: 10%; border: none;}
</style>
<script type="text/javascript" src="../code/ADxMenu.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
[img]immagini/logo0.gif[/img]
<h1>Gioconda</h1>
<h2> monna lisa</h2>
</div>
<h3>L'associazione</h3>
<div id="container">
<div id="immagine">[img]immagini/b.jpg[/img]
</div>
<ul class="adxm menu">
[*]Home page[*]L'associazione
<ul>
<li class="primo">L'associazione
[*]Presentazione
<li class="ultimo">FAQ
[/list]
[*]Vuoi conoscerci
<ul>
<li class="primo">Vuoi conoscerci
[*]La storia
<li class="ultimo">Rassegna stampa
[/list]
[*]Gallery
<ul>
<li class="primo">Gallery
[*]Roma
[*]Empoli
<li class="ultimo">Varie
[/list]
[/list]
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer">
Associazione Gioconda</p>
</div>
</div>
<div id="validator">
<a href="http://jigsaw.w3.org/css-validator/">
</a>
</p>
</div>
</body>
</html>
Rispondi quotando
