Problemino stili css (credo)

[69GiGi96]

Salve ragazzi, sto provando a sviluppare un sito web ma ho qualche problemino..
Non conoscendo html e css mi appoggio ad un hoster gratuito e parto da un template già pronto.

Dopo aver letto un pò qua, un pò la, ho aggiunto un paio di immagini, attivato delle animazioni, cambiato logo, sistemato la barra di navigazione a mio piacimento..

A questo punto mi sono già bloccato. (forse è anche una cosa stupida)
Di default ci sono quattro colonne/rettangolini da 220x212 ognuno di essi con icona, titolo, testo.
A me non piace e vorrei avere:
-un rettangolo piu grande da 440x212
-un rettangolo da 220x212
-un quarto rettangolo da 220x212 con immagine e link "incorporato"

Se per l'immagine e il rettangolo piccolo non ho problemi, per quello grande le cose vanno un pò diversamente..

Di default dal foglio di stile css veniva usato "box-sections" di cui riporto il codice..

Spoiler

.box-sections { width:220px; line-height: 1.81em; margin:2em 13px 0 0; float:left; }
.box-sections h3, .box-sections h2, .box-sections-border h3, .box-sections-border h2 { margin-bottom:20px !important; }
.box-sections h2 { font-size:2em; }
.box-sections h3 { font-size:1.8em; }
.box-sections h1, .box-sections h2, .box-sections h3, .box-sections h4, .box-sections h5, .box-sections h6 { margin-top:0; clear:none !important; }
.box-sections h4, .box-sections h5, .box-sections h6 { font-size:1.5em; }
.box-sections h6, .box-sections-border h6 { margin:5px 0 22px !important; font-family: "Yanone Kaffeesatz",serif; }
.box-sections p, .box-sections-border p {
    clear: both;
    height: 151px;
    width: 220px;

Allora, più o meno intelligentemente, con un copia incolla ne ho creato uno "box-sections1" impostando i due width su 440 per dare in effetti le dimensioni e indicare la "distanza" a cui deve posizionarsi il prossimo rettangolo (almeno è ciò che ho capito)

Però ho il problema in foto: il titolo scende di una riga..
Mi sentirei di escludere il codice html in quanto è identico e se al posto di "box-sections1" uso "box-sections" il titolo torna al suo posto..
Ho sbagliato facendo copia incolla? O il problema potrebbe essere altrove?

 

[SyncroIT]

Senza che mi metta a leggere tutto, da quel che ho capito devi mettere il vertical-align: top al contenuto di tutti i riquadri ;)

 

[69GiGi96]

Mmm non credo di aver recepito il messaggio.. O magari non mi sono espresso bene.

Il secondo rettangolo (dove c è l icona del pennello) mi va bene cosi.. Non capisco perchè dovrei cambiarlo
In ogni caso.. quest valign o vertical align dove dovrei usarlo? Nel css on nel codice html?
Al momento il codice html del primo rettangolo è

 <div class="box-sections1">
                            <img src="images/icons/set_icons/blackcard.png" alt="Advertising" class="icon" />
                            <h4><span style="line-height:32px">Advertising</span></h4>
<p> bla bla bla </p>

 

[SyncroIT]

Mmm non credo di aver recepito il messaggio.. O magari non mi sono espresso bene.

Il secondo rettangolo (dove c è l icona del pennello) mi va bene cosi.. Non capisco perchè dovrei cambiarlo 
In ogni caso.. quest valign o vertical align dove dovrei usarlo? Nel css on nel codice html?
Al momento il codice html del primo rettangolo è

 <div class="box-sections1">
                            <img src="http://www.tomshw.it/forum/images/icons/set_icons/blackcard.png" alt="Advertising" class="icon" />
                            <h4><span style="line-height:32px">Advertising</span></h4>
<p> bla bla bla </p>

Nei CSS:
.box-sections1 { vertical-align: top; }

 

[69GiGi96]

Mmm no... Ho provato sia a scriverlo sulla stessa riga dove c'è widht etc etc, sia su una nuova riga.
Ma non cambia nulla :cry:
Forse faccio prima cercando di riscrivere questa parte di codice da 0

 

[Mursey]

Nello span di advertising aggiungi lo stile display:inline-block

 

[69GiGi96]

C' era solo inline e l ho modificato in inline-block ma... continua a non funzionare.
Comincio a pensare che non so editare il codice

 

[Mursey]

C' era solo inline e l ho modificato in inline-block ma... continua a non funzionare.
Comincio a pensare che non so editare il codice

Dove lo hai visto ?

Devi fare:

<span style="display:inline-block; line-height:32px;">Advertising</span>

Anche se probabilmente e' meglio nel tag h4:

<h4 style="display:inline-block;">

 

[69GiGi96]

L ho visto nel codice html.
Non so perchè ci fosse.. Magari l ho aggiunto io nei vari tentativi.
Prima avevo provato a mettere prima il lineheight e poi display.

Appena posso, faccio come mi hai suggerito, o meglio ancora, nel tag h4
-----------------------
Edit:
RISOLTO!
Grazie mille ragazzi! Finalmente si trova nella riga giusta. Stavo diventando matto!
Credo di aver quasi risolto aggiungendo inline-block direttamente nel tag h4 cosí come mi hai consigliato.
Ancora grazie!
Ora mi manca solo "allinearlo" all' icona dato che è un pelino piu in basso..
-----------------------
Edit:
Cavolo l'html è più difficile di quanto credessi..
Ho sistemato l'altezza (non so quanto sia giusto il mio metodo) facendo così:

<h4 style="display: inline-block; vertical-align: top; "><span style="line-height: 32px;">
                           Advertising</span></h4>

Però ho trovato un altro problemuccio.. Ora il testo è troppo vicino all'icona.. Di default il template dovrebbe avere un bordino. Chissà che fine gli ho fatto fare! :cav:
Come temevo, l'icona non ha piu quel bordino..
Ho creato un macello. Ci sono difetti su difetti! :lol:

 

[Mursey]

Mi fai vedere il prima ed il tuo ?

 

[69GiGi96]

Mi fai vedere il prima ed il tuo ?

Si certo!
Prima:

Spoiler

[COLOR=#ff0000]HTML[/COLOR]:
<div id="primary" class="hentry group wrapper-content" role="main">
                    
                        <div class="box-sections">
                            <img src="http://www.tomshw.it/forum/images/icons/set_icons/card-black.png" alt="Logo Design" class="icon" />
                            <h4><span style="line-height:32px">Logo Design</span></h4>
                            <p>TESTO</p>
                        </div>

[COLOR=#ff0000]CSS[/COLOR]:
.box-sections { width:220px; line-height: 1.81em; margin:2em 13px 0 0; float:left; }
.box-sections h3, .box-sections h2, .box-sections-border h3, .box-sections-border h2 { margin-bottom:20px !important; }
.box-sections h2 { font-size:2em; }
.box-sections h3 { font-size:1.8em; }
.box-sections h1, .box-sections h2, .box-sections h3, .box-sections h4, .box-sections h5, .box-sections h6 { margin-top:0; clear:none !important; }
.box-sections h4, .box-sections h5, .box-sections h6 { font-size:1.5em; }
.box-sections h6, .box-sections-border h6 { margin:5px 0 22px !important; font-family: "Yanone Kaffeesatz",serif; }
.box-sections p, .box-sections-border p {
    clear: both;
    height: 151px;
    width: 220px;
} 
.box-sections img.thumb, .box-sections-border img.thumb { width:262px; height:139px; padding:3px; border:1px solid #ccc; }
.box-sections img.icon { float: left; margin-right: 10px; }
.box-sections span, .box-sections-border span { /*color:#244455*/ }

Dopo:

Spoiler

[COLOR=#ff0000]HTML[/COLOR]:
<div id="primary" class="hentry group wrapper-content" role="main">

            <div class="box-sections1">
                            <img src="http://www.tomshw.it/forum/images/icons/set_icons/card-black.png" alt="Advertising" class="icon" />
                            <h4 style="display: inline-block; vertical-align: top; "><span style="line-height: 32px;">Advertising</span></h4>
                <p>TESTO</p>
                        </div> 

[COLOR=#ff0000]CSS[/COLOR]: (ho fatto copia incolla, sostituendo "box-sections" con "box-sections1")
box-sections1 { width:440px; line-height: 1.81em; margin:2em 13px 0 0; float:left; }
.box-sections1 h3, .box-sections1 h2, .box-sections1-border h3, .box-sections1-border h2 { margin-bottom:20px !important; }
.box-sections1 h2 { font-size:2em; }
.box-sections1 h3 { font-size:1.8em; }
.box-sections1 h1, .box-sections1 h2, .box-sections1 h3, .box-sections1 h4, .box-sections1 h5, .box-sections1 h6 { margin-top:0; clear:none !important; }
.box-sections1 h4, .box-sections1 h5, .box-sections1 h6 { font-size:1.5em; }
.box-sections1 h6, .box-sections1-border h6 { margin:5px 0 22px !important; font-family: "Yanone Kaffeesatz",serif; }
.box-sections1 p, .box-sections1-border p {
    clear: both;
    height: 151px;
    width: 440px;
} 
.box-sections1 img.thumb, .box-sections1-border img.thumb { width:262px; height:139px; padding:3px; border:1px solid #ccc; }
.box-section1s img.icon { float: left; margin-right: 10px; }
.box-sections1 span, .box-sections1-border span { /*color:#244455*/ }

E' come se mi ignorasse i bordi..

 

[Mursey]

Il css fa riferimento a .box-sections-border che pero' non vedo definita, tu la hai modificata in .box-sections1-border ma dove e' definita ?

 

[69GiGi96]

Il css fa riferimento a .box-sections-border che pero' non vedo definita, tu la hai modificata in .box-sections1-border ma dove e' definita ?

Giusto, hai ragione.. Cercando box-sections-border lo trova solo in questa parte di codice...
Provo a cercare solo con border

Mmm no un attimo... Non sarebbe questa la def di box sections border?

.box-sections-border p {
    clear: both;
    height: 151px;
    width: 220px;
}

 

[SyncroIT]

Giusto, hai ragione.. Cercando box-sections-border lo trova solo in questa parte di codice...
Provo a cercare solo con border

Mmm no un attimo... Non sarebbe questa la def di box sections border?

.box-sections-border p {
    clear: both;
    height: 151px;
    width: 220px;
}

Quella riguarda i tag <p> all'interno dei tag con classe 'box-sections-border'.

 

[69GiGi96]

Ah non sapevo.. Ho cercato tutte le corrispondenze a "border" ma mi escono risultati solo per la galleria, blog e quant altro.
L'unica parte di codice dove si parla di box sections è quella che ho riportato :suicidio: