Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Problema nelle liste <ul>: gestione dello sfondo

    Ciao a tutti!
    È il mio primo post su questo forum, spero di riuscire a essere chiaro....

    Dunque: mi sono imbattuto in un problema di gestione dello sfondo in un menu di navigazione verticale, a larghezza fissa, contenuto all'interno di un <div> liquido.

    Questo menu non è altro che una semplice lista <ul> trattata come elemento blocco, a cui sono applicati i seguenti marcatori (tralascio del tutto i font che per ora non centrano):

    codice:
    /* STILE PER <UL> */
    ul#menu {
    padding:0; margin:0;
    display:block;
    position:absolute; top:0; left:0;
    list-style:none;
    width:160px; 
    text-align:left;
    background:white url(tubo.gif) top left repeat-y;
    }
    
    /* STILE PER <LI> */
    ul#menu li { list-style-image: url(pallino.gif); }
    Lo sfondo è un semplice pattern (w: 15px - h: 1px) che, ripetendosi verticalmente, genera un "tubo" che percorre il menu, sul lato sinistro, incrociandosi ai pallini che costituiscono i "bullet" del menu stesso.

    PRIMO PROBLEMA
    Per non so quale ragione, l'intero <ul> veniva spostato a sinistra, così che i pallini-bullet fuoriuscissero dal <div> contenitore, in modo da allineare le voci del menu (anziché i pallini) all'effettivo margine sinistro del <div>.
    Ho rimediato con ul#menu {margin-left:23px}, questo ha centrato i pallini rispetto al tubo, ma ha generato il...

    SECONDO PROBLEMA
    A questo punto, se centro i bullet spostando <ul> più a destra, anche il tubo (che è sfondo di <ul> viene spostato a destra; così, tubo.gif non si appoggia più al lato sinistro assoluto del <ul>, ma dal punto da cui partono i[*]; in sostanza, il tubo viene allineato alle voci del menu, non ai pallini-bullet come invece dovrebbe.

    Aiuto!!!! Che fare??
    «Prendo rifugio nel grande BOH»

  2. #2
    Beh... mi rispondo da solo

    Dopo una serie di esperimenti ho risolto cancellando il margin-left:23px (così da mettere lo sfondo al posto giusto, spostando il bullet+menu a sx) e sostituendolo con un bel padding-left:23px. Questo ha traslato bullet+menu, mantenendo intatta la posizione del pattern di sfondo.
    Il problema è dunque risolto, d'accordo, ma vorrei capire quale meccanismo sta dietro a questo padding-left:23px...

    Insomma: perché mai <ul>, che ha position:absolute, si è spostato di 23px al di fuori (a sinistra) del <div> che la contiene???

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.