primi passi e primi problemi nel posizionamento dei div con CSS

benvi

primi passi e primi problemi nel posizionamento dei div con CSS

Salve.
Sto cercando di realizzare in CSS tableless la pagina che "apre" il sito "www.ilpoggiodelsole.it", e con i tentativi fatti (pubblicati su "www.carichisospesi.it/provePdS" ottengo il risultato voluto in IE7, mentre non va bene con FF (i girasole in alto, la dicitura "agriturismo" e le bandierine in basso se ne vanno troppo a sinistra).
Qualcuno puo' aiutare?
Grazie, M.

laburno

Ciao benvi!
e benvenuto nel forum GT!

Allora, il primo consiglio che ti do è: se funziona su Internet Explorer ma non su Firefox (o Opera), allora** è progettato male**. La prima cosa che è importante sapere sui CSS, è che non tutti i browser li interpretano correttamente... e con non tutti i browser intendo IE (specialmente le vecchie versioni).

Detto questo ho pensato che, invece che correggere e far funzionare il tuo css, sarebbe molto più comodo se ti facessi vedere un esempio di come l'avrei fatto io. Mi raccomando di tenere presente che è solo una delle millemila maniere adottabili per ottenere lo stesso risultato, perciò quella che ti mostro è solo una delle tante.

Per semplicità ho fatto finta di credere che la parte alta col logo e coi girasoli sia un unica grande immagine, larga quanto la foto dell'agriturismo, che si chiama header.jpg. Poi ho impostato la struttura in questa maniera:

[html]<div id="contenitore">
<div id="testata"><img src="header.jpg"></div>
<div id="corpo"><img src="foto.jpg"></div>
<div id="footer">
<div id="lingua"></div>
<div id="informazioni"></div>
</div>
</div>[/html]Per cominciare è buona norma e regola utilizzare un div che faccia da contenitore per tutto il layout: è il famoso wrapper che spesso appare negli esempi. Risulta utile per una lunga serie di motivi, il cui principale è quello di cambiare le dimensioni del layout del tuo sito modificando solo le impostazioni di un div (il wrapper appunto). In questo nostro caso si chiama contenitore.
Il div testata conterrà l'immagine header.jpg di cui ho parlato prima, il div corpo conterrà l'immagine principale foto.jpg.
Poi ho creato un footer, e l'ho suddiviso in due altri div lingua e informazioni i quali divideranno in due il contenuto per contenere le bandierine e l'indirizzo.

Detto questo, ho scritto il CSS in questa maniera.
Dovrebbe essere corretto anche se sicuramente non è preciso al pixel, ma è approssimativo perché purtroppo non ho avuto il tempo di provarlo. Comunque puoi dargli un'occhiata e eventualmente ci si rimette mano.

Eccolo qui, commentato passo passo:

[html]/* Si azzerano margini e padding per tutti gli elementi */

{ padding: 0px; margin: 0px; }
/* Il text-align: center serve per centrare il div contenitore su IE /
body {
background-color:rgb(76, 34, 0);
margin: 0px;
text-align: center;
}
/ Viene ripristinato text-align:left (altrimenti veniva ereditato dagli elementi interni) e si imposta il margine sinistro e destro ad auto per centrare il div sui browser che interpretano correttamente i css /
#contenitore {
text-align: left;
margin: 0px auto;
width: 750px;
}
/ Considero che la testata e il corpo andrannoa contenere un immagine ognuna (in una il logo coi girasoli, nell'altra la foto)
usare text-align:center è il modo più veloce per centrarla /
#testata, #corpo { text-align: center;}
/ al corpo e al footer ho dato un padding alto e basso /
, #footer {
background-color: #E6C990;
padding: 10px 0px;
}
/ imposto i due div interni al footer in modo che siano di dimensioni il 50% ognuno della dimensione del footer (che coincede con quella del contenitore), e con floa:left li posiziono uno accanto all'altro /
#lingua, #informazioni {
width: 50%;
float: left;
}
/ codice per stilizzare adeguatamente il paragrafo col testo /
p {
text-align: right;
/ Lo stile del testo */
}[/html]Se c'è qualcosa di strano o che non funziona, segnalalo così lo risistemo.

Spero di esserti stato d'aiuto

(E ancora benvenuto! )

osvi

no fermo

il position absolute va usato solo quando serve
non per posizionare tutti gli elementi della pagina, altrimenti si verificano queste situazioni

il box che contiene le bandiere (#box) dovrebbe contenere bandiere senza stili
poi metti

#box { background-color:. .... . } img { margin: 10px 5px; }

l'altra immagine a dx delle bandiere puoi metterla sempre dentro al box, ma prima delle bandiere e con float:right;

ciao,
Francesco

osvi

maledetto, mi hai battuto in velocità e qualità -.-

notte

laburno

@osvi said:

maledetto, mi hai battuto in velocità e qualità -.-

notte

Massìe! Ciù is mèl che uan!