[RISOLTO][GDRCD 5.4.1] - Centrare icone in menù laterale sx

[RISOLTO][GDRCD 5.4.1] - Centrare icone in menù laterale sx postato il 30/05/2017 10:44:35 nel forum programmazione, open source e hosting e modificato da merovingio il 06/06/2017 11:05:30

Poco tempo fa ho chiesto aiuto per la sistemazione del menù laterale a sinistra con le icone disposte su unica riga.

Seguendo le istruzioni per creare un menù ulteriore (.menu2) e le indicazioni di Leoblacksoul ci sono riuscito.

Ora pongo questa richiesta: come centrare le icone nel div?
Ho letto un po' di materiale in giro sulle varie guide css, ma non ne sono venuto a capo.

Il CSs attuale è il seguente:

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
}

div.link_menu.menu2 a{
padding:2px;
text-align:center;
display: inline-block;
}

div.link_menu.menu2 a:hover{
background-color:trasparent;
color: #000;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu.menu2 a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu.menu2 a.sprite:hover {
background-position: 0 100%;
}

Ho provato ad inserire text-align:center; ma non ho ottenuto l'effetto voluto.

Al momento la cosa si presenta così:

Lato Admin (tutte le icone presenti)


Lato Player (manca l'icona dell'Admin)


Vi ringrazio dell'aiuto e auguro a tutti buon proseguimento.

Il Merovingio

30/05/2017 11:38:43 e modificato da blancks il 30/05/2017 11:39:05

Ad occhio e croce mi sembra che i tuoi tastini abbiano tutto il necessario per essere centrati, ovvero:

. display: inline-block
. dimensioni fisse

Quello che manca è dire al contenitore dei link, che suppongo essere il .menu2, di allineare i suoi contenuti al centro.

Quindi il suggerimento è di provare ad aggiungere la regola text-align:center; in div.link_menu.menu2

30/05/2017 11:52:50

Grazie Blancks per il tuo aiuto.
Ho fatto, ma non sortisce effetto.

Mi viene da pensare che allora il comando funzioni, ma ci sia altro che mi sposta il tutto.

Forse questa img può aiutare a capire?


Questo è il CSS completo del secondo menù (aggiornato con il text-align):

/*CSS SECONDO_MENU*/

select#gotomap{
display:block;
width:160px;
margin:0 auto 15px auto;
}

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
text-align:center;
}

div.link_menu.menu2 a{
padding:2px;
text-align:center;
display: inline-block;
}

div.link_menu.menu2 a:hover{
background-color:trasparent;
color: #000;
text-decoration:none;
-moz-border-radius:5px; /* Bordi arrotondati */
-webkit-border-radius:5px;
-khtml-border-radius: 5px;
border-radius:5px;
}

div.link_menu.menu2 a.sprite {
display: block;
width: 50px;
height: 50px;
background: no-repeat top left;
}

div.link_menu.menu2 a.sprite:hover {
background-position: 0 100%;
}

Sembra che il DIV sia spostato, o sbaglio?

30/05/2017 11:59:11

Di base mi aspettavo il div si allargasse fino a coprire lo spazio disponibile invece ha preso le dimensioni dei suoi contenuti.

Prova a giocare un po con la proprietà width e vedi se riesci ad estenderlo alla stessa larghezza della colonna.

30/05/2017 12:36:57

Dunque, inserendo width in div.link_menu.menu2 mi porta tutte le icone in verticale, anche aggiustando il valore.

Sembra più come se a questo div non si applicassero gli stessi attributi (spero di aver usato la parola corretta...) che si applicano agli altri div della colonna a sinistra:

div.pagina_info_location, div.msgs, div.menu, div.presenti, div.output {
margin: 5px auto;
padding: 5px;
width: 180px;
background-color: #000;
border: solid 1px #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

Empiricamente, nella mia ignoranza, ho provato ad inserire anche div.menu2 nell'elenco dei DIV, ovviamente senza ottenere l'effetto voluto.

Tutti gli altri DIV sono centrati nella colonna, questo invece no.
Se cambio margini e padding non mi stanno più su una riga.
Forse devo pensare a farle stare su due righe, se non risolvo.

30/05/2017 12:50:08 e modificato da blancks il 30/05/2017 12:53:44

merovingio ha scritto: Sembra più come se a questo div non si applicassero gli stessi attributi (spero di aver usato la parola corretta...) che si applicano agli altri div della colonna a sinistra

Perché sta seguendo le regole di div.link_menu.menu2 che sovrascrivono quelle di base tipo il padding.

In ogni caso nello screen che mi hai mostrato il div è a 182px di larghezza, ti direi di provare a settarlo più intorno ai 200.

Tieni aperto sempre lo strumento di ispezione così vedi col "bordino" rosso quando si allinea alla colonna.

A quel punto vediamo se le icone sono centrate o meno. In casi estremi, in cui vedi che nonostante l'aumento della larghezza il div non si allarga prova ad usare la regola !important, tipo:

width: 200px !important;

la quale serve a dare una certa priorità all'istruzione, ma te la consiglio solo come ultima risorsa.

30/05/2017 12:59:23

In realtà io la width non l'ho dichiarata.
Quella width se l'è presa in automatico.

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
text-align:center;
}

Se inserisco width, anche a 1px, le icone mi si presentano in verticale tutte spostate a sinistra.



Forse ho capito male io dove devo inserire il width?

30/05/2017 13:13:44

merovingio ha scritto: Forse ho capito male io dove devo inserire il width?

Pardon, sono stato criptico io.
Quando ti dicevo di giocare con la proprietà width ti chiedevo di inserirla in div.link_menu.menu2 e di provare ad allargare forzatamente il div, perché il suo contenuto dovrebbe già essere allineato ma se il div non ha almeno la larghezza della colonna di sinistra non riusciremo mai a notarlo.

30/05/2017 13:32:33

Figurati Blancks!
Grazie per l'aiuto, invece...

Allora, ecco il codice con il width settato a larghezza colonna:

div.link_menu.menu2 {
background-color:trasparent;
height:auto;
padding: 1px;
display: inline-block;
text-align:center;
width: 210px;
}

E questo è l'effetto ottenuto:



Mi sento un po' imbranato, a dire il vero.
Perchè mi sembra che la soluzione sia lì dietro l'angolo e sono troppo babbano per vederla.

30/05/2017 13:50:14 e modificato da blancks il 30/05/2017 13:50:46

Una possibile causa potrebbe essere il display: block; che hai in div.link_menu.menu2 a.sprite e ti suggerirei di provare a rimuoverlo.

Se non funziona, postami l'ispezione di uno dei tastini così andiamo meno alla cieca.

30/05/2017 14:14:22 e modificato da merovingio il 31/05/2017 12:11:03

Dunque, commentato il display:block; ma senza esiti:

div.link_menu.menu2 a.sprite {
/* display: block; */
width: 50px;
height: 50px;
background: no-repeat top left;
}

Posto i CSS Viewer che sono riuscito a recuperare (nel caso dimmi nello specifico quale ti devo inviare che lo preparo):