UL non in linea

[RiccardoVaso]

Ciao a tutti! Premetto che sono un principiante in questo campo, e sto cercando di imparare!
Sto cercando di realizzare una struttura come quella in foto qui allegata, ma non riesco a metterla in linea.

In pratica, ho inserito un ul, e in ogni li ho inserito l'immagine e la scritta (all'interno di un h3).

Quando poi nel CSS imposto il display in inline, gli li non si spostano sulla stessa riga per colpa dell'h3.

Come posso fare? (Scusate se sono stato poco chiaro ma sono davvero ancora all'inizio)

esempio.gif

[Mich_]

Per essere piu` chiaro dovresti allegare un po' di codice ...

Se capisco bene hai inserito un tag <h3> all'interno di ciascun <li>.
Non credo che questo sia corretto da un punto di vista semantico.

Comunque i <li> sono oggetti di tipo blocco, per cui di default vanno a capo.
Puoi metterli sulla stessa linea, mediante l'attributo float:left, oppure con display:inline-block. Invece e` sbagliato dare l'attributo display:inline, perche` poi non potresti piu` inserire due oggetti uno sopra l'altro al suo interno.

Purtroppo sono errori di sostanza, che i browser cercano di correggere, ma per fare cio` interpretano in modo aleatorio (e ciascun browser in modo diverso).

[RiccardoVaso]

Per essere piu` chiaro dovresti allegare un po' di codice ...

Se capisco bene hai inserito un tag <h3> all'interno di ciascun <li>.
Non credo che questo sia corretto da un punto di vista semantico.

Comunque i <li> sono oggetti di tipo blocco, per cui di default vanno a capo.
Puoi metterli sulla stessa linea, mediante l'attributo float:left, oppure con display:inline-block. Invece e` sbagliato dare l'attributo display:inline, perche` poi non potresti piu` inserire due oggetti uno sopra l'altro al suo interno.

Purtroppo sono errori di sostanza, che i browser cercano di correggere, ma per fare cio` interpretano in modo aleatorio (e ciascun browser in modo diverso).

Ciao Mich_, grazie, sono riuscito a risolvere proprio con inline-block!

L'ho inserito nel foglio CSS, negli li. Dopodichè ho centrato l'ul con text-align:center, ed infine per fare lo spazio tra le icone ho inserito del margine sempre negli li (equivalente tra destra e sinistra). Infine ho modificato gli h3 nel foglio CSS.

Dici che sbaglio utilizzando il tag h3 negli li? Come potrei risolvere?

[Mich_]

Dici che sbaglio utilizzando il tag h3 negli li? Come potrei risolvere?

Non so se sbagli: non ho gli elementi sufficienti per dirlo.
Pero` ho l'impressione che sia un errore semantico, cioe` fai fare ai tag un compito diverso da quello per cui sono stati pensati.

Un titolo (<h3>) all'interno di una lista e` una cosa che ha senso solo se ci sono delle sottoliste che dipendono da quel titolo, e non mi pare sia il tuo caso.

Probabilmente quello che ti serve in quel punto e` un <p> o uno <span>.
Poi immagino che dovrai definire le caratteristiche del testo.


PERCHE` NON USARE TAG NON-SEMANTICI
I browser conoscono la semantica, e tentano di interpretare i tag in base al loro significato (= dare caratteristiche di visualizzazione opportune al contenuto).
D'altronde tu non puoi conoscere tutti i browser in circolazione. Tieni presente che ci sono browser non-visuali, ci sono browser specifici per particolari patologie ecc. E ciascuno cerca di mostrare le cose secondo la semantica, non secondo cosa aveva in testa il programmatore (e che ha realizzato con tag non corretti).

[RiccardoVaso]

Ah ho capito! Era una cosa che non sapevo, allora sostituisco con <p>.

Grazie mille!

[RiccardoVaso]

Scusami ma mi sono bloccato nuovamente: ho creato un nuovo ul (che ti mostro nell'immagine), e ho applicato il display:inline-block agli li, solo che non sono allineati verticalmente. Ti copio incollo il codice CSS:

.capacita {
text-align: center;

}

.capacita li {

width: 210px;
display: inline-block;
background-color: red;
margin: 0 30px 100px 30px;

}

.capacita li h3 {

text-transform:uppercase;
margin-top: 24px;
font-size: 24px;

}

.capacita li p {

margin-top: 26px;
text-transform: none;
font-size: 20px;
line-height: 26px;

}

Come posso allinearli verticalmente?

esempio2.gif

[Mich_]

Anzitutto quando posti il codice usa i tag opportuni (includi il codice tra [ code ] e [ /code ] - senza gli spazi) altrimenti si perde la formattazione.

Inoltre il codice CSS fa riferimento ad un codice HTML che io non vedo, per cui potrei sbagliare qualcosa.
Suppongo pero` che il tuo HTML sia:

 
<ul class="capacita">
  <li>
    <img ... />
    <h3>titolo</h3>
    <p>   testo ... </p>
  </li>
   ... altri  uguali ... 


</ul>

Il text-align non ha senso in quel punto: a parte che serve per centrare oggetti di tipo inline (e i tuoi sono di tipo inline-block), ma centra solo in orizzontale.
Eventualmetne potrebbe servire il v-align, ma non ricordo se gli oggetti implicati rispondono a tale attributo (in alternativa a quanto qui sotto).

Per allineare in alto ti basta poi dare top:0 (o un valore opportuno), eventualmetne associato anche ad un margin-top.
Invece per allineare al centro devi poi agire con il top:50% e margin-top negativo quanto meta` altezza del blocco interno: trovi i dettagli tra i "link utili" (al momento non ricordo esattamente). Potrebbe non essere possibile allineare verticalmente oggetti inline-block; in tal caso devi cambiare tipo, e cambiare quindi anche altre cose.

[RiccardoVaso]

vertical-align funzionante! Sì giusto, scusami per il codice HTML mancato e la mancanza dei tag.

Grazie mille nuovamente!