probabile errore con i float ed il clear?

**Yuppies** · 02-12-2010, 12:43

Salve ragazzi, ho scritto il codice che vi posto in basso e volevo porvi questa domanda:

Se osservo l'anteprima sul browser, pare che tutto mi funzioni ma, nel software con cui sto testando tale codice (una versione di prova di Dreamweaver), la parte relativa al counter fa un salto di circa 70px (ad occhio) sapreste aiutarmi a capire dove sbaglio?
forse uso male i float ed il clear?

Parte CSS

.footer {
background-image: url(/img/s_s/bg_f.jpg);
background-repeat: repeat;
background-position: left top;
border: 1px solid #666;
width:941px;
height:145px;
}
.address {
width:400px;
height:125px;
color: #FFF;
line-height: 18px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.com {
width:170px;
height:195px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
background-image: url(/img/com.png);
background-repeat: no-repeat;
background-position: left top;
left: 240px;
top: -70px;
position: relative;
}
.counter {
width:941px;
height:125px;
}

Parte HTML

<div class="footer">
<div class="address" style="float:left;">
xxxxxxxxxx
xxxxxxxxxx

</div>
<div class="com" style="float:left;"></div>
</div>
<div class="counter" style="clear:both;"></div>

**fcaldera** · 02-12-2010, 12:55

fa un "salto" verso dove? alto? basso?
che doctype stai usando?

puoi fornire una pagina demo visible in modo da poter vedere l'effetto?

**Yuppies** · 02-12-2010, 13:43

Grazie sempre per il tuo intervento fcaldera.

Ti dico che ho lo stesso medesimo problema anche nella parte Header del progetto e smanettando un po da quelle parti, credo di aver capito da cosa può dipendere il problema (almeno credo e mi rimetto alla tua maggiore conoscenza o di chiunque altro possa aiutarmi).

Nel caso dell'header, ho inserito tutta una serie di div al suo interno

<div class="header">
<div class="logo"></div> (100px)
<div class="tit"></div> (25px)
<div class="img_d_o"></div> (10px)
<div class="subtit"></div> (25px)
<div class="img_foto"></div> (100px)
</div>

con il posizionamento relativo dei div, ho impostato la posizione dei medesimi dove ritenevo opportuno.

Ho impostato che l'header avesse una altezza di 150px e contenesse tutti gli altri div al suo interno.

Nella visualizzazione nel browser tutto funziona ok ma nel software di realizzazione vedo un box alto esattamente 260px (ovvero una altezza pari alla somma di quella di tutti i box interni all'header)

Spero di essere stato chiaro e di ricevere un aiuto per risolvere il problema.

Ho provato ad utilizzare sia
<!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">

che

<!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">

ma il problema non cambia.

Comunque più che un salto verso il basso si tratta di un aumento dell'altezza del box header.
La parte dove ho impostato l'img di sfondo si vede correttamente mentre per un altra parte (quella inferiore), mi viene mostrato lo sfondo del body.

**fcaldera** · 02-12-2010, 13:59

Originariamente inviato da Yuppies
Nella visualizzazione nel browser tutto funziona ok ma nel software di realizzazione vedo un box alto esattamente 260px (ovvero una altezza pari alla somma di quella di tutti i box interni all'header)

se effettivamente è così allora questo è un NON problema... ed è uno dei tanti motivi per cui non si dovrebbero usare editor visuali.

Ciò che conta è cosa visualizza il browser, non cosa visualizza la preview di un editor (tralatro in versione di prova)

Comunque apprezzo sempre il codice postato, tuttavia faccio fatica ad immaginarmi come si comporti nella realtà visto che ci sono delle immagini che non vedo referenziate dal CSS.

**Yuppies** · 02-12-2010, 13:59

Per fcaldera e per chiunque possa darmi indicazioni:

ho impostato
overflow:auto;

sia nella definizione dell'header che nella definizione del footer.....
pare che tutto si sia messo a funzionare regolarmente.

Secondo voi posso considerare risolto il problema?

Scusate la mia totale ignoranza in materia ma è la prima volta che tratto l'argomento Layout senza tabelle

**Yuppies** · 02-12-2010, 14:29

Raga.. dopo una breve prova......
posso affermare che credevo di aver risolto invece....
per l'header tutto ok in quanto non ho alcuna immagine che sborda l'altezza.

Per il footer, dove ho una immagine che sborda nella parte alta dello stesso, se imposto overflow:auto;
la stessa immagine mi viene tagliata nella parte alta che eccede l'altezza del footer.

qialche suggerimento?

**Mich_** · 02-12-2010, 15:52

Originariamente inviato da Yuppies
qialche suggerimento?

Si`.
Dimentica i position (usa solo il posizionamento statico), ed usa invece i float per affiancare vari oggetti di tipo blocco.

Usare i posizionamenti relativi per spostare i blocchi non e` corretto, perche` forzi una tecnologia a fare cose diverse da quelle per cui e` pensata.

Ci sono vari esempi di layout in rete. Alcuni sono citati tra i "link utili". ti conviene partire da quelli e rivedere la tua pagina.

PS: hai provato a vedere la tua pagina in altri browser?

Discussione: probabile errore con i float ed il clear?

Strumenti discussione

Ricerca discussione

Visualizza

probabile errore con i float ed il clear?

Permessi di invio