annidamento div e loro posizionamento

[George_star]

Ciao a tutti,
stavo provando a fare un sito composto da una serie di div annidati l'uno dentro l'altro:
in pratica ho 9 div messi in una matrice 3x3. Ogni div è uguale all'altro come dimensione ed infine sopra a tutto ciò c'è un div con overflow hidden che mi mostra solo la dimensione di uno di questi div. In pratica si vede solo un div alla volta.
Dentro ogni div c'è una pagina del sito per capirci.
In una di queste 'pagine' ci vanno 3 fotografie a tutta altezza che dovrebbero stare dalla parte destra e nello spazio vuoto che rimane a sinistra un altro div più largo rispetto alle fotografie che si popola con del testo in base a quale foto si clicca.
Non riesco assolutamente a mettere le fotografie nel lato destro. Le foto mi si incolonnano nella parte sinistra.
Ho provato con il float o imponendo la posizione ma nulla non gliene frega nulla.

Spero di esser stato chiaro

[ricman]

La storia dei 9 quadrati serve? ...perchè non ho capito...

Invece riguardo alla foto da allineare a dx io farei proprio col float.

<div id="container">
   <div class="descrizione" style="float:left"></div>
   [img].....[/img]
</div>

[George_star]

Questa sera provo a mettere online il test così si capisce meglio il concetto.
intanto grazie

[Mich_]

Non e` che per caso vuoi qualcosa che assomiglia ad un "menu a tab" ?
In tal caso vedi tra i menu pronti (alcuni sono citati tra i "link utili")

La cosa comunque e` assolutamente slegata da quello che inserisci nei vari blocchi.

Per il posizionamento delle immagini, la cosa piu` semplice e` usare il float.
A seconda dell'ordine in cui compaiono il div e le foto devi usare il flaot:left oppure il float:right.
Ricorda alla fine di metterci anche il clear, altrimenti il float si ripercuote su tutta la pagina.

[George_star]

Ciao,
grazie intanto per i consigli
questo è il link alla pagina giusto per farvi capire

http://www.studyo3.com/R4

il menu a lato non funziona ancora come voglio ma l'ho fatto al volo giusto per avere un'idea.

Se cliccate sulla prima scritta del menu, ossia su STUDYO3, la pagina a lato scorre mostrando una foto. io quella la vorrei nel lato dx e non sx ed in fine a lato vorrei altre 2 foto e sempre più a sinistra un altro div che conterrà i CV

Ora dovrebbe esser più chiaro

Grazie!

[Mich_]

Stai usando il float:left per due livelli diversi: per i vari contenitori .pageDim e per gli oggetti al loro interno. E` chiaro che cosi` fai confusione.

Visto che gia` usi i posizionamenti assoluti (cosa estremamente sconsigliabile, per quanto mi riguarda), tanto vale che metti in posizione assoluta i vari oggetti che hanno classe pageDim.

E comunque il float:left ti fa scorrere l'immagine il piu` a sinistra possibile: per vedere qualcos altro alla sua sinistra, dovresti avere un oggetto con float:left e larghezza definita che sta prima della tua immagine.

[George_star]

Ciao,
stavo cercando di utilizzare i tuoi consigli ma ho qualche problema...
per prima cosa visto che mi dicevi che fare quei 9 div a matrice non aveva senso ho eliminato quelli vuoti e cercato di impostare esattamente la posizione via css usando il selettore per ID per ogni blocco che poi sarà una pagina.
Quella home me la posiziona per bene.

La seconda pagina/div si chiama #dAboutus e la posizione è quella corretta ma pare che la faccia di dimensione a ca@@o nonostante io la imponga come la voglio

La terza pagina/div invece non c'è modo di metterla in fila con l'altra. e mi va a caso. Secondo me il motivo è dovuto al fatto che non vede la dimensione della seconda pagina e così va a capo.

Il megadiv che circonda tutte le pagine gli ho dato come posizione 'absolute' mentre i div inclusi hanno position 'relative'. Se non erro questi dovrebbero usare come punto di riferimento proprio il div che le circonda...

qui ritrovate la demo aggiornata

help

[Mich_]

Mi par di capire che hai tre livelli di innestamento di oggetti (per chiarezza li chiamo schermate), ciascuno che deve occupare l'intera area del browser.

Tecnicamente questo e` un menu a tab a due livelli, per cui io eviterei la tua matrice, ed userei invece le tecniche dei menu a tab.
La cosa principale e` che sono tutte sempre presenti e sovrapposte: passando sopra il tab viene cambiata la proprieta` display oppure z-index.


All'interno di ciascuna schermata, poi hai le solite cose che si fanno in una pagina: oggetti da sistemare a destra o a sinistra (colonne) o in alto/basso (header/footer).
Il posizionamento di questi oggetti all'interno della schermata e` piuttosto semplice e gia` risolto se la schermata stessa e` posizionata in modo assoluto; e` invece una cosa da reinventare daccapo se il posizionamento e` fatto con i float.

Quindi: se non vuoi usare la tecnica del menu a tab, tutte le tue schermate devono essere posizionate in modo assoluto: solo cosi` puoi essere sicuro di posizionare l'inizio al punto giusto ed evitare i problemi che indicavi.

Consiglio: usa colori diversi per gli sfondi in questa fase di test: e` molto piu` semplice capire cosa stai facendo e modificando.

[George_star]

Ciao allego disegnino osceno su come pensavo di fare il tutto.
Magari mi puoi dire come ti saresti approciato te alla cosa

ti spiego il disegno:
il grigio sarebbe la schermata del browser.
Il quadrato più esterno è il box che contiene tutto il sito. lo uso perchè tramite css lo imposto in centro orrizzontale della schermata (#mainContainer).
All'interno di questo primo div ce ne sono 3: due stanno a sinistra e contengono logo e menu, mentre il terzo (#box tratteggiato) si trova a fianco dei primi 2 div e ha la caratteristica di avere la proprietà overflow: hidden. In questo modo si vede solo il contenuto compreso all'interno del div.
Dentro a #box metto tutte le pagine/schermate che ad ora dovrebbero esser messe come vedi in disegno (i quadrati rosa, non badare alle dimensioni del disegno, devono avere le stesse dimensioni del div #box).
Io vorrei far si che cliccando i vari punti del menu tutte queste schermate si spostino per raggiungere la nuova posizione richiesta e per far questo le ho messe dentro un div #wrapper
Per riassumeere il div#box include #wrapper che include #P1, #P2 ecc.
non riesco a mettere nella giusta posizione e dimensione questi vari div #P...

Grazie mille per il tuo interessamento!!! A buon rendere...

[Mich_]

Prima di proseguire, e` il caso che tu sappia cosa e` un menu a tab.
Vedi tra le raccolte di menu (alcuni riferimenti tra i "link utili")

Tieni presente che il tuo menu funziona SOLO tramite JS, per cui chi non avesse JS attivo non potrebbe navigare.
Invece i menu a tab funzionano anche senza JS (pero` possono venir resi piu` accattivanti tramite JS).


PS: ottimo il tuo disegnino: e` molto chiaro (comunque avevo gia` capito la cosa)