problema: in una grafica preimpostata, ho utilizzato tecnica delle mappe immagine via css.
Tutto bene, riesco a fare navigazione primaria e secondaria, inserendo due mappe che si relazionano entrambe al top della pagina: non cambiando mai, tutto rimane fermo. Non riesco a risolvere però (con la stessa soluzione) il problema del footer, perchè, inserendo il codice in un file esterno, se lo richiamo con un include php lui si relaziona al topo della pagina dove ho incluso il file, e non ripsetto al top della sua pagina (footer.php).
Le ho provate un pò tutte, giocando con le proprietà position del css, ma senza successo: viene sempre posizionato prima del resto, mentre io vorrei che:
a prescindere dalla lunghezza (variabile a seconda del contenuto della pagina) link footer si posizionasse subito dopo la chiusura dell'ultimo div del container. Grazie in anticipo a che mi aiuta a risolvere :-)
Luca
Questo il codice di una pagina:
<!--
<body>
<ul id="mappaHome">
<li id="link_home">
<li id="link_storia">
<li id="link_direttivo">
<li id="link_iscrizione"> <li id="link_iniziative">
<li id="link_rivista">
<li id="link_contatti">
<li id="link_link">[/list]
<div class="contenuto">
</div>
<qui ci vuole il footer>
</body>
</html>
-->
questo il folgio stile:
@charset "UTF-8";
/* CSS Document */
/*AISE STYLE */
/* By Luca Arese 2010 - luca.arese@libero.it */
body {
margin:0;
padding: 0;
height: 100%;
min-height: 1200px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-style:italic;*/
font-size:12px;
color: #535353;
line-height: 24px;
text-align:justify;
}
.contenuto {
position: absolute;
top: 335px;
left:50%;
margin-left: -280px;
width:557px;
height:auto;
}
footer{
position:absolute;
margin-top: -7.5em;
top: 0px;
}
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-style:italic;*/ font-size:12px;
color: #535353;
text-indent: 15px;
line-height: 24px;
text-align:justify
}
.footer {
position:relative;
clear:both;
}
/*
.headerLink {
position: absolute;
top: 0px;
left:50%;
margin-left: -489px;
width:978px;
height: 334px;
background-image: url(images/link.png);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
*/
.headerVuoto {
position: absolute;
top: 0px;
left:50%;
margin-left: -489px;
width:978px;
height: 334px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#submenu {
position: absolute;
top: 335px;
left:50%;
margin-left: -698px;
height: auto;
background-image: url(images/sub_direttivo.png);
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
/************* MAPPA IMMAGINE MENU PRINCIPALE ***************/
#mappaHome
{
position: absolute;
background-image: url(images/home.png);
background-repeat: no-repeat;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
top: 0px;
left:50%;
margin-left: -489px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 978px;
height: 334px;
}
/******** LI A MAPPE ***************/
#mappaHome li
{
display: block;
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#mappaHome a
{
display: block;
width: 100%;
height: 100%;
}
/******** LINKS MAPPE ***************/
#link_home
{
top: 68px;
left: 47px;
width: 169px;
height: 65px;
}
#link_storia
{
top: 94px;
left: 660px;
width: 92px;
height: 15px
}
/************* MAPPA IMMAGINE FOOTER ***************/
#mappaFooter
{
position: absolute;
background-image: url(images/footer.png);
background-repeat: no-repeat;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
top: 0px;
left:50%;
margin-left: -489px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
width: 978px;
height: 43px;
}
/******** LI A MAPPE FOOTER ******NON FUNZIONA !*********/
#mappaFooter li
{
display: block;
position: absolute;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#mappaFooter a
{
display: block;
width: 100%;
height: 100%;
}
/******** LINKS MAPPE FOOTER ***************/
#linkFooterWebdes
{
top: 5px;
left: 776px;
width: 150px;
height: 11px;
}
#linkFooterWebdev
{
top: 17px;
left: 776px;
width: 150px;
height: 11px;
}