Problema blocchi HTML

[Osko23]

Ciao a tutti, è da poco che sono nel mondo dell'html e ho provato a scaricare un pdf per replicarne il contenuto... la prima parte è ok, ho fatto l'header e i menu laterali poi non senza difficoltà ho fatto anche il primo blocco con i contenuti (quello dell'immagine) ma quando vado a mettere il secondo o il terzo blocco contenuti vengono posizionati con una logica che non riesco a seguire al posto che sotto al primo :retard: come faccio a incolonnare il secondo blocco al primo?
Il primo blocco è quello in giallo, il secondo è in rosso
E' tutto allegato, grazie a chiunque mi vorrà aiutare


:grat::ciaociao:

- - - Updated - - -

Up

 

[Osko23]

up

 

[bellch]

Ciao sono nuovo in questo sito :ciaociao:.

Allora Osko, la tua confusione si origina dal fatto che gli elementi di tipo float hanno un flusso diverso, in prattica vengono 'tolti dal normale flusso di posizionamento', cosa che non accade normalmente. Per questo il box2(quello rosso #ff0000 ) è stato messo "sotto" gli altri, cioè è stato posizionato normalmente, come se gli altri div non ci fossero perchè tolti dal flusso per essere float.

Inoltre gli elementi che hanno float='left' ad esempio si mettono uno accanto al altro se c'è lo spazio a disposizione.

La soluzione è semplice, ai div che contengono al loro interno elementi float devi aggiungere questa regola di style:

.overflow : auto;

Quindi fai un div contenitore che contenga gli elementi di tipo float e poi nel css gli aggiungi la regola di overflow. :)

 

[Osko23]

Ciao sono nuovo in questo sito :ciaociao:.

Allora Osko, la tua confusione si origina dal fatto che gli elementi di tipo float hanno un flusso diverso, in prattica vengono 'tolti dal normale flusso di posizionamento', cosa che non accade normalmente. Per questo il box2(quello rosso #ff0000 ) è stato messo "sotto" gli altri, cioè è stato posizionato normalmente, come se gli altri div non ci fossero perchè tolti dal flusso per essere float.

Inoltre gli elementi che hanno float='left' ad esempio si mettono uno accanto al altro se c'è lo spazio a disposizione.

La soluzione è semplice, ai div che contengono al loro interno elementi float devi aggiungere questa regola di style:



Quindi fai un div contenitore che contenga gli elementi di tipo float e poi nel css gli aggiungi la regola di overflow. :)

Innanzitutto grazie, ma ahimè non sono riuscito! Credevo di avere capito ma provando non ho ottenuto molto, ho rimesso il float: left; perchè nell'immagine che avevo postato non c'era e il blocco rosso si appiccica al blocco giallo lateralmente, li il blocco finisce ma da quanto ho capito il float non tiene conto di quel blocco
Utilizzando l'overflow la situazione però non cambia, non dovrebbe incolonnarsi sotto al primo blocco?

 

[bellch]

Allora vuoi che il box rosso sia posizionato sotto quello giallo? per fare questo crea un div che contiene tutti gli elementi di tipo float con classe container:



dopo di che fai le seguente modifiche di stile:



E dovrebbe andare :)

- - - Updated - - -

Comunque ho notato che usi troppi div.. Per il titoli è buona regola usare gli h1,h2,h3,h4.. anche in ottica di essere ben indicizzati dai motori di ricerca per quando metterai il sito online. Lo stesso dicassi dei menu. invece di div, dovresti ussare liste non ordinate <ul>.

ps. cmq volevo mettere il codice direttamente qua invece di usere immagini ma quando cerco di farlo questo editore di testo lo 'interpreta' subito, quindi si vede il risultato e non il codice, ho provato ad usare CODE però niente, se c'è qualche amministratore gli prego di chiarirmi come si usa.

 

[Osko23]

Visualizza allegato 94401

Allora vuoi che il box rosso sia posizionato sotto quello giallo? per fare questo crea un div che contiene tutti gli elementi di tipo float con classe container:

Visualizza allegato 94403

dopo di che fai le seguente modifiche di stile:

Visualizza allegato 94405

E dovrebbe andare :)

- - - Updated - - -

Comunque ho notato che usi troppi div.. Per il titoli è buona regola usare gli h1,h2,h3,h4.. anche in ottica di essere ben indicizzati dai motori di ricerca per quando metterai il sito online. Lo stesso dicassi dei menu. invece di div, dovresti ussare liste non ordinate <ul>.

ps. cmq volevo mettere il codice direttamente qua invece di usere immagini ma quando cerco di farlo questo editore di testo lo 'interpreta' subito, quindi si vede il risultato e non il codice, ho provato ad usare CODE però niente, se c'è qualche amministratore gli prego di chiarirmi come si usa.

Grazie mille, sono riuscito ora
Potresti chiarirmi meglio la questione di h1 h2 ecc? purtroppo sto seguendo il corso con la scuola e ancora non ne abbiamo parlato, gia questo era un esercizio aggiuntivo :D

 

[bellch]

Grazie mille, sono riuscito ora
Potresti chiarirmi meglio la questione di h1 h2 ecc? purtroppo sto seguendo il corso con la scuola e ancora non ne abbiamo parlato, gia questo era un esercizio aggiuntivo :D

Prego, figurati!

comunque quello che volevo dirti è che quando si fa una pagina web per i titoli si usano i tag <h1> titolo </h1>
essistono dal 1 al 6, dove <h1> è appunto il più rilevante. quindi potresti avere una pagina del genere:

<h1> Titolo Principale </h1>

<!-- contenuto-->

<h2>Titolo secondario</h2>
<h3>sotto titolo</h3>

<!-- contenuto-->

<h2>Titolo secondario</h2>

<!-- contenuto-->

nella seguente immagine si vede meglio:



sembra una banalità però alla fine è buono usarle, così quando google trova la tua pagina sa qualli sono i titoli e riesce più facilmente a capire che genere di sito è.. in questo modo è più probabile che il tuo sito sia nei primi risultati nella ricerca.

Per farti capire Oggi al "CONTI" poteva essere un <h1> mentre che lezione numero 1- Le immagine poteva essere un <h2>

comunque questa è una cosa che capirai l' importanza più avanti quando dovrai passare del tempo per fare che il tuo sito sia visitato dalla gente, ogni piccola cosa può procurarti una visita, e ti dicco per esperienza che fare che un sito sia 'famoso' o molto visitato e quasi tanto dificile come realizzarlo.

Saluti!