menu in sovrapposizione

[claudioverga]

salve a tutti
come da immagine mi ritrovo ad affrontare un problema di mia non competenza.
i menu non vanno da capo nel loro spazio, ma si sovrappongono nello spazio occupato da altre cose infatti dopo il menu "ascolta la radio" c'è il menu "faq" che invade lo spazio sotto.


un aiutino per risolvere questo problema?

saluti e grazie

[KillerWorm]

Ciao, dalla sola immagine non è possibile comprendere come poter risolvere. In questi casi è meglio fornire anche il link della pagina in questione. Chiaramente dall'immagine si può dedurre che sia questo: http://www.trovamincitta.it/ (lo posto qui per avere un riferimento).

Ad ogni modo non mi è chiaro come vorresti che funzionasse; se vuoi che la barra menu si estenda in altezza per fare spazio alle eventuali voci che vanno a capo, oppure se vuoi che le varie voci dei menu siano in qualche modo ridotte per far entrare tutto in una singola riga.

A mio parere puoi comunque fare entrambe le cose. Iniziare intanto a impostare la barra in modo che, all'occorrenza, si estenda in altezza, quindi ridurre lo spazio tra le voci così da recuperarne un tanto sufficiente (per l'attuale situazione) a portarle tutte su una riga.

Dovrai intervenire modificando il css di questi due file (cliccaci sopra e vedi l'indirizzo se ti serve capire dove stanno):
turch.css
template.css

Per permettere l'espansione della barra menu, dovrai dare un'altezza automatica (attualmente è impostata con un valore fisso) e aggiustare opportunamente lo spazio sotto la barra stessa.

Puoi intervenire sul file turch.css modificando queste regole alla riga 23:

.navigation .menu {
    float: right;
    top: 6px;
    height: 50px;
    margin-bottom: 5px;
    font-size: 17px;
    list-style: none;
    display: block;
    position: relative;
}

Puoi rimuovere l'intera regola height: 50px;. In questo modo il valore di default per height sarà auto.
Quindi aggiustare il valore per margin-bottom; credo che 10px possano andare bene.

A questo punto dovresti già vedere la barra che si estende automaticamente in base ai suoi contenuti.

Invece, per ridurre lo spazio tra le voci, puoi agire sul margine destro dato agli elementi <li> (che compongono la barra menu).

Puoi intervenire sul file template.css modificando questa regola alla riga 1848:

.navigation ul.menu li {
    margin-right: 12px;
}

Anziché 12px puoi mettere 10px. Già con tale valore le voci si porteranno su una singola riga ma, all'occorrenza, puoi ridurre ulteriormente.

In realtà potresti anche ridurre il padding laterale (spazio attorno al contenuto) degli elementi <a> (che stanno dentro gli elementi <li>). Questa regola è definite su turch.css alla riga 48. Ad ogni modo credo sia sufficiente ridurre giusto il margine destro come indicato.

Tra parentesi, c'è da considerare che tu stai andando a modificare delle singole e semplici parti di un template ben più complesso. E' chiaro che intervenire in tale modo potrebbe provocare malfunzionamenti non prevedibili se non si sono esaminate tutte le eventualità del caso e non si conosce a fondo l'intero contesto. Una singola modifica di una regola css potrebbe influire in modo disastroso su altri elementi e funzionalità del template stesso. E' giusto una considerazione.

[claudioverga]

grazie mille
hai centrato in pieno il problema.


il mio intento sarebbe che la barra menu si estenda in altezza per fare spazio alle eventuali voci che vanno a capo, sperando di non sconvolgere l'intero template.