Buongiorno a tutti,
premettendo che con div e css non ho pratica sono incappato in un problema credo molto comune... ossia in una pagina in cui posiziono i miei div con float e che viene chiusa da un div footer... in IE tutto corretto, in FF invence il footer non si posiziona sotto i contenuti.
ho messo il clear come letto qui nel forum ma non è bastato. evidentemente sbaglio molto altro.
Scusatemi, so che l'argomento è stato trattato mille volte ma non capisco dov'è il problema
certo che se non metto almeno il codice... forse mi serve un caffè in vena!
link alla pagina
e il 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" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
/* ************************css comuni ********************************** */
#contenitore {
position:relative;
margin-left:auto;
margin-right: auto;
top:0px;
width:789px;
height:500px;
z-index:1;
font-family: Arial, Helvetica, sans-serif;
}
#logo {
float:left;
width:36px;
display:inline;
height:150px;
z-index:3;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #663300;
border-bottom-color: #663300;
border-left-color: #663300;
}
#fotoHead {
display:inline;
float:right;
width:749px;
height:150px;
z-index:2;
border-top-style: solid;
border-bottom-color: #663300;
background-color: #333333;
border-bottom-width: 2px;
border-bottom-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-right-style: solid;
border-top-color: #663300;
border-right-color: #663300;
}
#navigazione {
float:right;
top:150px;
width:750px;
height:20px;
z-index:2;
background-color: #6F525E;
white-space: nowrap;
border-left-width: 2px;
border-left-style: solid;
border-left-color: #663300;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6C0B0;
}
#footer {
clear: both;
width:748px;
height:20px;
z-index:2;
background-color: #666666;
margin-left: 37px;
border-right-width: 2px;
border-left-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #808080;
border-left-color: #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
}
/* ************************fine css comuni ********************************** */
#paginaHome {
float:right;
width:748px;
height:300px;
z-index:2;
border-right-width: 2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #808080;
border-left-width: 2px;
border-left-color: #808080;
background-color: #FFFFFF;
}
#fotoRandom {
float:right;
left:491px;
top:177px;
width:297px;
height:297px;
z-index:2;
text-align: right;
}
body {
margin-top: 0px;
}
-->
</style>
</head>
<body>
<div id="contenitore">
<div id="logo">[img]img/harmattan_logo_sx.jpg[/img]</div>
<div id="fotoHead">[img]img/HeadHome.jpg[/img]</div>
<div id="navigazione"></div>
<div id="paginaHome">
<div id="fotoRandom">[img]random/mursi.jpg[/img]</div>
</div >
<div style="clear:both; width:1"></div>
<div id="footer">All right reserved © HARMATTAN srl PI 03267660276 </div>
</div>
</body>
</html>
devi mettere "clear:left" e non "clear:both".
Saluti
:: Nik-
CARUCCIO WEB creazione siti internet www.caruccioweb.net
Nuovo servizio: Servizio tutto ITALIANO da Photoshop ad XHTML e CSS www.youdesignweb.net
skype: francescodyerr
mail: fcaruccio@gmail.com
Grazie mille!
Purtroppo però non basta... se metto il clear:left sul footer quest'ultimo mo sparisce proprio... probabilmente sotto gli altri elementi.
Ho provato un clear:right
Con Ie sempre tutto normale
Allora, mi sono letto il tuo codice... clear:left devi metterlo nel css in #footer non in <div style> come hai fatto. Inoltre ho visto che usi le immagini col tag <img> per logo e footer (l'uomo).
Dovresti usare invece uno sfondo, inserito nel div magari o uno span se proprio non puoi nel div.
:: Nik-
CARUCCIO WEB creazione siti internet www.caruccioweb.net
Nuovo servizio: Servizio tutto ITALIANO da Photoshop ad XHTML e CSS www.youdesignweb.net
skype: francescodyerr
mail: fcaruccio@gmail.com
Prova così
Se non dovrebbe funzionare segui uno di questi layoutcodice:<div id="contenitore"> <div id="logo">[img]img/harmattan_logo_sx.jpg[/img]</div> <div id="fotoHead">[img]img/HeadHome.jpg[/img]</div> <div id="navigazione"></div> <div id="paginaHome"> <div id="fotoRandom">[img]random/mursi.jpg[/img]</div> <div style="clear:both;background:none"></div> </div > <div id="footer">All right reserved © HARMATTAN srl PI 03267660276 </div> </div> </body> </html>
http://www.code-sucks.com/css%20layo...x-css-layouts/
Grazie ancora,
avevo già messo il clear nel footer senza risultato, per questo ho provato ad aggiungere quel div con il clear dentro.
quanto riguarda le immagini non ho capito bene... perche non posso utilizzare img?
Perchè lo scopo sarebbe separare presentazione (CSS, quindi layout) da contenuto (HTML).
Il tag <img> dovrebbe essere usato per il contenuto, non per il layout.
:: Nik-
CARUCCIO WEB creazione siti internet www.caruccioweb.net
Nuovo servizio: Servizio tutto ITALIANO da Photoshop ad XHTML e CSS www.youdesignweb.net
skype: francescodyerr
mail: fcaruccio@gmail.com
Permessi di invio
Rispondi quotando