Topic: Allineamento del testo contenuto in una label

[fuocofatuo]

Nel realizzare la mia estensione ho creato una toolbar un po' più spessa del previsto; il testo dei pulsanti si centra perfettamente, ma le label tengono quanto presente nel loro campo value in alto a sinistra. Come posso cambiare l'allinemento di questo testo? Che classi sono definite per le label?

Scusate se sono domande piuttosto banali, ma ci sto perdendo un po' troppo tempo...

[flod]

Hai già provato a dare un'occhiata ai documenti presenti su www.xulplanet.com ?
Cosa intendi con "Che classi sono definite per le label?"

http://www.xulplanet.com/references/elemref/ref_label.html

[klades]

Non potresti in qualche modo riportare il codice almeno di uno di questi pulsanti e mettere uno screenshot?

[fuocofatuo]

Grazie mille per l'interessamento. Cercherò di spiegarmi meglio a parole, visto che non ho idea di come mettere in linea l'immagine...
Ho definito un'overlay con cui ho aggiunto una barra degli strumenti. In questa barra, sono posizionati alcuni pulsanti e alcune etichette, che permetteranno di visualizzare informazioni inerenti allo scopo dell'espansione. Il problema è che il testo delle etichette (definito in "value") è posizionato in alto e a sinistra rispetto all'etichetta stessa, mentre io vorrei che occupasse la regione centrale delle labels.

Ecco qui la parte del file xul che definisce la barra:

Codice: [Seleziona]

  <toolbox id="navigator-toolbox">
<toolbar id="cob-bar"
class="chromeclass-toolbar"
toolbarname="CoB Toolbar"
user="Macaco"
part="Gorilla"
path="/home/fuocofatuo/CoB/"
persist="user part path">
<vbox id="cob-vbox">
<hbox>
<toolbarbutton id="cob-cobbar-stateIndicator"
      tooltiptext="&actDisact;"
      cobState="disabled"
      oncommand="actDisactCob();"/>
***************<label id="cob-cobbar-partName"
      tooltiptext="&partName;"
      value="Loading..."/>          *********************
<toolbarbutton id="cob-cobbar-changePartButton"
      tooltiptext="&set.part.description;"
      oncommand="askForPartName();"/>
***************<label id="cob-cobbar-partCurrentPageName"
      tooltiptext="&currentPage;"
      value="http://"/>                  **********************
<toolbarbutton id="cob-cobbar-loadPartCurrentPageButton"
      tooltiptext="&loadCurrentPage;"
      oncommand="openPartCurrentPage();"/>
<toolbarbutton id="cob-cobbar-loadSignaledPageButton"
      tooltiptext="&loadSignaledPage;"
      thereAreNewSignalledPage="false"
      oncommand="openNextPartSignalledPage();"/>
<toolbarbutton id="cob-cobbar-signalPageButton"
      tooltiptext="&signalPage;"
      label="&signal;"
      oncommand="addUserSignalledPage();"/>
</hbox>
<hbox>
<label id="cob-cobbar-commentLabel"
      value="&comment;"/>
<label id="cob-cobbar-comment"
      tooltiptext="&commentMade;"
      value=""/>
</hbox>
</vbox>
</toolbar>
</toolbox>

Questo è invece il foglio di stile. A dire il vero ho appena concluso di scrivere gli script, perciò non ho avuto molto tempo per curare adeguatamente la parte estetica. Tuttavia non sono stato in grado do trovare i comandi adeguati per centrare i testi delle etichette (qui non vedete niente, ma ne ho provati molti...).

Codice: [Seleziona]

#cob-cobbar-stateIndicator[cobState="active"] {
list-style-image: url("chrome://cob/skin/cob-cobbar-stateIndicator-active.png"); }

#cob-cobbar-stateIndicator[cobState="disabled"] {
list-style-image: url("chrome://cob/skin/cob-cobbar-stateIndicator-disabled.png"); }

#cob-cobbar-stateIndicator[cobState="partecDisabled"] {
list-style-image: url("chrome://cob/skin/cob-cobbar-stateIndicator-partDisabled.png"); }

**************    #cob-cobbar-partName { width: 100px; -moz-box-flex: 20; vertical-align: middle !important; }    **********************

#cob-cobbar-changePartButton {
list-style-image: url("chrome://cob/skin/cob-cobbar-changePartButton.gif"); }

*************   #cob-cobbar-partCurrentPageName { -moz-box-flex: 300; vertical-align: center !important; }        *********************

#cob-cobbar-loadPartCurrentPageButton {
list-style-image: url("chrome://cob/skin/cob-cobbar-loadPartCurrentPageButton.gif"); }

#cob-cobbar-loadSignaledPageButton[disabled="true"] {
list-style-image: url("chrome://cob/skin/cob-cobbar-loadSignaledPageButton.gif"); }

#cob-cobbar-loadSignaledPageButton[disabled="false"][thereAreNewSignalledPage="true"] {
list-style-image: url("chrome://cob/skin/cob-cobbar-loadSignaledPageButton.gif"); }

#cob-cobbar-loadSignaledPageButton[disabled="false"][thereAreNewSignalledPage="true"] {
list-style-image: url("chrome://cob/skin/cob-cobbar-loadSignaledPageButton-active.gif"); }

#cob-cobbar-signalPageButton {
list-style-image: url("chrome://cob/skin/cob-cobbar-signalPageButton.gif"); }

#cob-cobbar-stateIndicator, #cob-cobbar-changePartecipantButton, #cob-cobbar-loadPartecsVisitedPageButton, #cob-cobbar-loadSignaledPageButton, #cob-cobbar-signalPageButton {padding-left: 5px !important; padding-right: 5px !important; margin-left: 3px !important; margin-right: 3px !important; }

#cob-vbox { -moz-box-flex:300 !important }

#cob-cobbar-comment { -moz-box-flex: 300; vertical-align: center !important; }


Se avete consigli o precisazioni su qualsiasi cosa, sono assolutamente ben accetti. In particolare, aspetto una qualsiasi dritta su come rendere la barra più gradevole...

[iacchi]

l'immagine caricala qui: www.imageshack.us

[fuocofatuo]

Ottimo, eccola qui allora..

Ogni pulsante occupa grossomodo lo spazio relativo all'icona, tranne l'ultimo che include anche la scritta "Segnala". Il resto dello spazio è occupato da 3 label: la prima è quella relativa a "Pippo", la seconda è quella flessibile che contiene il testo "http://" mentre l'ultima è quella in basso, che conterrà dei commenti.
Io vorrei che Pippo fosse centrato orizzontalmente e verticalmente, in grassetto e con un carattere un po' più grande; inoltre vorrei che la seconda fosse centrata solo verticalmente. Finora non ho ancora visto che comandi usare per applicare il grassetto e l'aumento del font, ma ho provato in vari modi a centrare le scrtte...

[klades]

Per la centratura prova a usare il padding nello style della label.

[fuocofatuo]

Mi sembra un po' troppo spartana come soluzione... a questo punto mi conviene quasi definirli come pulsanti e metterli costantemente disabilitati... ma anche questo non mi piace per niente.

[fuocofatuo]

Non riesco nè a impostare l'allineamento (ho provato anche con -moz-box-align, che mi sembra il parametro più giusto su cui operare), nè un bordo attorno ai bottoni veri e propri... non è che per caso sia definito uno stile di livello più alto con !important, e che perciò non possa sovrascriverlo?

Sarebbe parecchio noioso..