aiuto impaginazione layout css

[pape86]

Ciao a tutti!
sto cercando un'anima pia, una santa persona che mi aiuti a risolvere qualche problemino d'impaginazione di layout per il mio sito.
Premetto che sono alle prima armi, mi sono letto diverse guide su html e css (presenti su html.it), tuttavia ci sono diversi dubbi che ho soprattutto per quanto riguarda i css e il box-model.
Allora, quello che vorrei ottenere è un layout di questo tipo (vedi figura), è un layout a due colonne con però la navigazione sotto l'header:
- header
- navigazione (sotto l'header)
- contenuti
- colonna a dx (extra)
- footer



I principali problemi che ho riscontrato sono questi:
- siccome ho 3 tipi diversi di immagine che devo usare per lo sfondo, non so come inserirle. Mi spiego meglio: come si può vedere dall'immagine, mi serve un'immagine ripetuta verticalmente per il margine sinistro, un'altra ripetuta verticalmente per il margine destro, e una terza che sia ripetuta orizzontalmente per l'header e verticalmente nella colonna extra. Sono riuscito solo in parte a metterle, perchè da quel che ho capito, si può inserire solo una immagine di sfondo.

- altro problema...l'impaginazione dei vari div (header, footer, content, extra, navigation): non ho ben chiaro come impaginarli, se usare un layout fisso, fluido, ecc.

- mi si crea uno spazio bianco sopra l'header...perchè??

Questi sono i link alla pagina html che ho creato (http://papelandia.altervista.org/fantabasei/index.html) e al foglio di stile relativo (http://papelandia.altervista.org/fantabasei/layout1.css).

Se qualcuno fosse così gentile da darci un'occhiata e vedere cosa ho sbagliato e dove dovrei metter le mani lo nomino SANTO immediatamente! :ridere:
...non so più dove sbattere la testa ormai! :no:

Grazie anticipatamente!!! ciao!

[ispuk]

dai margin-top:-25px; al div header nel css per quanto riguarda lo spazio bianco in alto,ma è solo una soluzione veloce,ci sarebbe da riguardare da zero il codice il tipo di layout dipende esclusivamente da cosa vuoi tu

se fluido usi dimensioni in em o in %
se fisso usi dimensioni in px

se non sei abbastanza pratico di css ti consiglio la soluzione fisso,più rapido da capire

senza contare che sono molto più rari i casi di siti fluidi rispetto a quelli fissi

vedi un pò te.... ciao

[ale87440]

Per sistemare il problema dello spazio bianco in alto modifica il css aggiungendo la riga in grassetto:

div#header h1 {
color:yellow;
font-size:xx-large;
text-align:center;
margin-top:0px;
}

[pape86]

perfetto! un problema è stato risolto, quello dello spazio bianco sopra l'header..in effetti dipendeva dal titolo h1 e bastava mettere "margin-top: 0px;". Per quanto riguarda il layout, come suggerito da ispuk, adotterò uno fisso, tanto per iniziare.
Però ho notato una cosa: se rinpicciolisco la finestra del browser, tutti i div mi si scombinano! dipende dal fatto che i posizionamenti sono assoluti??

L'ultima cosa...per quanto riguarda le immagini che vorrei mettere come sfondo...con i css mi è sembrato di capire che posso mettere solo una immagine di background, giusto?
C'è un modo per mettere due diverse immagini, tipo una ripetuta verticalmente a sinistra e l'altra ripetuta a destra (in modo da rimpire i margini)?

intanto vi ringrazio per le dritte e i consigli che mi avete dato!!!

[ale87440]

Si un layout fisso è consigliato, e i problemi con i div sono dovuti ai posizionamenti assoluti, sarebbe meglio utilizzare i relativi così tutto rimane proporzionato anche a diverse risoluzioni... Per le immagini potresti risolvere così:

- usi un layout fisso, ad esempio width:960px; per il container, poi dai margin:0 auto; che così viene centrato orizzontalmente nella pagina... Come background-image del body crei un'immagine di un campo che ha agli estremi le 2 righe bianche, così non hai nemmeno il problema di mettere uno sfondo a "lega fantabasei" che non è continua con l'altro sfondo (si vede lo stacco tra le 2 immagini)...

<-----immagine campo----->
riga |contenuto sito| riga

Capito? E' più difficile spiegarlo che farlo...

[pape86]

infatti...avevo pensato anch'io, tra le varie soluzioni, di fare una cosa del genere, e cioè, come hai detto tu, di fare un'unica immagine di background che abbia ai due lati la linea bianca e al centro l'erba.
Però poi mi sono chiesto: quanto grande la faccio?? cioè, per l'altezza non dovrebbe essere un problema, perchè posso usare repeat-y e siamo ok! ma in larghezza, dovrei farla giusta uguale alla larghezza della pagina, perchè non posso usare repeat-x (visto che ai lati c'è la linea bianca) e se la faccio troppo corta rimane dello spazio ai bordi finachi della pagina e se la faccio troppo lunga quando ridimensiono la pagina o uso risoluzioni più basse mi si scombina tutto!

Sennò, a questo punto, pensavo di rifare tutto daccapo e cambiare tipo di layout, qualcosa di più semplice, di quelli predefiniti..poi quando avrò più esperienza e competenze con i css, vedrò di tornare sull'idea di partenza.

[ispuk]

ciao il problema dello spazio bianco è risolto ma in maniera rude,nel senso che dovresti riscrivere da zero il codice per ottenere risultati buoni

concordo che le posizioni assolute non vadano usate tranne i casi di finestre fluttuanti banner cose del genere

guardati una guida sui CSS anche su questo sito ne trovi una molto bene fatta

devi pensare al tuo layout come a una matrioska,tutto sta dentro ad un contenitore,ma se le matrioske interne (div figli) risultano sballati non riuscirai mai a costruire una matrioska ..... scusami il paragone.....ma è per dire che ogni div ha dimensioni relative al div che lo contiene ....se sfori anche di 1 px il layout si sballa

ciao e buon lavoro