Ciao a tutti!
Ho ricavato il mio tema utilizzando come "base" il tema bluebreeze.
Ho un problema con l'allineamento verticale delle immagini a lato delle liste (menu, in particolare); in firefox l'immagine (bullet) e il testo del menu sono perfettamente allineati, mentre in ie6 l'immagine del pallino e o della freccia si trovano leggermente più in alto del testo corrispondente. Ho visto che questo problema, in modo più o meno evidente, su tutti i siti drupal che utilizzano questi bullet grafici..
Come potrei fare per risolvere il problema?
Ho provato anche a creare dei bullet con la stessa dimensione in pixel del testo della voce di menu, ma il problema rimane.
Ho provato a modificare le proprietà css dell'elemento "ul.menu li", settando il "list-style" a "none" e impostando un'immagine di background (più facilmente posizionabile); l'immagine, però, giustamente, non può essere posizionata fuori dai "confini" dell'elemento "li" medesimo, rendendo impossibile pertanto la costruzione di una lista con i bullet posizione "outside".
Grazie! :-)
Allineamento verticale delle immagini nei menu e negli elenchi
Lun, 19/11/2007 - 09:48
#1
Allineamento verticale delle immagini nei menu e negli elenchi
Ho risolto il problema utilizzando le immagini in background, eliminando le impostazioni list-style ed impostando opportunamente i margini, l'indentazione del testo e il posizionamento del background stesso.
Di seguito posto il codice usato, per eventuali utilizzi da parte di altri membri della comunità drupal (partendo dal presupposto che il tema base di riferimento per questo codice è "bluebreeze"):
/* lists, menu */ul, ul.menu, .item-list ul {
margin: 0 0 .5em 0;
padding: 0 0 0 0.2em;
list-style-image:none;
list-style-type:none;
list-style-position:none;
}
ul li, ul.menu li, .item-list ul li {
padding: 0px 0px 0px 0px;
list-style-image:none;
list-style-type:none;
list-style-position:none;
background: transparent url(images/menu-leaf.gif) no-repeat scroll 0pt 4px;
margin: 3px 0px 0px 0px;
text-indent:15px;
line-height: 1.3em;
margin-left:0px;
}
ul.menu li {
font-size: 12px;
}
ul.menu li a {
font-weight: bold;
}
ul li.expanded, ul.menu li.expanded, .item-list ul li.expanded {
list-style-image:none;
list-style-type:none;
list-style-position:none;
background: transparent url(images/menu-expanded.gif) no-repeat scroll 0pt 4px;
margin: 3px 0px 0px 0px;
text-indent:15px;
line-height: 1.3em;
margin-left:0px;
}
ul li.collapsed, ul.menu li.collapsed, .item-list ul li.collapsed {
list-style-image:none;
list-style-type:none;
list-style-position:none;
background: transparent url(images/menu-collapsed.gif) no-repeat scroll 0pt 4px;
margin: 3px 0px 0px 0px;
text-indent:15px;
line-height: 1.3em;
margin-left:0px;
}
ul.menu li ul li {
font-size: 11px;
}
ul.menu li ul li ul li{
font-size: 11px;
font-style: italic;
}
ul.menu li ul li ul li a {
font-weight: normal;
}
ul.menu li ul li ul li {
line-height: 1.6em;
}
Si, questa è una caratteristica del tema che porta molte diversità (di display) tra browser differenti. Avevo usato la stessa soluzione (letta su Pro CSS Development) per un tema che avevo sviluppato utilizzando Bluebreeze.
La cosa migliore sarebbe chiedere allo sviluppatore del tema di integrare quella modifica nel tema originale (ma credo che dovrebbe essere una major-version successiva, in quanto potrebbe rompere temi pre-esistenti).
Ciao!