Lasciare le tabelle per i DIV

[jdipik]

Salve,
con colpevole ritardo ho deciso di passare dalle tabelle ai DIV.
Ho letto diverse guide, visto diversi esempi e più o meno ne ho capito il funzionamento.
Il meno è dovuto soprattutto alla necessita di fare pratica per capire fino in fondo le potenzialità di questo strumento.

Non faccio siti per professione ma soprattutto siti/applicazioni che utilizzo in locale per i più fantasiosi motivi. In realtà è un modo come un altro per continuare a fare un po' di codice, un hobby.

Ma veniamo al punto.
Potrtei postare tutti i codici che ho provato ma dato che nessuno restituiva quello che volevo evito, anche perché probabilmente sto sbagliando l'approccio a questo "nuovo" sistema.

L'obiettivo è questo:
div.jpg

Un DIV intestazione (cornice grigia) che contiene a sinistra un DIV logo (quello rosso) e a destra due DIV menù orizzontali sovrapposti (icone verdi e link).

Potrei risolvere dando ad ogni singolo DIV delle posizioni assolute o relative, e quindi nel foglio di stile creare delle classi per ogni singolo link o icona, però vorrei capire se c'è un modo migiore.

Ho provato diversi modi ma ottengo scarsi risultati, il "migliore" è avere i link (le scritte) e le icone (i riquadri verdi) nella giusta posizione verticale ma orizzontalmente con i link allineati alla sinistra delle icone e non sotto:
div.jpg

Grazie del vostro tempo.

[Mich_]

Direi che nella tua condizione dovresti avere una struttura di questo tipo:

1. un contenitore (grigio) che racchiude il tutto.
L'altezza puo` essere fissa (px) oppure in %, a seconda di cosa contiene il blocco rosso; o puo` essere lasciata automatica. Se il blocco rosso ha altezza variabile, potrebbe essere necessario definire un'altezza minima (min-height) che possa contenere almeno le altezze del menu verde e dei link neri (tale min-height potrebbe essere espressa in em, dato che il verde e il nero sono testi)
La larghezza potebbe essere espressa in %.
(per il position, vedi al punto 4)
Nota: per poter usare le %, occorre che il contenitore abbia dimensioni definite.

2. il blocco rosso
Se e` un'immagine, probabilmente va dimensionato in px (oppure lasciare le dimensioni intrinseche dell'immagine)
Se non e` un'immagine, occorre capire cosa e` per poter dare info piu` dettagliate
In ogni caso deve avere float:left

3. il menu verde
E` una lista non ordinata (tag <ul>) contenente una serie di oggetti <li>.
L'<ul> deve avere float:right (e probabilmente larghezza definita)
I <li> avranno larghezza definita o automatica, non importa, e dovranno avere float:left
Chiaramente al termine dell'<ul> ci dovra` essere un clear

4. la lista di link
Anche questa e` una lista (come il 3), e sara` formattata come il 3, con l'unico accorgimento di definire il bottom all'<ul>.
A questo proposito il contenitore 1 dovra` avere position:relative

Spero che con queste indicazioni riesci a formattare.

[jdipik]

Spero che con queste indicazioni riesci a formattare.

Perfetto mi hai messo sulla giusta strada.
Ora che ho ottenuto quello che volevo posso fare cambiamenti, ed utilizzare tutti i parametri per capirne meglio il funzionamento.

Mi permetto di aggiungere, alle volte la discussione interessasse altri, che in UL o lasciate il paramentro WIDTH in AUTO oppure dovrete sommare i LI. Magari era sfuggito solo a me e continuava a darmeli in verticale...

ps: l'unico dettaglio, ma ancora non ho finito di studiare i parametri di UL, riguarda l'allineamento verticale:
i riquadri verdi non me li ha messi ad inizio pagina, attaccati al bordo superiore del contenitore, ma ad una certa distanza;
i "link" invece me li ha allineati con il testo a cavallo del bordo inferiore del contenitore ma sono riuscito a correggere con LINE-HEIGHT

[Mich_]

Allora vedi di usare gli attributi CSS
margin (e tutte le variazioni: margin-top, margin-left, ...)
da applicare al blocco <ul> oppure ai vari <li>, sia quelli verdi che i link.

Per le prove consiglio di dare colori di sfondo diversi ai vari blocchi (nel tuo caso in particolare ai tag <ul>: questo permette di vedere l'effettiva occupazione dei blocchi ed aiuta a sistemare i parametri.