Problemi di visualizzazione del mio sito con Firefox

[djordj]

Vediamo se riesco a capirci qualcosa.
In pratica la tua struttura è composta da 5 principali DIV.

• masthead - in alto, con l'immagine del cielo
• navbar - colonna sinistra
• headlines - colonna destra
• content - centrale
• sitename - in basso

In pratica è un template a 3 colonne con header e footer.
Secondo me ti manca un DIV contenitore che racchiuda le tre colonne tra header e footer, con posizionamento relativo.
Dai un'occhiata a questo articolo che spiega come costruire tale template con i CSS:
http://constile.org/template/nuovo_l...a_tre_colonne/




C'è anche questo articolo ma il template finale è più grezzo.
http://constile.org/template/layout_a_tre_colonne/

[gb]

si Stefano, esatto

prima avevo un div contorno che conteneva Navbar, content e headlines

l'ho tolto!!

adesso sono posizionati con absolute, più di così non so che fare

adesso mi leggo bene l'articolo

grazie mille, come sempre!!

[djordj]

si Stefano, esatto

prima avevo un div contorno che conteneva Navbar, content e headlines

l'ho tolto!!

adesso sono posizionati con absolute, più di così non so che fare

adesso mi leggo bene l'articolo

grazie mille, come sempre!!

Il posizionamento assoluto è una brutta bestia.
Molto meglio sfruttarlo insieme a un po' di float qua e lÃ*.

[gb]

ho seguito le istruzioni dell'articolo (tornando a quanto avevo fatto prima!!)

ebbene, Explorer (come sempre) lo visualizza correttamente, Firefox invece rompe le balle

[djordj]

Hai mischiato un po' le carte, in teoria la struttura (privata dei contenuti) deve essere questa.

<div id"masthead">
    <!-- contenuto header -->
</div>
<hr/>
<!-- Riquadro da posizionare RELATIVE contenente le tre colonne -->
<div id="corpo">
    <div id="navbar"><!-- ... --></div>
    <div id="content"><!-- ... --></div>
    <div id="headlines"><!-- ... --></div>
</div>
<hr/>
<div id="siteName">
    <!-- contenuto footer -->
</div>

Ogni sezione può essere separata da un tag <hr/>, normalmente nascosto quando viene processato il file CSS: questo tag serve per separare le sezioni quando il sito viene visualizzato in browser senza CSS.

Nel CSS devi cominciare a mettere:

body {
    margin:0;
    padding:0;
    text-align:center;
    }
    
hr {
    display:none;
    }

Per quanto riguarda le sezioni mainhead, copro e siteName imposta la stessa larghezza in pixel (o percentuale).
Poi:

#corpo{
    position:relative;
    }

Questo ti permette di posizionare i sotto-elementi di corpo in maniera assoluta, con riferimento all'angolo in alto a sinistra del riquadro corpo (e non più della pagina).
Lo scopo del gioco è posizionare CONTENT relativamente nel CORPO, facendogli occupare tutto lo spazio orizzontale disponiibile e impostando i margini left/right in modo tale da lasciare lo spazio laterale per le due colonne.
Le due colonne verranno poi sovrapposte in maniera assoluta al CONTENT.

#navbar {
    position:absolute;
    top:0; 
    left:0;
    width:(X)px;
}

#siteName{
    position:absolute;
    top:0; 
    right:0;
    width:(Y)px;
}

Ti faccio notare come per la colonna sinistra si sia impostato LEFT=0, mentre per la destra si è impostato RIGHT=0. Il posizionamento avviene all'interno del riquadro CORPO.
Il riquadro CONTENT non ha bisogno di troppi attributi:

#corpo-colonna2 {
    margin-left=(X)px
    margin-right=(Y)px;
}

L'unico difetto di questo template è che il footer va a posizionarsi alla fine del riquadro CONTENT, quindi se questo riquadro è più corto delle colonne il footer si sovrappone alle colonne stesse.
Di solito il CONTENT è quello più lungo perchè ha gli articoli, altrimenti è sufficiente impostare nei CSS un padding-bottom sufficiente ad "allungare" il CONTENT e a portare il footer ai piedi delle colonne.

Poi ti incollo la parte finale dell'articolo che ti spiega come evitare che le colonne di interrompano appena finiti i realtivi contenuti, lasciando quindi spazi bianchi tra il loro fondo e il footer.

Si nota che le colonne s'interrompono subito dopo i contenuti.

Il problema è di facile soluzione. Per quanto riguarda i bordi è sufficiente impostarli non nelle colonne laterali ma in quella centrale:

#corpo-colonna2 {
border-left:1px solid #000;
border-right:1px dotted #000;
}

Per quanto riguarda il colore dello sfondo delle colonne, la soluzione è molto semplice. Invece di agire direttamente sullo sfondo delle colonne, si agisce sullo sfondo del corpo e della colonna centrale, lasciando lo sfondo delle colonne trasparente:

#corpo {
background:#f0f0f0;
}
#corpo-colonna2 {
background:#fff
}

In questo modo le colonne laterali, essendo trasparenti, appariranno come se avessero uno sfondo grigio chiaro (#f0f0f0), mentre la colonna centrale avrÃ* uno sfondo bianco. Qualora si volesse che le due colonne non siano dello stesso colore, potremmo sfruttare un'immagine (GIF o PNG) monocromatica (un grigio leggermente più scuro, ad esempio #e0e0e0), larga come la colonna di sinistra (160 pixel) e alta un solo pixel. Impostando quest'immagine come sfondo che si ripete solo verticalmente per il corpo, avremo due colonne di differente colore. Il codice sopra riportato va così modificato:

#corpo {
background:#f0f0f0 url(sfondo_colonna1.png) repeat-y;
}
#corpo-colonna2 {
background:#fff
}

[gb]

Stefano, ti ringrazio veramente moltissimo per la tua gentilezza e disponibilitÃ*.

Avevo preso l'articolo sbagliato (quello più grezzo)

oggi cerco di rimetterlo a posto con le tua indicazioni


grazie mille

Ciao

Gian

[djordj]

Stefano, ti ringrazio veramente moltissimo per la tua gentilezza e disponibilitÃ*.

Avevo preso l'articolo sbagliato (quello più grezzo)

oggi cerco di rimetterlo a posto con le tua indicazioni


grazie mille

Ciao

Gian