Content che nn si allunga in FF e OPERA

**galluzzo86** · 17-10-2006, 13:27

Ciao,

ho creato una pgina con css nella quale inserisco delle informazioni che possono variare in lunghezza, il problema avviene in Fire Fox e Opera, praticamente il contenitore si allunga però si sovrappone al footer...!! vi posto il codice css:

Grazie dell'aiuto! ciao ciao

html,body{
margin: 0;
padding:0;
background-image: url(button/bg.jpg);
background-repeat: repeat-x top;
height: 100%;

}
body{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px;
text-align: center;
color: #676767;
}

div#container{
width: 720px;
margin: 0 auto;
text-align: left;
position: relative;
height: 100%;
}

div#header{}
h1,h2{margin: 0;padding:0}
h1{color: #676767; font-size: 20px; text-align: center;}
h2{color: #676767; font-size: 16px; text-align: center;}
div#footer a{font-size: 10px;letter-spacing: 1px;color: #676767;font-weight: normal;text-decoration: none}
div#footer a:hover{font-size: 10px; letter-spacing: 1px;color: #c13755;font-weight: normal;text-decoration: none}

div#navigation{
width: 145px;
float: left;
}

div#content{
background: url(button/bg_content.jpg);
padding:0;
margin-top: 5px;
height: 100%;
}

div#contenuti{
margin-left: 140px;
margin-right: 37px;
padding: 1em;
}

div#footer{
text-align: center;
color: #000;
height: 40px;
font-size: 11px;
color: #676767;
bottom: 0;
background: url(button/bottom_content.jpg);
}
div#copy{
text-align:center;
color: #000;
font-size: 11px;

}

**galluzzo86** · 18-10-2006, 00:53

NESSUNO MI PUOI AIUTARE???
SE NN MI SONO SPIEGATO BENE DITEMELO CHE MI CORREGGO!

grazie

**Mich_** · 18-10-2006, 08:43

Dovresti postare anche il codice HTML, e magari uno schemino di quello che succede e che dovrebbe succedere.
Oppure un link ad una pagina (anche di prova).

PS: quando inserisci codice, usa sempre i codici VB, che realizzi anche in forma preformattata con i bottoni sopra l'area di inserimento. In particolare vedi il bottone con #.

**galluzzo86** · 18-10-2006, 09:41

ecco questa è la pagina, ero riuscito a risolvere mettendo un height: 100% al div#content però questa pagina, essendo molto lunga, in fire fox e opera va fuori div...:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>


<div id="container">



<div id="header">

[img]button/top.jpg[/img]

</div>




<div id="preferiti">

<ul id="minitabs">[*]Home page[*]Chi Siamo[*]Dove Siamo[*]Contatti[*]
<a  class="icopreferiti" accesskey="P" title="Aggiungi questa pagina ai tuoi preferiti" href="javascript:window.external.AddFavorite('http://www.fioristalazzini.com','Fiorista Lazzini - Marina di Massa')">
Aggiungi ai preferiti
				</A>
				
				[*]
<a class="icoconsiglia" accesskey="S" title="Consiglia il Sito" href="consiglia.php">
Consiglia il sito
</A>
[/list]

</div>






<div id="content">
[img]button/top_content.jpg[/img]


<div id="navigation">
   

	Codice PHP:
	
 <? include "menusx.php"; ?>



</div>






<div id="contenuti">
    [img]button/b_dovesiamo.jpg[/img]


  [img]button/toscana.jpg[/img]





<h2>Come Raggiungerci</h2>
</p>



     <p class="imgdovesiamo">
  [img]button/cartina_marinadimassa.jpg[/img]
        </p>

</div>



</div>






<div id="footer">





	Codice PHP:
	
<? include "footer.php"; ?>



</div>

<div id="copy">

    </a>
             </div>


</div>
</body>

</html>

**Mich_** · 18-10-2006, 10:02

Riassumendo, hai un #content che contiene a sua volta un #navigation flottato a sinistra e un #contenuti che ha un margine (per non sovrapporsi a #navigation).

Se ho ben capito il problema sta in #contenuti che "sfonda" il #content.

Se e` cosi` il problema potrebbe essere un piccolo baco che ha FF, ma anche altri browser: i float vengono tolti dal normale flusso e non "sentono" piu` di chi sono figli.

Per ovviare occorre che siano flottati tutti i blocchi; nel tuo caso potresti provare:
- a dare float:left; anche a #content (eventaulemtne puoi definirgli width: 99% o simile)
- a dare a #contenuti il seguente CSS:

codice:

div#contenuti{
  float:left; /*margin-left: 140px;  - il float sostituisce il margine */
  margin-right: 37px; /* non capisco a cosa serva, ma avrai i tuoi buoni motivi */
  padding: 1em; /* meglio sarebbe dare margin ai blocchi contenuti (per compatibilita`) */
}

- a dare clear:left; al blocco #footer (credo sia il blocco che segue quelli con il float)

**galluzzo86** · 18-10-2006, 10:11

ok tutto è un pò migliorato, cè ancora un proble con FF, in alcune pagine i contenuti me li manda sotto la navigazione a sinistra!

ecco il mio css:

codice:

/*stili per il layout fisso*/

html,body{
margin: 0;
padding:0;
background-image: url(button/bg.jpg);
background-repeat: repeat-x top;
}
body{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: center;
color: #676767;
}
body>div#container{height: auto; min-height: 100%}

div#container{
width: 720px;
margin: 0 auto;
text-align: left; 
height: 100%;
position: relative;
}


/*stili generici, su header e footer*/
div#header{}
h1,h2{margin: 0;padding:0}
h1{color: #676767; font-size: 20px; text-align: center;}
h2{color: #676767; font-size: 16px; text-align: center;}
div#footer a{font-size: 10px;letter-spacing: 1px;color: #676767;font-weight: normal;text-decoration: none}
div#footer a:hover{font-size: 10px; letter-spacing: 1px;color: #c13755;font-weight: normal;text-decoration: none}


/*stili specifici per il layout*/

p{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
line-height: 170%;
margin-left: 13px;
}
.homepage{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
line-height: 170%;
margin-left: 13px;
margin-right: 13px;
}
.chisiamo{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
line-height: 200%;
margin-left: 17px;
margin-right: 10px;
} 
.dovesiamo{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
line-height: 150%;
margin-left: 17px;
margin-right: 10px;
height: 100% auto;

} 
.consiglia{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
margin-left: 25px;
margin-bottom: 0;
margin-top: 0;

} 
.prenotazioni{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: left;	
letter-spacing: 0.5px;
word-spacing: 1px;
padding: 0px;
margin-top: 0;
margin-bottom: 2px;
margin-left: 35px;
}

.campi {
      background: #ffffff;
      color:#000000;
      font-family: arial;
      font-size: 12px;
      padding-left: 5px;
      border: Solid 1px #aaaaaa;
		letter-spacing: 1px; 
		word-spacing: 2px;
		margin: 0px;
}
.privacy{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
line-height: 200%;
margin-left: 17px;
margin-right: 10px;
}
.prodotti{
font-family: arial,verdana,MS Sans Serif;
font-size: 12px; 
text-align: justify;	
letter-spacing: 0.5px;
word-spacing: 1px;
line-height: 200%;
margin-left: 17px;
margin-right: 10px;
} 

div#button{
margin-left:150px;
position: absolute;
float: right;
}

div#imghome{
margin-left:15px;
}

.imgdovesiamo{
margin-left:15px;
}
.imgdovesiamo2{
margin-left:25px;
}

div#navigation{
width: 145px;
float: left;
}

.interflora{
	margin-left: 25px;
}

div#preferiti{
margin-left: 0px;
margin-top: 4px;
margin-bottom: 5px;
}
	
div#content{
background: url(button/bg_content.jpg);
float: left;
height: 100%;
width: 99%;
margin-top: 5px;
}

div#contenuti{

 float:left; /*margin-left: 140px;  - il float sostituisce il margine */
  margin-right: 37px; /* non capisco a cosa serva, ma avrai i tuoi buoni motivi */


}

div#footer{
text-align: center;
color: #000;
height: 40px;
font-size: 11px;
color: #676767;
bottom: 0;
clear: left;
background: url(button/bottom_content.jpg);
}
div#copy{
text-align:center;
color: #000;
font-size: 11px;
}

Ti ringrazio ancora per il tuo aiuto!!

**Mich_** · 18-10-2006, 10:19

Dove e` sparito il width:100%; height:100%; che c'era nel html e body?
Se non li metti, il 100% che usi sotto non ha senso (non sa a cosa si deve riferire).

PS: il resto del CSS non lo capisco. Manca l'HTML cui si riferisce.
E attento all'ordine: conviene sempre partire dal generale (esterno) e procedere verso il particolare (blocchi piu` interni): il CSS e` "a cascata", ed una definizione successiva sovrascrive una precedente

**galluzzo86** · 18-10-2006, 10:28

si ho fatto un po di confusione xke ho provato a cambiare un pò di volte...
ascolta ho messo le pagine in linea su una cartella di prova, tu guardale con IE, FF e OPERA e ti rendi conto di cosa succede.
Te lo posso mandare in privato il messaggio con il link???

**Mich_** · 18-10-2006, 10:51

Ci sono un po' di problemi con il codice HTML:

codice:

<ul>[*]
    Allestimenti
  
      <ul class="sub">
         ...[/list]

Il[*] si deve chiudere dopo la fine del <ul> interno

<img border="0"
Questo attributo va in conflitto con il CSS: tutti gli attributi di formattazione vanno eliminati.

Per quanto riguarda il contenuto specifico, ho l'impressione che il tutto non ci stia in larghezza.
Tieni presente che nel box model del W3C (seguito da quasi tutti i browser tranne IE), la larghezza totale dei blocchi e` data da:
margin + border + padding + width + padding + border + margin

Se provi a ridurre qualcosa (ad esempio il margine dx), dovrebbe poi starci.

**galluzzo86** · 18-10-2006, 11:00

mh, ho provato a diminuire i margin-right ma nulla...nn cambia nulla..nn so proprio ke fare, se tolgo pero il float: left; al div#contenuti tutto ritorna normale, e di conseguenza basta solo che sistemo i margini per centrare tutto..

tu cosa mi consigli? è importante tenga il float: left; nel contenuti?

Discussione: Content che nn si allunga in FF e OPERA

Strumenti discussione

Ricerca discussione

Visualizza

Content che nn si allunga in FF e OPERA

Permessi di invio