• F
    User Newbie •

    Aiuto utilizzo css menù al 100% e non con dimensione fissa

    Singori dei CSS buongiorno,

    avrei un piccolo, diciamo disperato, quesito da sottoporvi e con il vostro aiuto da risolvere in merito al menù che ho caricato a questo indirizzo:

    fantafox.com/menu-nav/pro_dropline.html (non essendo ancora utente premium il link come indicato,deve essere completato con il normale prefisso vuvuvu.)

    Il mio problema, è che dopo aver scaricato questo menu, ho provato ad adattarlo alle dimesioni 100%, ma ho fallito miseramente, o meglio, il menù adattato al 100% non funziona (il menù di secondo livello anziche rimanere sulla stessa linea si allinea al lato sinistro e porta le voci che lo compongono, una sotto l'altra) con i.e. il che come potrete capire è un bel problema. :arrabbiato:

    Il menù che ho pubblicato è allo stadio originale, senza i miei tentativi di adattarlo, ma in breve di seguito vi riporto i 2 parametri che avevo sostituito:

    Codice originale

    .nav {
    height:35px;
    background: url(pro_line_0.gif) repeat-x;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:11px;
    width:750px;
    z-index:500;
    }

    Codice Modificato

    .nav {
    height:35px;
    background: url(pro_line_0.gif) repeat-x;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:11px;
    width:100%;
    z-index:500;
    }

    Codice Originale

    .nav .select :hover .select_sub,
    .nav .current .show {
    display:block;
    position:absolute;
    width:750px;
    top:35px;
    background:url(back_0.gif);
    padding:0;
    z-index:100;
    left:0;
    text-align:center;
    }

    Codice Modificato

    .nav .select :hover .select_sub,
    .nav .current .show {
    display:block;
    position:absolute;
    width:100%;
    top:35px;
    background:url(back_0.gif);
    padding:0;
    z-index:100;
    left:0;
    text-align:center;
    }

    I ringraziamenti a tutti coloro che vorranno tentare una soluzione ovviamente sono anticipati.

    0
  • F
    User Newbie •

    Nessuno mi sà dare una dritta ? :crying:

    0
  • K
    Super User •

    Ciao F0x0n3 🙂

    Scusa per la latitanza.
    Testare e correggere errori su IE al momento mi è impossibile però almeno per Firefox ho FireBug che mi aiuta , vediamo di aiutarti.

    Ho un'idea a riguardo:
    Inserisci all'attributo "NAV" il parametro "margin:0 auto";.
    Ciò ti autocentrerà a schermo l'oggetto riferendosi al suo genitore.
    Questo cosa vuol dire? Che non hai bisogno di dare bordi, margini precisi o via dicendo ma con "auto" sul laterale ti si autocentrerà rispetto al suo contenitore.

    Avvolgi quindi "nav" con un div ulteriore e ci imposti questi attributi:

    [html]
    width:100%;
    float:left;
    background:url(pro_line_0.gif) repeat-x s top left";
    [/html]Questo farà in modo che per tutto il tuo "100%" di larghezza vi sarà il solito sfondo del menù nav mentre al centro vi sarà il menù vero e proprio (ti è inutile tenere a questo punto il background per nav 🙂 ).
    Ciao!

    0
  • F
    User Newbie •

    Inzanti tutto grazie 1000 😉

    ora provo ad implementare quanto mi dici e vediamo che succede.

    ti dò feedback 🙂

    0
  • F
    User Newbie •

    @karedas said:

    Ciao F0x0n3 🙂

    Scusa per la latitanza.
    Testare e correggere errori su IE al momento mi è impossibile però almeno per Firefox ho FireBug che mi aiuta , vediamo di aiutarti.

    Ho un'idea a riguardo:
    Inserisci all'attributo "NAV" il parametro "margin:0 auto";.
    Ciò ti autocentrerà a schermo l'oggetto riferendosi al suo genitore.
    Questo cosa vuol dire? Che non hai bisogno di dare bordi, margini precisi o via dicendo ma con "auto" sul laterale ti si autocentrerà rispetto al suo contenitore.

    Avvolgi quindi "nav" con un div ulteriore e ci imposti questi attributi:

    [html]
    width:100%;
    float:left;
    background:url(pro_line_0.gif) repeat-x s top left";
    [/html]Questo farà in modo che per tutto il tuo "100%" di larghezza vi sarà il solito sfondo del menù nav mentre al centro vi sarà il menù vero e proprio (ti è inutile tenere a questo punto il background per nav 🙂 ).
    Ciao!

    Ciao karedas,

    ho provato a fare quello che saggiamente mi avevi consigliato, ma purtroppo mi sono accorto solo testandolo quello che volevi dirmi...
    effettivametne è vero, facendo quello che mi hai consigliato, ho l'effetto 100% per quanto riguarda il primo livello di menù, ma purtroppo mi permane il problema al secondo livello, che rimane a dimnesione 750px senza porterlo portare al 100%. Su questo secondo livello, non posso giocare sul background, perchè anche riuscissi a posizionarli un immagine di background al 100%, avrei il problema dell'area attiva, che è quella che mi permette di mantenere aperto il secondo livello del menù ( ovvero, se non il secondo livello non è anche lui al 100% appena il mouse si sposta dal primo, questo si chiude).

    Spero di essermi fatto capire, altrimenti ci riprovo.

    Attendo tue
    Ciao e grazie.

    0
Effettua l'accesso per rispondere