Struttura layout CSS

venerdì 08 ottobre 2010 - 09.55

dandi.box Profilo | Junior Member

Ciao a tutti, ho creato un'immagine relativa alla struttura di un layout (molto semplice) che vorrei utilizzare, ora vorrei "trasformarla" in css ma ho qualche problema con i posizionamenti.

Nel dettagllio vorrei avere nel contro della pagina (orizzontale e verticale), un box lungo 950px e contenente questi elementi:

http://www.nixor.it/tmp/layout_ok.png

questa struttura dovrà essere riempita poi con vari content, quindi sarebbe lo scheletro:

nell'area menu inserirò il menu
nell'area content ovviamente il contenuto
nell'area immagine un'immagine diversa per ogni contenuto

Potete aiutarmi a creare questa struttura?

Grazie

alexmed Profilo | Guru

Ciao
Prova a vedere se questo ti va bene
http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/3-column-css-layouts/fw-34-3-col/

Dovrai solo adattare la larghezza totale e quelle della colonna centrale e di quella destra per l'immagine

Ciao

alexmed

dandi.box Profilo | Junior Member

Prima di tutto ti ringrazio per l'aiuto!!!

Io avevo già provato ad utilizzare una struttura esiste ma non so come impostare correttamente le immagini nei vari background (in quando dovranno i vari background dei div perchè sopra avrò altri testi/immagini)

... e non riesco nemmeno a centrare verticalmente la mia area (come non lo è nel CSS)

alexmed Profilo | Guru

Ciao
Ti allego progetto
Partiamo da qui a fare le modifiche che ti servono.

Ciao

alexmed

dandi.box Profilo | Junior Member

Ho aperto il progetto, la struttura andrebbe bene ma non so come inserire le immagini che mi servono (come background)

considerando che in la la parte laterale (DX)... ha una parte (il cerchio) che va nell'header.....

quindi non so come isolare le porzioni del mio layout per ricreare la struttura

:((

alexmed Profilo | Guru

Dunque
L'impaginazione è messa giù al volo ma agendo sui valori degli attributi dei vari elementi ti accorgerai che puoi impostare la posizione dei vari div.
Ad esempio
Se al div#header che attualmente ha un'altezza (height) pari a 60px, metti 100px, tutti gli altri div scaleranno verso il basso. Se metti 30px saliranno.
Quindi agendo su questi valori puoi facilmente adattare i div al layout dell'immagine di sfondo.

Per quanto riguarda la colonna di destra, se hai bisogno di mettere un'immagine che sia in una certa posizione, anche qui, impostando le "coordinate giuste, riuscirai ad ottenere il risultato che vuoi.
Ad esempio, sostituisci il codice della colonna destra
<!-- Begin Right Column -->
<div id="rightcolumn">

</div>
<!-- End Right Column -->

Con questo:

<!-- Begin Right Column -->
<div id="rightcolumn">

<img alt="" src="http://images2.wikia.nocookie.net/__cb20091207014605/nonciclopedia/images/2/2b/Logo_Windows_trasparente.png"
style="width: 255px; height: 255px; vertical-align: middle; text-align: center; margin-top: 60px; margin-left: 15px;" />

</div>
<!-- End Right Column -->

Come vedi hai un'immagine che si sovrappone all'immagine di sfondo
Fammi sapere



alexmed

dandi.box Profilo | Junior Member

Scusa ma io non riesco proprio a creare la struttura... non vorrei abusare della tua cortesia, ma mi perdo :((

alexmed Profilo | Guru

>Scusa ma io non riesco proprio a creare la struttura... non vorrei
>abusare della tua cortesia, ma mi perdo :((
Non preoccuparti: siamo qui per questo, anzi, potrei non aver capito bene la situazione.
Prova a rispiegarmela.

Ciao

alexmed

dandi.box Profilo | Junior Member

Praticamente io mi sono creato il layout (il PNG che ho allegato)

ora vorrei separare il tutto avendo:

- un blocco centrato (orizontalmente e verticalmente)
- che si presenti graficamente come il file allegato
- ma avendo X aree separate (div), l'header, il menu, il content, l'area per le immagini ed il footer

immagino quindi che alcuni div dovranno avere un'immagine di background (tipo il div che conterrà le immagini avrà il cerchio marrone come sfondo) ... l'header avrà la riga marrone, idem il footer ....

ecc...

alexmed Profilo | Guru

>Praticamente io mi sono creato il layout (il PNG che ho allegato)
Diciamo che hai creato "un'immagine del Layuot" o un'immagine di sfondo.
Basta solo decidere quale strada seguire.
Quella che ti ho proposto io è quella di lavorare con un'immagine unica di sfondo ed una struttura (div) che si sposa sopra.

>ora vorrei separare il tutto avendo:
Quindi vorresti crearti per ogni div un'immagine di sfondo come un puzzle.

>- un blocco centrato (orizontalmente e verticalmente)
Questo lo otteniamo con il blocco #wrapper
Abbiamo impostato la larghezza a 960px e tramite "margin: 0 auto;" abbiamo impostato i margine superiore ed inferiore a 0 e quelli di sinistra e destra in "automatico" ovvero centrato
>- che si presenti graficamente come il file allegato
Ok
>- ma avendo X aree separate (div), l'header, il menu, il content,
>l'area per le immagini ed il footer
E come vedi il file che ti ho dato presenta proprio queste aree
>immagino quindi che alcuni div dovranno avere un'immagine di
>background (tipo il div che conterrà le immagini avrà il cerchio
>marrone come sfondo) ... l'header avrà la riga marrone, idem
>il footer ....
Come accennavo sopra: dovresti crearti un'immagine ritagliandola da quella che hai allegato da usare come background-image per ogni div.
Ma a questo punto perchè complicarti la vita e spezzettare l'immagine dovendo poi far combaciare alla perfezione le due strutture?
Ripeto: basta agire sui valori margin-top e bottom ed height per far combaciare i div con l'immagine di sfondo.

> (tipo il div che conterrà le immagini avrà il cerchio
>marrone come sfondo)
Non vorrai mica un div rotondo?


alexmed

dandi.box Profilo | Junior Member

Ho fatto delle prove, ora la versione aggiornata è:

http://www.nixor.it/tmp/layout.zip


però non so come modificare

top: VALOREpx;
left:VALOREpx;

dei vari div


anche perchè che il layout fosse centrato verticalmente ed orizzontalmente

quindi layout da 950 x 650 (centrato)

alexmed Profilo | Guru

Prova così:

CSS:

#contenitore { width: 950px; margin: 0px auto; } #logo { background-image: url('logo.png'); background-repeat: no-repeat; width: 950px; height: 93px; top: 10px; } #menu { background-image: url('menu.png'); background-repeat: no-repeat; width: 230px; height: 424px; float: left; } #area_contenent { background-image: url('content.png'); background-repeat: no-repeat; width: 379px; height: 424px; float: left; } #immagine { background-image: url('immagine.png'); background-repeat: no-repeat; width: 338px; height: 424px; float: left; } #footer { background-image: url('footer.png'); background-repeat: no-repeat; height: 74px; } .clearfix { clear: both; }

HTML:

<body> <div id="contenitore"> <div id="logo"> </div> <div id="menu">Inserisci qui il menù</div> <div id="area_contenent">Inserisci qui i contenuti</div> <div id="immagine">Puoi inserire qui l&#39;immagine o metterla direttamente come sfondo</div> <div class="clearfix"> </div> <div id="footer">Inserire qui i dati.</div> </div> </body>

Aspetto.
alexmed

dandi.box Profilo | Junior Member

Faaaaantastico!!

E' perfettoooo

ora mi studio bene la tua soluzione !!

Grazie

alexmed Profilo | Guru

>Faaaaantastico!!
>
>E' perfettoooo
Bene!
>ora mi studio bene la tua soluzione !!
Una dritta:
Se vuoi che due o più div stiano affiancati devi impostargli la direttiva "float:lefth"
Per riprendere il flusso normale (uno sotto l'altro) devi mettere una direttiva clear:both ed ecco perchè ho inserito il div clearfix
>Grazie
Prego

Ciao


alexmed

dandi.box Profilo | Junior Member

Grazie ancora per l'aiuto!!!

dandi.box Profilo | Junior Member

Solo un ultimo problemino.... come posso centrare verticalmente la struttura??

Ora è spostata in alto

Thanks

andrestu Profilo | Expert

ciao, non ho letto tutta la discussione ma solo la parte iniziale.
Mi intrometto per dirti che sulla mia pagina web dò a disposizione un controllo Free che crea un DIV autoadattante allo schermo in modo che poi puoi costruire al suo interno il sito. Te lo dico perchè ho visto nell'esempio che stai cercando di crearlo autoridimensionante, questo controllo allora fa al caso tuo, il punto è che dovresti stravolgere completamente la struttura quindi se sei già a lavoro terminato allora non so se ti conviene, comunque se ci vuoi dare un occhiata...
Andrea Restucci - Web Programmer
www.andrearestucci.name
Download and try my FREE custom controls !!!

dandi.box Profilo | Junior Member

Grazie per la risposta ma preferirei capire come utilizzare correttamente i CSS, in questo caso per centrare verticalmente tutta la mia struttura

dandi.box Profilo | Junior Member

Nulla!!!

Ho fatto altre prove ma non capisco come fare :(

alexmed Profilo | Guru

Ciao
Credo che con i CSS non si possa risolvere e quindi devi ricorrere a javascript

HTML:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Tieni presente che la funzione "screen.height" ti restituisce la risoluzione dello schermo e quindi il posizionamento del div è falsato della dimensione della barra del browser che utilizzi.

Adesso cerco qualcosa in jQuery

Ciao

alexmed

alexmed Profilo | Guru

Come non detto!!!

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Ti rimando anche alla "spiegazione":

http://tech.piyodesign.it/archive/2006/04/21/157.aspx

Ciao

alexmed

dandi.box Profilo | Junior Member

Ho letto l'articolo!! Interessante la doppia gestione!
quello che non so però è come impostare i px, ipotizzando che il mio sito ha

width 950px;
height 500px;

Grazie!!!

alexmed Profilo | Guru

Prova così:

Il codice sorgente non è stato renderizzato qui
perchè non c'è sufficiente spazio.
Clicca qui per visualizzarlo in una nuova finestra

Ciao
alexmed

dandi.box Profilo | Junior Member

Questa soluzione dovrebbe funzionare sia con IE che con FF??

perchè questo cambiamento rispetto al *div> di prima??

Grazie

alexmed Profilo | Guru

>Questa soluzione dovrebbe funzionare sia con IE che con FF??
Si ma conviene provare.
>perchè questo cambiamento rispetto al *div> di prima??
Ho trovato un'altro articolo (http://css.flepstudio.org/css-tutorials/allineamento-centrato-verticale-orizzontale.html) e mi sembra ancora più semplice.
>Grazie
Prego

alexmed

dandi.box Profilo | Junior Member

Graaaaazie!!!

dandi.box Profilo | Junior Member

Scuuuusa se disturbo ancora!! La struttura è perfetta, ma dato che ormai sto facendo alcune prove con i CSS, vorrei capire questo:

è possibile partendo dalla struttura che abbiamo condiviso (con quelle immagini) fare in modo che il width sia "dinamico"?? Quindi sempre all'80% delle pagina?? (e per l'height, la soluzione più semplice per te.... o si adatta al width oppure sempre all'80%)

Spero tanto sia possibile gestire dinamicamente la struttura precedentemente creata

Grazie!!

andrestu Profilo | Expert

con i miei controlli tutti questi problemi non li avresti...



Andrea Restucci - Web Programmer
www.andrearestucci.name
Download and try my FREE custom controls !!!

dandi.box Profilo | Junior Member

Utilizzo MAC e non posso eseguire i tuoi app.

alexmed Profilo | Guru

Ciao
Ieri sera ho fatto un pò di prove, ed ho scoperto che per la larghezza puoi lavorare con le percentuali.

Quindi:

<div style="width:950px;height:500px;position:absolute;left:50%;top:50%;background-color:#666666;
margin-left:-475px;margin-top:-250px;">
Centrato
</div>

diventa

<div style="width:80%;height:500px;position:absolute;left:50%;top:50%;background-color:#666666;
margin-left:-40%;margin-top:-250px;">
Centrato
</div>

Ma per l'altezza non ho ancora trovato una soluzione.

Provo ancora e ti faccio sapere.

Resta da vedere (se ho interpretato bene il tuo obiettivo) se, inserendo la struttura all'interno di questo div, si adatta tutto il resto.

Ciao

>PS per andrestu
Prima o poi proverò le tue soluzioni, ma prima, e penso sia anche la situazione di dandi.box, mi piacerebbe capire come funzionano i CSS & Company, poi posso utilizzare gli automatismi, altrimenti che gusto c'è?.
Sei daccordo?
alexmed

andrestu Profilo | Expert

si certo ovvio che conoscendo tutti i dettagli di un implementazione simile agevola poi la personalizzazione... e comunque il mio controllo non è niente di stratosferico, crea semplicemente un div della grandezza massima possibile dello schermo che richiama il sito in relazione ad un immagine che può essere anche non utilizzata come sfondo ma solo per calcolare le proporzioni, quello che forse da il vantaggio e la possibilità di avere in più delle dimensioni di testo dinamico in modo che rimane tutto proporzionale al resize dello schermo, la sua implementazione è un mix di javascript, CSS e C# lato server, il tutto inserito dentro un controllo. Diciamo che simula il comportamento di alcuni siti fatti con flash che si autoadattano allo schermo ma alla fine è sempre HTML e CSS...


Andrea Restucci - Web Programmer
www.andrearestucci.name
Download and try my FREE custom controls !!!

alexmed Profilo | Guru

>crea semplicemente un div della grandezza massima possibile dello schermo ...
Quindi vai a cercare la risoluzione dello schermo con screen.width e screen.height?




alexmed

andrestu Profilo | Expert

no prendo la grandezza effettiva disponibile dello schermo con

document.body.offsetWidth
document.body.offsetHeight

in questo modo prendo quello che è effettivamente disponibile, e cioè se ci sono delle barre aggiuntive che riducono lo spazio verticale la dimensione calcolata è quella effettivamente realmente disponibile.
poi passo questi dati tramite postback al codebehind lato server, genero quindi un div delle dimensioni giuste in relazione alle proporzioni di un immagine di sfondo scelta, il risultato è che avrò l'immagine di sfondo sempre della dimensione massima disponibile che può avere in base allo schermo disponibile. Se non voglio usare uno sfondo posso utilizzare l'immagine per impostare semplicemente le proporzioni, quindi potrò così ottimizzare il sito per 4:3 o 16:9 o qualsiasi altra proporzione.
è ovvio che il sito non dovrà perforza essere generato in modo da rimanere all'interno di un area circostritta ma potrà tranquillamente espandersi in verticale come un sito standard...

comunque puoi vedere l'implementazione di questo controllo andando sul mio sito www.andrearestucci.name oppure su www.distribuzionedais.it, una volta aperti prova a cliccare sul quadratino standard che hanno tutte le finestre di windows, il quadratino che sta in mezzo tra la X (che chiude la finestra) e il trattino (che la riduce a icona), vedrai che il sito si riadatta in automatico alla nuova dimensione. Purtroppo se provi a ridimensionarla manualmente potresti avere un ritardo nel ridimensionamento questo per un motivo tecnico che non sto a spiegarti, comunque l'importante è che alla normale richiesta con la finestra ferma il sito si adatti...

a dimenticavo cè anche la possibilità di impostare una dimensione minima sotto la quale il sito non scende

Andrea Restucci - Web Programmer
www.andrearestucci.name
Download and try my FREE custom controls !!!
Partecipa anche tu! Registrati!
Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !
Copyright © dotNetHell.it 2002-2024
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5