Allineare elenco da verticale a orrizontale

[massimo67]

Buongiorno a tutti è sempre un piacere ritornare su questo storico forum

Ho deciso di chiedere aiuto in quanto non capisco cosa sbaglio e sono ore che provo.

Vengo al dunque, ho inserito nel footer del sito dove testo i plugin di wordpress, un widget che crea un elenco di stati e serve per selezionare la lingua.

Come potete vedere https://default.webmsv.net/verifica/ in fondo c'è un elenco di stati.

Ho provato in mille modi ma non c'è verso di ottenere un allineamento orrizontale come questo Screenshot-stati1.jpg

ho provato con il comando display:inline e altre voci ma non riesco ad ottenere nulla.
chiedevo il vostro aiuto.

Grazie
Massimo

[fcaldera]

non vedo l'immagine che hai postato, ma hai provato togliendo i <br /> ?

[massimo67]

non posso togliere e aggiungere nulla di codice in quanto è un widget

ecco il link per l'immagine, dovrebbe vedersi bene : https://imgur.com/oi6QeK1

[KillerWorm]

Ciao e ben tornato.
Come consigliato da fcaldera, i br andrebbero tolti; se non puoi farlo da HTML potresti farlo da CSS applicando display:none. A quel punto tutti gli elementi si disporranno uno a fianco all'altro. Ti basterà allineare al centro il testo dell'intero contenitore e dare un po' di margine tra gli elementi <a>.

Puoi aggiungere una cosa del genere al tuo CSS personalizzato:

.transposh_flags {
    text-align: center;
}
.transposh_flags > br {
    display: none;
}
.transposh_flags > a {
    margin: 0 .5em;
}

Vedi se può andare.

[massimo67]

buongiorno e grazie per l'aiuto !

Funziona però manda a capo le parole, vedi https://default.webmsv.net/verifica/

[KillerWorm]

La questione si fa complicata. In quel caso le parole possono risultare "spezzate" per vari motivi, tra cui la mancanza di caratteri di interruzione tra gli elementi. Per poter gestire la conformazione del testo dentro gli elementi, in modo che dentro questi non risultino interruzioni, può essere necessario inserire degli spazi fisici tra gli elementi stessi. Si può aggiungere uno spazio attraverso lo pseudo elemento ::after

Prova in questo modo:

.transposh_flags {
    text-align: center;
}
.transposh_flags > a:first-child,
.transposh_flags > br + a,
.transposh_flags > br {
    display: none;
}
.transposh_flags > a {
    white-space: nowrap;
    margin: 0 .8em;
}
.transposh_flags > a::after {
    content: ' ';
    white-space: normal;
}

.
Ho applicato display:none anche per quegli elementi <a> che non contengono testo, cioè i primi di ciascuna coppia di link - per ciascuna lingua infatti ci sono due link ma il primo sinceramente non so a cosa serva quindi lo nascondo, altrimenti creerebbe degli ingombri superflui nel testo.

Per dare ulteriore distanza tra gli elementi <a> ho usato il margin (più o meno come nel precedente codice). Avrei potuto estendere in qualche modo il carattere spazio applicato con ::after ma sarebbe sensibile al click, quindi è preferibile distanziare gli elementi usando il margin.

Fai sapere se può andare.

[massimo67]

Ma certo che funziona !!!

Tu usi un ragionamento logico per ogni passaggio e questo denota una conoscenza approfondita di Html e CSS.

Il CSS anche se usi un costruttore di pagine serve sempre, in quanto ci sono sempre degli aggiustamenti da fare.

Tenuto conto che sono ad un livello medio, ho la necessità di crescere in fretta, come posso arrivare al tuo livello in circa un anno.
Cosa mi consigli ? Libri, corsi.

grazie

[KillerWorm]

Bene

[OT]

Più che "approfondita" è una conoscenza "sommaria" ma tutto sommato abbastanza estesa, dovuta a qualche decennio di esperienze. Questo mi permette poi di eseguire delle ricerche in modo da approfondire ciò che mi serve di volta in volta.

Tenuto conto che sono ad un livello medio, ho la necessità di crescere in fretta, come posso arrivare al tuo livello in circa un anno.
Cosa mi consigli ? Libri, corsi.

Tieni conto che tecnologie e relativi standard sono in continua evoluzione, perciò in genere può essere sufficiente avere delle conoscenze di livello medio ma ciò che conta veramente è saper cercare in modo adeguato quello che ti serve per risolvere le diverse situazioni che incontri strada facendo.

Sinceramente non saprei cosa consigliarti per poter acquisire determinate nozioni in breve tempo; penso che l'esperienza sia comunque fondamentale. Posso giusto dirti che ciò che ho appreso, e che continuo ad apprendere, l'ho sempre trovato cercando sul web, e cercando di capire quali fossero i termini giusti per impostare al meglio le ricerche... ma questo è ciò che faccio io.

Se sei interessato ad approfondire con lo studio, posso consigliarti di dare intanto uno sguardo ai link utili CSS (discussione in evidenza) dove puoi trovare molti riferimenti a risorse e materiale per lo sviluppo di CSS e HTML.

[/OT]

[massimo67]

ti ringrazio per i link. questa notte alle 2 ho iniziato a leggerli.

prima di concludere il post , ce una cosa che non ho trovato .... la classe

 transposh_flags

è usata nell' header e nel footer.
per poter applicare il codice css solo nel footer e non dell'header come posso far in modo di distinguerle ?

puoi darmi l'input cioè il comando da usare ...vediamo se ci arrivo poi da solo.

[KillerWorm]

buona lettura.

Per costruire il selettore ho usato giusto quella classe che è una tra quelle presenti nel contenitore principale di quegli elementi <a>.
Per distinguere meglio gli elementi da selezionare nell'intero documento puoi usare degli ulteriori selettori, magari aggiungendoli a quelli già considerati per poterne ottenere di più specifici.

In genere puoi usare gli id che, essendo univoci all'interno di uno stesso documento, ti permettono di "identificare" esattamente un determinato elemento sulla pagina. Nella tua pagina test vedo che tutto l'ambaradan di quei link-lingua sta dentro un contenitore che possiede un id. Ogni selettore che ho utilizzato puoi ricostruirlo aggiungendo quell'id come partenza... magari usare poi un combinatore discendente per permettergli di "arrivare" opportunamente agli elementi da selezionare.

Fai qualche prova