Visualizzazione dei risultati da 1 a 10 su 10
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117

    Aling e Height: comportamento strano

    Salve a tutti.
    Ho creato il seguente codice che potete vedere a questo indirizzo: http://www.maremmahost.it/
    codice HTML:
    .area {float: left; width: 33.33%; height: auto; position: relative;}
    .area img {max-width: 100%;}
    .overlay {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; position: absolute; top: 0; left: 0; text-align: center;}
    .overlay a {color: #fff; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); vertical-align: middle;}
    .area:hover .overlay {display: inline;}
    codice HTML:
    <div class="area"><img src="http://www.poderecasetta.it/writable/public/tbl_galleria/grande/d469h6649196875.jpg"><div class="overlay" align="center"><a href="">Colline Metallifere</a></div></div>
    Come potete vedere:

    1) Il link non è centrato verticalmente nonostante il "vertical-align: middle"; qui cominciano a venirmi dei dubbi riguardo alle mie conoscenze di css perché ero convinto che dando questa proprietà ad un elemento dovesse disporsi a metà del proprio parent.

    2) L'overlay nero, nonostante abbia "height: 100%" del proprio parent (.area), che a sua volta ha "height: auto" variabile in base al contenuto (immagine), sfora di qualche pixel e non capisco il motivo. Se per ipotesi dessi all'overlay un "height: 97%" andrebbe esattamente al pari.

    Non ho iniziato esattamente ieri a fare web design, eppure sono molto confuso in questo momento. Qualcuno mi sa chiarire le idee?

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Neanche così.
    codice HTML:
    .area {float: left; width: 33.33%; height: auto; position: relative; display: table;}
    .area img {max-width: 100%;}
    .overlay {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; position: absolute; top: 0; left: 0; text-align: center;}
    .overlay a {color: #fff; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); vertical-align: middle;}
    .area:hover .overlay {display: table-cell;}

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Accetto volentieri, ma non riesco a venirne a capo.
    Suppongo che il "position: absolute" non sia compatibile con i "display: table"? Ci vuole il relative?
    Purtroppo mi serve l'absolute perché .overlay deve sovrapporsi all'<img>.

    Sulla struttura html non riesco a trovare buchi.

    Ti ringrazio molto per l'aiuto e mi fa piacere che cerchi di farmi capire invece che piazzarmi davanti la soluzione da copincollare.

    EDIT: dovrei mettere un altro <div> intorno all' a ?
    Ultima modifica di fluxKami; 28-06-2017 a 09:54

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Non so se hai visto l'edit, forse ci sono arrivato?

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Position: absolute vuol dire che prende riferimento dal primo parent con position non static, ovvero .area. No?

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Appena risolto. Grazie ai tuoi indizi direi.
    Ancora però non capisco come mai .area prenda un'altezza maggiore dell'altezza dell'img che contiene.

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Quote Originariamente inviata da fluxKami
    Ancora però non capisco come mai .area prenda un'altezza maggiore dell'altezza dell'img che contiene.
    Ciao, quella incongruenza nell'altezza del div è data da una serie di fattori. Sostanzialmente dipende dalla proprietà line-height del div.area, dal fatto che <img> è un elemento inline-block e che questo di default ha proprietà vertical-align: baseline.

    Un elemento inline-block viene inserito all'interno del flusso del testo e intrinsecamente la sua proprietà line-height (che normalmente è maggiore di 0), relativamente al valore di vertical-align, può influire sul suo ingombro totale e quindi sull'effettiva altezza del suo contenitore.

    Facciamo un semplice esempio:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          .area{
            width: 500px;
            background: green;
          }
          img{
            width:300px;
            height: 200px;
          }
        </style>
      </head>
      <body>
        <div class="area">
          <img src="image.jpg">pippo
        </div>
      </body>
    </html>
    Puoi notare che per il testo "pippo", a fianco all'immagine, le gambette delle "p" sbordano oltre la linea di base (in corrispondenza del lato basso dell'immagine). L'area in cui sbordano le gambette si chiama gergalmente "parte discendente" del testo.

    Questo accade comunque anche senza il testo perché, appunto, l'immagine stessa, essendo inline-block, viene considerata come se fosse del testo e piazzata partendo dalla linea di base del flusso dei contenuti, mantenendo sotto di essa quella sorta di margine che è, appunto, la parte discendente del testo.

    Puoi comunque risolvere in vari modi.
    Eccone alcuni:

    - Applica display: block all'elemento img. Questo fa in modo di toglierlo fuori dal flusso del testo, evitando che siano considerate, per tale elemento, le proprietà caratteristiche del testo.

    - Applica vertical-align: middle (o un valore differente da baseline o da super) all'elemento img. Questo piazza il testo a metà dell'altezza dell'immagine, evitando che la parte discendente del testo risulti sotto l'immagine stessa.

    - Applica line-height: 0 al div.area. Questo fa in modo di azzerare l'ingombro in altezza del contenuto testuale, azzerando di fatto anche la parte discendente del testo.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Hai perfettamente ragione. Assurdo.
    Ma tutti questi tecnicismi dove si studiano?

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ma tutti questi tecnicismi dove si studiano?
    A volte tiro ad indovinare e c'azzecco

    A parte gli scherzi, conta molto il bagaglio di informazioni che ci si crea durante gli anni passati a programmare e sviluppare tra i vari ambiti.
    Personalmente posso dirti che molto spesso, per le varie problematiche che mi si presentano (anche tra le discussioni qui sul forum) non ho la risposta a portata di mano, come se la sapessi perché l'ho studiata, ma ho i tasselli più o meno giusti per poter reperire la soluzione o le informazioni che mi servono, andando a cercare di volta in volta anche sulle opportune guide o in generale sul web. Il fatto è che se mancano quei tasselli viene difficile anche capire dove è come cercare. Ma quei tasselli sono parte dell'esperienza personale che ti crei di volta in volta affrontando situazioni più che altro pratiche, piuttosto che studiando la teoria.

    Per cui, se mi chiedi dove si studiano queste cose, personalmente non ho da consigliarti nessun manuale specifico e nessuna guida che possano essere esaustivi, ma piuttosto ti posso dire studia un po' qui un po lì e fai molta pratica. Arriverai poi, non a risolvere tutti i problemi che ti si presentano, ma a capire come muoverti per piterli risolvere. Ovviamente IMHO. Poi magari qualcuno potrà consigliarti anche qualche buon manuale.

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

  10. #10
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Capito perfettamente! Grazie mille ad entrambi. Vi sono molto grato!

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.