menu asimmetrico

[MaxSimon]

Ciao a tutti.
Dovrei realizzare un menu come il file allegato: voci di menu a larghezza variabile ma con i margini sul testo delle singole voci sempre identico (per capirci meglio, il menu collabora e più largo del menu eventi).

Problema2.
Inoltre, cosa più ardua, le voci del menu secondario con testo lungo (ad esempio Rassega Stampa) devono andare su due righe (facile questo con white-space), ma il testo deve risultare allineato alla voce padre.
Se imposto un margine o un padding lo prende solo sulla prima parte della testo, non sulla parte che va a capo.

Problema3.
L'interlinea fra testo-non-a-capo e testo-a-capo deve essere inferiore al normale (vedi nel file allegato rassegna stampa oppure lavora con noi).
Ho provato a impostare line-height sulle voci del sottomenu , ma nelle voci con testo-a-capo mi prende un'altezza doppia rispetto a quelle con testo-non-a-capo.
E' possibile allineare il testo del sottomenu in verticale (vertical-align non va): qualche suggerimento?

Per ora sono arrivato qui.

Grazie.

[MaxSimon]

Ecco l'immagine del menu come dovrebbe essere: è brutta, ma altrimenti non stava nei 25000bytes!!

[MaxSimon]

Quancuno può gentilmente darmi qualche dritta per sistemare questo menu?
Non riesco a dare la giusta larghezza al menu a discesa: dovrebbe essere identica al menu principale, ma anche con with:inherit non funziona.

Grazie.

[Mich_]

Il menu della pagina e` molto diverso da quello presentato nella figura sopra.

Comunque ho dato un'occhiata alla pagina, ma ho notato che e` molto complessa.
Inoltre il codice non rispetta le indentazioni e questo complica enormemente il lavoro di chi volesse capire qualcosa.

In conclusione se vuoi aiuto sul menu, dovresti assolutamente fare una pagina nuova con SOLO il menu e i CSS ad esso legati, togliendo tutto il resto (tutti gli altri CSS e tutti i JS).

Comunque in rete ci sono ottimi esempi di menu, gia` realizzati correttamente, che si possono prendere come modelli. ALcuni riferimenti ci sono tra i "llink utili" (a me piace come e` organizzata la pagina di CSSplay).
Io credo che fai prima a partire da zero da un menu pronto ed inserirci i tuoi dati (ed i tuoi colori), piuttosto che metter mano al lavoro gia` fatto.

[MaxSimon]

Grazie Mich per la risposta.
La pagina è complessa perché è generata dinamicamente da un CMS: non posso prendere un menu "preconfezionato", ma devo lavorare sul css per modificare l'aspetto di quello esistente.

Il concetto di base é questo:

• menu orizzontale posizionato in modo assoluto con larghezza fissa (width:924px)
• singole voci del menu principale con margine destro e sinistro fissi e larghezza variabile (width:auto)
• nel menu a discesa dovrebbe prendermi la larghezza della relativa voce del menu principale

La parte che non riesce ad ottenere è proprio il terzo punto: ne con width:auto, ne con width:inherit mi prende la larghezza corretta; non posso nemmeno impostare una larghezza fissa in px, ovviamente, perché le voci del menu principale non hanno una larghezza fissa.
E' corretto questo ragionamento?

Sostanzialmente la struttura del html è questa:
<div class="menu">
<ul >[*]home[*]chi siamo
<ul>[*]storia[*]mission
...[/list]
...[*]eventi
<ul>[*]rassegna stampa[*]photo gallery[/list][*]contatti[/list]
</div>

mentre la parte del css che interessa il menu è questa (in rosso le parti che non funzionano a dovere):

/* begin menu structure */
.menu {
margin: 0 auto;
text-align: center;
width: 926px;
}

.menu ul {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
width: auto;
}

.menu li {
display: block;
float: left;
position: relative;
text-transform: uppercase;
width: auto;
margin-left: 0;
margin-right: 0;
}
/* end menu structure */

/* begin MenuItem */
.menu a {
position: relative;
display: block;
padding: 0 30px; /* allarga l'hover a tutto il campo */
color: #254CA2;
margin: 0 0;
line-height: 26px;
text-align: center;
}
/* end MenuItem */


/* begin MenuSubItem */

.art-menu ul a {
display: block;
text-align: center;
width: inherit;
overflow: hidden;
line-height: 26px;
white-space: inherit;
height: auto;
}


.menu ul a {
text-align: left;
text-indent: 30px;
margin:0;
padding:0;
}

.menu ul li:hover>a {
color: #254CA2;
border-color: #ADD68F;
background-color: #ADD68F;
background-position: 0 -20px;
}


Ho cercato di estrapolare il minimo per renderlo più comprensibile.

Grazie comunque a chi volesse darmi qualche suggerimento.

[Mich_]

Ho cercato di estrapolare il minimo per renderlo più comprensibile

E non hai usato i tag del form in modo corretto.
Correggi o riposta inserendo nei tag [ code ] (vedi bottone sopra l'area di inserimento).
Vedi che le indentazioni siano rispettate!

E non omettere nell'HTML le classi usate nel CSS, altrimenti non si riesce a capire il comportamento.
E se dentro un[*] c'e` un <a>, devi mettere anche quello.

E comunque, dato che l'HTML e` comune a tutti i menu, ti consiglio di copiare da un menu pronto: e` comunque piu` semplice che metter mano al CSS.

[MaxSimon]

Risolto!
Posto la soluzione, magari può risultare utile a qualcuno.

Impostando with:100% nel submenu ho ottenuto la stessa larghezza del menu principale.
Utilizzando inoltre sulle voci di testo del sottomenu line-height:auto (al posto della sua specifica in px) e un padding-top/bottom, ho ottenuto un'interlinea migliore sulle voci wrappate.

Togliendo poi il text-indent al testo ed utilizzando al suo posto un padding-left anche le voci di testo wrappate su una seconda riga risultano allineate correttamente.

Grazie.