Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    [Didascalia e animazione] MENU

    Salve a tutti esperti del CSS,
    Sto da poco imparando i vostri segreti e sto uscendo letteralmente pazza
    La mia idea iniziale era fare un semplicissimo menù portable con 5 sezioni e un'animazione hover su ogni sezione con testo centrale, figure con opacità 50%, didascalia e sfondo del paragrafo mantenuta.
    Quindi ho creato un DIV contenitore con 5 paragrafi inline con sfondi a caso.
    Ho impostato il width dei paragrafi del 20% rispetto alla larghezza del DIV contenitore per farli stare tutti correttamente nel loro contenitore e siccome non riuscivo a centrare perfettamente il testo ho aggiunto il codice line-height.
    Poi ho dato un effetto hover al testo.
    Il vero problema è avvenuto quando ho tentato di aggiungere la didascalia ai vari paragrafi. Mi sono letteralmente bloccata perchè sono troppo nabba .
    Quando vado ad aggiungere il 'figure' va a sballare tutto.
    Quindi dopo svariate prove ho deciso di rivolgermi a veri esperti del css.
    Questo è il codice HTML:
    codice:
    <!DOCTYPE html>
    <html>
    <head>
    <link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet"> 
    <meta charset=UTF-8 />
    <link href="style.css" rel="stylesheet" tupe="text/css" media="all">
    </head>
    <body>
    
    <header><center><h1>MENU'</h1></center></header>
    
    <div id="contenitore">
    <p class="primoblocco"> PRIMAVERA </p>
    <p class="secondoblocco">ESTATE</p>
    <p class="terzoblocco"> AUTUNNO</p>
    <p class="quartoblocco">INVERNO</p>
    <p class="quintoblocco"> MEZZESTAGIONI</p>
    </div>
    </body>
    </html>
    E questo il css:

    codice:
    #contenitore
    {
    width: 900px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    background-color: black;
    color: yellow;
    justify-contenent: center;
    align-items: center;
    line-height: 400px;
    }
    
    #contenitore p
    {
    background-position: center center;
        background-size: cover;
    width: 20%;
    height: 100%;
    margin: 0 5px;
    float: center;
    border: 1px solid black;
    font-family: 'Nothing You Could Do', cursive;
        font-size: 100%;
        color: #000; 
            color: rgba(0, 0, 0, 0.0);
        text-align: center;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
    }
    
    
    #contenitore p:hover
    {
    color: white;
    color: rgba(75, 2, 66, 1.0);
    }
    
    .primoblocco
    {
    background-image: url("https://cache.desktopnexus.com/cropped-wallpapers/1738/1738540-1024x614-[DesktopNexus.com].jpg")
    }
    
    
    .secondoblocco
    {
    background-image:url("https://cache.desktopnexus.com/cropped-wallpapers/2491/2491675-1024x614-[DesktopNexus.com].jpg")
    }
    
    
    .terzoblocco
    {
    background-image:url("http://fotohd.weebly.com/uploads/2/1/9/8/21989596/1-regali-natale-o-su-horizontal-fixed_orig.jpg")
    }
    
    
    
    .quartoblocco
    {
    background-image:url("http://fotohd.weebly.com/uploads/2/1/9/8/21989596/7719476_orig.jpg")
    }
    
    
    
    .quintoblocco
    {
    background-image:url("https://cdn.pixabay.com/photo/2017/07/08/23/58/bathtub-2485957_1280.jpg")
    }

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,794
    Salve e benarrivata, non so se nel frattempo hai già risolto ma non mi è chiaro il problema che descrivi. Se per "figure" intendi il tag figure, non lo vedo nel codice che hai postato e non capisco cosa intendi per "va a sballare tutto".

    Ti invito a fornire maggiori indicazioni ed eventualmente un esempio dove sia possibile verificare con esattezza il problema.


    Buon proseguimento e buona permanenza su questo forum
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

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 © 2020 vBulletin Solutions, Inc. All rights reserved.