allinemanto dei link aventi background-image

**egomorrin** · 25-02-2008, 19:10

Buongiorno a tutti.
Ho un problema che mi fa dannare:
ho un div, largo al 100% con dentro dei link allineati center e affiancati (un semplice menu orizzontale).

In IE tutto bene mentre in mozilla li allinea al centro solo se sono senza background-image .

Quando invece inserisco il background-image a tali link, questi si allineano irrimediabilmente a sinistra senza possibilità di centrarli.

Se invece imposto il valore display: inline; si allineano al centro ma non rispettano più i valori width e height , il link si stringe intorno al testo che lo contiene e l'immagine di sfondo chiaramente non è più visibile (che è fissa a 106x29 pixel)...

Come posso fare?
Grazie per il vs. aiuto.

Allego il codice:

-------------------------------------------------------------------------
NELL'HTML:

<body>
<div class="cMainHeader"></div>
<div class="cMainMenuBar">
<div class="cMainMenuButtonContainer">
PUNTI VENDITA
PROMOZIONI
FILIALI
CONTATTI
TROVACI
</div>
</div>
</body>

-------------------------------------------------------------------------
NEL CSS:

div.cMainMenuBar
{
width: 100%; height: 29px;
background-image: url("./images/layMenuBkg.jpg"); background-position:center center; background-repeat: repeat-x;
text-align: center;
}

div.cMainMenuButtonContainer
{
overflow: visible; margin: auto; height: 29px; border: 1px solid red; border-collapse:collapse;
text-align: center;
}

div.cMainMenuBar div.cMainMenuButtonContainer a.cMainMenuItemUnselected
{
width: 106px; height: 29px; overflow: hidden;
background-image: url("./images/layMenuItemUnselected.jpg");
background-position:center center; background-repeat: no-repeat;
font-weight: bold; color: rgb(0,127,176); text-decoration: none;
display: inline-table;
}

div.cMainMenuBar div.cMainMenuButtonContainer a.cMainMenuItemUnselected:hover
{
background-image: url("./images/layMenuItemSelected.jpg");
}

div.cMainMenuBar div.cMainMenuButtonContainer a.cMainMenuItemSelected
{
width: 106px; height: 29px; overflow: hidden;
background-image: url("./images/layMenuItemSelected.jpg");
background-position:center center; background-repeat: no-repeat;
font-weight: bold; color: white; text-decoration: none;
display: compact;
}
-------------------------------------------------------------------------

Grazie ancora!

**fcaldera** · 25-02-2008, 19:24

un menu orizzontale va gestito come lista non ordinata

codice:

<ul>[*]PUNTI VENDITA[*]PROMOZIONI[*]FILIALI[*]CONTATTI[*]TROVACI[/list]


ul { height: auto; overflow: hidden; }
ul li {
    width      : 106px; 
    height     : 29px; 
    float       : left;
    display     : inline;
    background  : url("./images/layMenuItemUnselected.jpg") center center no-repeat;
}

ul li.selected {
    background  : url("./images/layMenuItemSelected.jpg") center center no-repeat;
}

ul li a {
    font-weight  : bold; 
    float            : left;
    display         : inline;
    color           : rgb(0,127,176); 
    text-decoration: none;
}

guarda se questo approccio ti semplifica il problema

**egomorrin** · 26-02-2008, 11:15

In realtà prima era così come me lo hai descritto tu.

Poi ho voluto semplificarlo, avevo paura di aver inserito qualche proprietà che ereditata causava il problema.

In ogni caso, l'approccio da te indicato non mi ha permesso di risolvere il problema. Il comportamento dei link "a href" è rimasto uguale: nel momento cui, nel css, assegno un backgrond-image alla classe assegnata al link, quest'ultimo non si allinea più al centro ma solo a sinistra!

Sto impazzendo con questa cosa e vi ringrazio per l'aiuto che spero arrivi presto.

**egomorrin** · 26-02-2008, 16:37

ciao fcaldera ascolta ho fatto come dicevi tu:

codice:

    
    <div class="cMainMenuBar">
      <ul>[*]PUNTI VENDITA[*]PROMOZIONI[*]FILIALI[*]CONTATTI[*]TROVACI[/list]
    </div>

Il problema è che non riesco adl allineare il menu orizzontale in centro al div cMainMenuBar...

Ecco il css

codice:

div.cMainMenuBar
{
  width: 100%; height: 29px;
  background-image: url("./images/layMenuBkg.jpg"); background-position:center center; background-repeat: repeat-x;
  text-align: center;
}

div.cMainMenuBar ul
{
  width: auto; overflow: hidden; margin: 0; padding: 0; border: 0;
}

div.cMainMenuBar ul li
{
  width: 106px; height: 29px; float: left; display: inline;
}

div.cMainMenuBar ul li a
{
  font-weight: bold; float: left; display: inline; color: rgb(0,127,176); text-decoration: none;
  width: 106px; height: 29px;
  background: url("./images/layMenuItemUnselected.jpg") center center no-repeat;
}
div.cMainMenuBar ul li a:hover
{
  background: url("./images/layMenuItemSelected.jpg") center center no-repeat;
}

Grazie per il tuo aiuto ho proprio bisogno di risolvere questo problema che ormai mi ha fatto perdere ore.

**fcaldera** · 26-02-2008, 16:48

Originariamente inviato da egomorrin
Il problema è che non riesco adl allineare il menu orizzontale in centro al div cMainMenuBar...

ah ok. Devi centrare il menu orizzontale rispetto al contenitore dunque?

io utilizzo questa marcatura:

codice:

<div style="width: 100%; text-align: center;">
    <ins class="centeredmenu"><ul class="plain">[*]link 1
	[*]link 2 wider
	[*]link 3
	[*]link 4 of this menu[/list]</ins>
</div>


/*** css ***/

/**
 * List-item float-centered of not defined width
 * Last rev. 2007.11.20 18:28
 * 
 * (note: container block must define a width and text-align: center;)
 */

.plain {
    list-style-type	: none;
    margin		: 0;
    padding		: 0;
}

.centeredmenu {
    clear		 : both; 
    text-decoration     : none;
    *display		: inline-block;	
    overflow		: hidden;
}

.centeredmenu ul {
    display		: table;
    *float		: left;
    margin		: 0 auto;
    white-space	       : nowrap;
}

.centeredmenu li {
    display	: table-cell;
    float	: left;
}

.centeredmenu a {
    *float	: left;
}

provala così com'è e guarda se era ciò che ti serviva

**egomorrin** · 26-02-2008, 17:19

Grazie!
Ora il menu è centrato ma ho questo problema:

IE: Tutto ok;
MOZILLA: Il bordo dei link si "STRINGE" attorno al testo nascondendo quindi l'immagine di sfondo del link stesso, come se ignorasse completamente il WIDTH e il HEIGHT che gli sono stati assegnati...

In un modo o in un altro riesco ad allineare gli oggetti ma il vero problema che ho è proprio questo. Inoltre il comportamento è strano nel senso che se metto "float: left;" non ha più il problema delle dimensioni (nel senso che il link prende poi le dimensioni assegnate da WIDTH e il HEIGHT) ma chiaramente se ne va a sinistra mentre dovrebbe stare in mezzo...

Io per assicurarmi di non vedere male o confondermi ho assegnato un border solid di 1 px di colore diverso per i vari elementi in modo da vedere bene le loro dimensioni e come si comportano. Effettivamente, sia il "[*]" che l'"<a href>" in esso contenuto si stringono al minimo possibile "intorno" al testo...

Come faccio a risolvere questo problema?

Grazie ancora.

**fcaldera** · 26-02-2008, 18:24

non puoi semplicemente assegnare un padding ai list-item

es.

codice:

        .centeredmenu li {
            padding     : 0 10px 0 30px;
            border      : 1px solid #767676;
        }

e poi assegnare l'immagine di sfondo ai list-item?

**egomorrin** · 27-02-2008, 17:09

L'immagine deve cambiare con l'hover sul link quindi non so se riesco ad assegnarla diretammente all'elemento di lista...

Ho tentato ancora in questi giorni ma niente da fare, il bordo del link si "stringe intorno al testo" senza mantenere width e heigth assegnati al tag "a" tramite classe css..

Non ho trovato nessun modo. Si risolve il problema solo se imposto float a left, questo però sposta il menu che invece se ne deve stare allineato al centro... non so come fare...

Grazie.

**homezappa** · 27-02-2008, 17:16

Dai un'occhiata a quest'articolo in home page di html.it:
http://css.html.it/articoli/leggi/25...-css-e-jquery/

Per me, fa al caso tuo!

HTH
Zappa

Discussione: allinemanto dei link aventi background-image

Strumenti discussione

Ricerca discussione

Visualizza

allinemanto dei link aventi background-image

Permessi di invio