Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14

    Comportamento DIV di default e come metterli uno dentro l'altro?

    Ciao a tutti, è un po' di tempo che non uso scrivere lato client in particolare html e css e ad un primo approccio mi è venuto intuitivo come test iniziale di provare a metterli uno dentro l'altro e vederli con colori diversi.

    Ci ho perso 1 giornata buona a curiosare e provare, ho pure cercato su internet ma non ho trovato un argomento specifico che chiarisse i comportamenti.

    Dico quanto penso di sapere:

    Di default viene ereditata la configurazione del tag html che poi dipende se non erro dalla configurazione di default del browser ed eventuale modifica dell'utente allo stesso.

    1) Ci sono dei tag di tipo block e altri di tipo inline.

    2) Il div è di tipo block e se non erro il suo comportamento è di mettersi uno sotto l'altro...andare a capo...

    3) il div a quanto pare se non metto paragrafi dentro non viene visualizzato.

    4) Ho notato che oltre al display:block di default ne esistono una miriade di altri preconfigurati e
    probabilmente creano una dipendenza.

    5) So che la cache del browser a volte frega negli aggiornamenti, ma non mi pare sia il mio caso.

    Ora ho alcuni riscontri da prove fatte che non comprendo e mi viene da supporre che vi siano delle dipendenze lato css da definire al fine che l'una soddisfi la seguente....su questo aspetto sarebbe molto interessante avere qualche linea guida da seguire che chiarisca il tutto...


    Ho fatto due semplicissime prove intuitive:
    (mostro il codice per far prima)

    1)
    HTML (in questo caso li ho messi in un div container per provare risolvere, ma vorrei capirlo anche senza.

    codice:
    <divid="container">
    
    <divid="a">
    <p>A</p>
    </div>
    
    <divid="b">
    <p>B</p>
    </div>
    </div>
    
    
    CSS:
    codice:
    #container{
    width: 600px;
    height: 600px;
    
    }
    
    
    #a{
    
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    
    
    };
    
    #b{
    
    width: 200px;
    height: 200px;
    background-color: rgb(34, 179, 15);
    
    
    
        };
    
    
    Ora intuitivamente mi aspettavo due quadrati con sfondi colorati uno sotto l'altro, invece solo il primo è corretto, il secondo (anche andando con devTools) noto che il css #b non lo vede proprio e ne mette uno di default neppure modificabile...quello del box model che è 600*19 e suppongo i valori di default di un div (in questo caso si estende a tutto il container in larghezza e il paragrafo in altezza).

    Allego una img per confrontare ciò che vedo.

    Vorrei appunto capire le dipendenze che intercorrono perché a quanto pare mettere semplicemente altezza e larghezza non è sufficiente. Nelle guide mi pare ci sia un po' di mancanza nel rappresentare le dipendenze che ci sono tra i vari tag rispetto allo scopo che si vuole ottenere, anche il più banale.

    Questo è il primo post, per non allungare ne faccio un altro dove vorrei sapere come metterli uno dentro l'altro....così tengo i due argomenti distinti.

    Grazie.
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    Pare ci sia qualcosa che impedisca al secondo div sia di vedere lo sfondo colorato sia di dimensionarsi....l'img allegata è sfuocata per motivi di dimensioni allegati accettate.

    mi viene da pensare (vedengo l'immagine del boxmodel) che margin, padding e border ereditino dal container padre e quindi tengano in qualche modo vincolato alla dimensione del paragrafo il div...
    a dirla tutta però il container ha 600*600 quindi...
    ma questi elementi hanno funzioni diverse suppongo e pensare che ostacolino le dimensioni del contenuto più interno a questo punto mi fa pensare che il concetto di fondo non è inserire due div uno dentro l'altro (per esempio) ma di usare le altre parti del box model per rappresentare due riquadri uno dentro l'altro....ma nel caso del flusso di default (block) le cose non mi tornano....so che c'è float e flex, ma questi dovrebbe svolgere funzioni ulteriori a quella del comportamento di default di block e sua personalizzazione come colore e dimensione.

    mi fermo qua altrimenti faccio confusione
    Ultima modifica di Manuelk; 17-10-2019 a 13:50

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    Il secondo è del tutto simile, solo che provo a metterne uno dentro l'altro e ciò che mi aspetto è di vedere quello sotto di un colore e quello sopra di un altro....poi il posizionamento capisco che è un altro aspetto da gestire, avrà il suo di default comunque.

    HTML
    codice:
    <divid="a">
    <p>A</p>
    <divid="b">
    <p>B</p>
    
    </div>
    </div>
    
    
    CSS
    codice:
    #a{
    
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    
    };
    
    #b{
    
    width: 50px;
    height: 50px;
    background-color: rgb(27, 18, 156);
    
    
        };
    
    
    Immagini allegate Immagini allegate

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    noto solo ora che mancano degli spazi nel codice, si vede che con il copia/incolla non li ha inseriti...comunque nel codice provato ci sono.

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    mi pare di aver scoperto una terribile verità

    ho messo 2 ; maledetti che hanno prodotto il risultato sopra!!

    Vabè...se ci sono altri suggerimenti ....utili ben vengano

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,669
    Ciao e bentornato

    ho messo 2 ; maledetti che hanno prodotto il risultato sopra!!
    Chiaro, tra le varie regole non vanno messi.

    Vabè...se ci sono altri suggerimenti ....utili ben vengano
    Può essere utile adoperare un editor avanzato che esegua il controllo automatico della sintassi e ti segnali al volo questo tipo di errori.

    Esistono degli editor sia offline, che puoi installare ed eseguire in locale, sia online (cosiddetti "code playground") che offrono svariati strumenti anche per il controllo del codice.

    Forse già li utilizzi ma in tal caso presta maggiore attenzione alle eventuali segnalazioni; in genere gli errori vengono evidenziati o sottolineati direttamente dentro l'editor durante la stesura del codice stesso.

    Esistono inoltre i validatori per verificare che il codice prodotto sia corretto e soprattutto valido secondo gli standard.

    Puoi trovare dei riferimenti a questi strumenti tra i link utili CSS (discussione in evidenza), al capitolo 5 Strumenti per lavorare con i CSS

    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    A parte i ; che appunto non ci vogliono, tieni presente che:

    i div di default hanno display: block; il che significa che:
    0) Non si affiancheranno mai a nulla, ma useranno sempre una intera riga per se stessi
    1) Sono di default larghi il 100% dello spazio a loro disposizione (ovvero dello spazio interno del loro container)
    2) Sono di default alti 0 (ZERO) quindi se non hanno contenuto sono invisibili, altrimenti sono alti abbastanza da contenere il loro contenuto non floated (i contenuti floated non contribuiscono MAI alle dimensioni del contenitore).

    I block element se gli applichi una larghezza ed altezza la prendono, ma questo non cambia il loro comportamento, continueranno ad usare una intera linea e se necessario troncheranno (o lasceranno debordare) il contenuto a seconda di come imposti la loro proprità overflow.

    Al contrario, gli elementi inline saranno sempre larghi e alti quanto basta per contenere il loro contenuto, IGNORERANNO qualsiasi larghezza o altezza impostategli, e si impileranno sulla stessa riga finchè ci stanno, per poi proseguire nella successiva; SPAN è un tag che di default è inline.

    Di per se, quindi, l'unica vera dipendenza che hanno le dimensioni è legata al fatto che alcuni display hanno dimensioni di default o obbligate legate al contenuto, altri no; diverso è il discorso di dell'ereditarietà, che significa che per esempio se imposti un color su un contenitore di default i figli hanno lo stesso color.

    Un ibrido interessante è inline-block, che si impila sulla riga e di default è grande come il suo contenuto come l'inline, ma ha dimensioni impostabili.

    Se poi vuoi divertirti con la potenza dei CSS moderni, sperimenta con display:flex impostato al contenitore, è MOLTO potente!

    Poi ho notato un'altra cosa, non so se sia il formattatore di codice qui nel forum, ma di sicuro non è corretto <divid="a"> ma invece ci vuole uno spazio <div id="a">!
    Ultima modifica di Shores; 18-10-2019 a 11:49
    "Le uniche cose che sbagli sono quelle che non provi a fare."
    Atipica

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao e bentornato


    Chiaro, tra le varie regole non vanno messi.


    Può essere utile adoperare un editor avanzato che esegua il controllo automatico della sintassi e ti segnali al volo questo tipo di errori.

    Esistono degli editor sia offline, che puoi installare ed eseguire in locale, sia online (cosiddetti "code playground") che offrono svariati strumenti anche per il controllo del codice.

    Forse già li utilizzi ma in tal caso presta maggiore attenzione alle eventuali segnalazioni; in genere gli errori vengono evidenziati o sottolineati direttamente dentro l'editor durante la stesura del codice stesso.

    Esistono inoltre i validatori per verificare che il codice prodotto sia corretto e soprattutto valido secondo gli standard.

    Puoi trovare dei riferimenti a questi strumenti tra i link utili CSS (discussione in evidenza), al capitolo 5 Strumenti per lavorare con i CSS

    Buon proseguimento

    Ciao e grazie

    Sto usando vscode dopo aver visto qualche tempo fa che in atom c'è un po' meno attenzione sugli aggiornamenti dei plugin...certo vscode ha i suo aspetti criptici, ma pian piano ci prenderò la mano.

    Di default a quanto pare non segnala errori tipo i ; per i css.

    vedrò se esiste qualche soluzione.

    interessante il discorso sui validatori (suppongo una sorta di debug) anche se il nome mi fa pensare
    ad un controllo dei contenuti passati dall'utente.

    Altra cosa che al momento sento di dover apprendere meglio sono proprio l'uso dei devtools del browser...putroppo non vedo guide complete in italiano...in inglese vado a rilento e le seguirò meglio in seguito... saper usare bene nei particolari questo strumento mi pare fondamentale.

    per il link mi prenderò un momento per dargli un'occhiata.

    Grazie.

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    Poi ho notato un'altra cosa, non so se sia il formattatore di codice qui nel forum, ma di sicuro non è corretto <divid="a"> ma invece ci vuole uno spazio <div id="a">!
    Si mi sono accorto, l'ho scritto dopo il primo post sopra....pare sia l'editor del forum... il problema reale erano i ;.

    per il resto ho letto alcuni punti utilii e me li segno con calma grazie.

  10. #10
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    14
    ho ripensato riguardo tailwind per chi avesse letto...creo un altro thread...
    Ultima modifica di Manuelk; 18-10-2019 a 18:26

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.