Ciao a tutti,
ho questo problema:
ho delle pagine con un'immagine di sfondo: nelle pagine in cui il testo è molto lungo e bisogna scrollare su IE si vede correttamente l'immagine di sfondo che continua anche oltre lo scrolling mentre in FF l'immagine si blocca alla parte visibile della pagina e oltre lo scrolling c'è il bianco.
(spero di essere stata abbastanza chiara)
Come posso fare in modo che scrollando si veda continuare lo sfondo anche in FF?
Grazie mille!
Ciao! Normalmente basta mettere l'immagine di sfondo al body e questa scrolla... forse se ci incolli qui nel forum il codice della tua pagina potremmo darti informazioni più precise 8)
o/ !
Ecco qua il codice:
<body>
<div id="main">
<div id="contenitore">
<div id="header">
<div class="logo">[img]img_ico/logo.gif[/img]</div>
<div id="menu">
<span class="menu_sel">Cos'è</span>
Obiettivi
Campagne
Contatti
</div>
<div class="clear"></div>
</div>
<div id="contOggetto">
<div class="testaContenuti"></div>
<div class="sfContenuti">
<div class="titPagina">Cos'è</div>
<div>
<div class="testo">
qui c'è un testo molto lungo....
</div>
<div class="immagini">[img]img_ico/cogeneratore.jpg[/img]</div>
<div class="clear"></div>
</div>
</div>
<div class="pieContenuti"></div>
</div>
<div id="footer">
[img]img_ico/footer.png[/img]
<div>
homecontatti
</div>
<div style="width:100%; height:10px"></div>
</div>
</div>
</div>
</body>
E qui il css interessato:
@charset "utf-8";
/* CSS Document */
html, body {
padding:0;
margin:0;
width:100%;
height:100%;
min-height:100%;
background: #FFF;
}
a img {
border:0;
}
.clear {
clear:both;
}
#main{
height:100%;
width:100%;
text-align:center;
margin:0 auto;
background: url(img_ico/sfondo.jpg) no-repeat top center;
}
#contenitore{
height:100%;
width:975px;
margin:0 auto;
text-align:center;
}
#header{
width:953px;
height:140px;
margin:0 auto;
}
.logo{
float:left;
text-align:left;
margin-top:20px;
}
#menu{
float:left;
text-align:left;
margin-top:60px;
margin-left:45px;
}
#contOggetto{
width:953px;
margin:0 auto;
}
.testaContenuti {
background: url(img_ico/testaContenuti.png) no-repeat bottom center;
width:953px;
height:30px;
}
.sfContenuti {
background: url(img_ico/sfContenuti.png) repeat-y top center;
width:953px;
text-align:left;
}
.pieContenuti {
background: url(img_ico/pieContenuti.png) no-repeat top center;
width:953px;
height:30px;
}
.titRiquadro{
font:12px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#40a52b;
padding:23px 25px 15px 23px;
text-align:left;
}
#footer{
margin:0 auto;
}
a.linkFooter:LINK, a.linkFooter:VISITED, a.linkFooter:ACTIVE{
font: 11px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFF;
text-decoration:none;
padding-right:15px;
line-height:24px;
}
a.linkFooter:HOVER{
font: 11px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#e6ffe1;
text-decoration:none;
padding-right:15px;
line-height:24px;
}
.textFooter{
font: 11px Arial, Helvetica, sans-serif;
font-weight:normal;
color:#003680;
text-decoration:none;
text-align:left;
}
/****** *** ******/
.titPagina{
font: 24px Arial, Helvetica, sans-serif;
font-weight:normal;
color:#40a52b;
text-align:left;
margin-left:25px;
margin-bottom:18px;
}
.testo{
font: 12px Arial, Helvetica, sans-serif;
font-weight:normal;
color:#8b8e92;
text-decoration:none;
text-align:justify;
margin:0 0 0 25px;
line-height:18px;
float:left;
width:475px;
}
.testo strong{
color:#737476;
}
.immagini{
float:right;
margin-right:28px;
}
a.link:LINK, a.link:VISITED, a.link:ACTIVE{
font: 12px Arial, Helvetica, sans-serif;
font-weight:normal;
color:#40a52b;
text-decoration:none;
}
a.link:HOVER{
font: 12px Arial, Helvetica, sans-serif;
font-weight:normal;
color:#55c53e;
text-decoration:none;
}
a.menu:LINK, a.menu:VISITED, a.menu:ACTIVE
{
font-size: 14px;
color: #40a52b;
font-family: arial;
text-align: left;
text-decoration: none;
CURSOR: hand;
CURSOR: pointer;
padding-right:20px;
}
a.menu:HOVER
{
font-size: 14px;
color: #74d060;
font-family: arial;
text-align: left;
text-decoration: none;
CURSOR: hand;
CURSOR: pointer;
padding-right:20px;
}
.menu_sel
{
font-size: 14px;
color: #74d060;
font-family: arial;
text-align: left;
text-decoration: none;
padding-right:20px;
}
Grazie!!
Ahhh! Capito... credo... 8)
Prova ad usar un sistema del genere:
8)codice:<head> <style> html, body { margin:0; padding:0; height:100%; min-height:100%; } body>#main { height: auto; min-height: 100%; background: url(img_ico/sfondo.jpg) no-repeat top center; } </style> </head> <body> <div id="main"> <div style="height:3000px;">qui c'è un testo molto lungo....</div> </div> </body> </html>
o/ !
Scusa ma non riesco ad adattarlo al mio caso...Puoi spiegarmi come si fa?
Ahhhh... 8) hai ragione, ti ho messo un po di roba in più... in sostanza credo che se nel tuo #main cambi height:100%; con min-height:100%; tutto dovrebbe funzionare 8)
In più, forse, trafficando un poco, dovresti/potresti riuscire a levare del tutto uno dei 2 div #main e #contenitore, compattando tutto in un unico div contenitore ed applicando lo sfondo al body.
o/ !
E' bastato mettere lo sfondo nel body e tutto si è risolto!!
Grazie mille!!
Permessi di invio
Rispondi quotando