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

Pagine → 1 2 3 4 5

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

GitHub: https://github.com/GDRCD/GDRCD ↗
Discord: https://discord.gg/zh69CDUf3V ↗

Crash Bandicoot Zone ↗
Caos, libertà e risate: nel GDR ambientato nell’universo di Crash Bandicoot, ogni storia è possibile… e nulla è troppo folle!

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.

GitHub: https://github.com/GDRCD/GDRCD ↗
Discord: https://discord.gg/zh69CDUf3V ↗

World of Tanks ↗
Lanciati in epiche battaglie spalla a spalla con altri giocatori. Conquista la supremazia nel mondo dei Carri Armati!

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.

GitHub: https://github.com/GDRCD/GDRCD ↗
Discord: https://discord.gg/zh69CDUf3V ↗

CRSED: F.O.A.D. ↗
Brutale sparatutto MMO in cui vince l'ultimo giocatore che resta in vita! Il giocatore sarà accompagnato da armi realistiche e magie!

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.

GitHub: https://github.com/GDRCD/GDRCD ↗
Discord: https://discord.gg/zh69CDUf3V ↗

War Thunder ↗
Aviazione, veicoli corazzati e flotte militari della seconda guerra mondiale. Parteciperai a tutte le principali battaglie!

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.

GitHub: https://github.com/GDRCD/GDRCD ↗
Discord: https://discord.gg/zh69CDUf3V ↗