Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Menu con i CSS

  1. #1

    Menu con i CSS

    Salve ragazzi,
    sto provando a fare un semplice menu disegnato con photoshop in puro CSS
    senza l'utilizzo di tabelle.
    In allegato vedete il file di immagine errato e quello che invece dovrebbe venire.
    Ho dei problemi però quando lo costruisco con il codice.

    In pratica ci sono degli spazi in alto ed in basso alle varie immagini
    che metto come sfondo dei div che contengono gli elementi del menu.
    Anche impostando a 0 i margini e i padding.

    Immagini allegate Immagini allegate
    lucasweb.it
    web design & development >>>

  2. #2
    credo si possa evitare di creare una img: freccia+filo+fondo, forse basta estrapolare la freccetta...


    cmq posta il codice, altrimenti è difficile aiutarti


    ciaux

  3. #3
    magari usa delle liste non ordinate (e non dei div) per fare i menu

  4. #4
    Ho modificato un po le cose ieri alle tre di notte più o meno.
    Va meglio ma ancora non ci siamo.

    Il codice:

    <style>
    /** MENU 3 ** sfondo sfumato **/
    ul.menu3 {
    width:200px;
    list-style:none; /* elimino i punti elenco */
    margin:0; padding:0; /* elimino i rientri delle liste */
    }
    ul.menu3 li a {
    display:block; /* il link occupa tutto lo spazio orizzontale */
    text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
    padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
    height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
    }
    ul.menu3 li {
    display:inline;
    background:url('images/menu_center.gif'); /*pre-load immagine*/
    }
    ul.menu3 li a:link, ul.menu3 li a:visited {
    background:#ccc;
    color: #009;
    background:#eee url('images/menu_center.gif') 100% 0 repeat-y;
    } /* colori per il link */
    ul.menu3 li a:hover, ul.menu3 li a:active {
    background:#eee url('images/menu_center.gif') 100% 0 repeat-y;
    color:#c00;
    } /* colori per l'effetto roll-over */

    #menu_top {
    background: url('images/menu_top.gif');
    background-repeat : no-repeat;
    height: 6px;
    }
    #menu_bottom {
    background: url('images/menu_bottom.gif');
    background-repeat : no-repeat;
    height: 6px;
    }

    #menu {
    width: 200px;
    background:#000;
    }
    </style>
    <div id="menu">
    <div id="menu_top"></div>
    <ul class="menu3">
    [*]Sezione Link 1
    [*]Sezione Link 2
    [*]Sezione Link 3
    [*]Sezione Link 4
    [*]Sezione Link 5
    [/list]
    <div id="menu_bottom"></div>
    </div>
    L'immagine dell'effetto che ottengo.
    Il nero che si vede è uno sfondo del div per rendermi conto dello spazio.
    Immagini allegate Immagini allegate
    lucasweb.it
    web design & development >>>

  5. #5
    innanzitutto metti ul, ul *{margin:0;padding:0}
    per rendere cross browser

  6. #6
    Assurdo.
    Su firefox va bene e su explorer non.

    Come mai ?
    lucasweb.it
    web design & development >>>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.