Immagine con testo affianco (sfondo colore diverso)

Discussione in 'HTML e CSS' iniziata da Gregia, 11 Giugno 2016.

  1. Gregia

    Gregia Nuovo Utente

    Registrato:
    11 Giugno 2016
    Messaggi:
    7
    Mi Piace Ricevuti:
    5
    Punteggio:
    1
    Sesso:
    Maschio
    Ciao a tutti,
    premetto che non sono un'esperto in programmazione e per questo ho bisogno del vostro aiuto.
    Mi trovo in seria difficoltà per quanto riguarda l'impostazione grafica della pagina web che vorrei creare.
    Mi spiego:

    Questo è il risultato che vorrei ottenere:
    http://imageshack.com/a/img924/9823/sD8Pht.png

    (Pagina fatta da me con Wix... ma non mi piace stare sotto di loro, preferisco arrangiarmi)

    Questo è quello che sono riuscito a fare al momento:
    http://imagizer.imageshack.us/a/img922/5158/6SZVzF.png


    Tralasciando il logo differente e la navbar... Vorrei che lo sfondo cambiasse come nella prima immagine (a strisce) e che l'immagine ed il riquadro (ha un'animazione di rimbalzo, almeno quella funziona) con differente sfondo siano centrati ed affiancati nella pagina e che resti così su ogni schermo... invece basta fare un resize della pagina e tutto cambia :'(

    Probabilmente mi sono spiegato male ma le foto rendono l'idea :D

    Qui i codici: (evidenzio in grassetto le parti che secondo me contengono l'orrore)

    Index.html

    Codice:
    <DOCTYPE html>
    
        <html>
        <head>
    <title> Venetianquality - Bindery in Venice </title>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    
      <!-- FOGLIO DI STILE CSS MIO PERSONALIZZATO  -->
    
      <link rel="stylesheet" href="style.css">
    
      <!-- FOGLIO CSS PER ANIMAZIONI  -->
    
      <link rel="stylesheet" href="animazione/animate.css">
    
      <!-- FOGLI JAVASCRIPT PER BOOTSTRAP.........AL MOMENTO NON SERVONO -->
    
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
        </head>
    
    
    <body>
    
    
    
    
    <!--    INIZIO    BARRA       DI       NAVIGAZIONE      PAGINE -->
    
    
        <ul class="navbar col-12">
          <li class="linklogo"><a href="index.html"><img src="logovepl.png" width="240" height="auto" alt="venetianquality"> </a></li> <li class="link"><a class="active" href="index.html"> HOME </a></li>
          <li class="link"><a href="#news"> PRODUCTS </a></li>
          <li class="link"><a href="#contact"> CONTACTS </a></li>
          <li class="link"><a href="#about"> ABOUT </a></li>
        </ul>
    
    
    <!--  FINE BARRA DI NAVIGAZIONE PAGINE -->
    
    
    
    
    <div class="row">
    
          <div class="sectionsx col-6">
          <img class="imghome" src="pvhome.jpg">
          </div>
        </div>
       
      <div class="col-6 box bounceIN sectiondx">
              <h2 > RENFINEMENT </h2>
              <p class="italic"> The Finest Materials </p>
              <button> Find Out </button>
    
      </div>
    
    </div>
    
    
    <!-- jQuery e plugin JavaScript SI CARICANO DA COMPUTER COME I CSS PERSONALIZZATI  -->
    
    <script src="js/jquery.js"></script>
    <script src="js/jack-in-the-box.js"></script>
    
    <script>
    $(function() {
    $('body').jackInTheBox();
    });
    </script>
    
    
    </body>
    
        </html>



    style.css

    Codice:
    * {
    
        box-sizing: border-box;
    }
    
    
    /*      INIZIO      COLONNE     PER     LAYOUT  RESPONSIVE  */
    
    .row::after {
        content: "";
        clear: both;
        display: block;
    }
    
    [class*="col-"] {
        float: left;
        padding: 0px;
    }
    
    .navbar {
        padding: 0px;
        background-color: #242323;
    }
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    /*      FINE      COLONNE     PER     LAYOUT  RESPONSIVE  */
    
    body {
        background-color: #3D2C2A;
    }
    
    
    
    .sectionsx {
        background-color: #3D2C2A;
        float: left;
        position: relative;
        left: 20%;
    }
    
    .sectiondx {
        background-color: #B0937F;
        float: left;
        padding: 100px;
        position: relative;
        font-family: spinnaker;
    }
    
    
    
    h2 {
        text-align: center;
    }
    
    #logo {
        font-size: 1.3em;
        font-family: Raleway;
        color: #D9924C;
        margin-top: 0%;
        margin-left: 1%;
        padding: 0px;
    }
    
    @font-face {
        font-family: spinnaker;
        src: url(spinnaker.ttf);
        }
    
    @font-face {
        font-family: raleway;
        src: url(raleway.ttf);
        }
    
    @font-face {
        font-family: Snell Roundhand;
        src: url(snellroundhand.ttf);
        }
    
    .italic {
        font-size: 1.3em;
        font-family: Snell Roundhand;
        text-align: center;
        color: #472C0C;
    
    
    }
    
    
    
    #txthome {
        float: left;
        font-size: 2em;
        font-family: Snell Roundhand;
        color: #472C0C;
    }
    
    .imghome {
        float: left;
        width: 501px;
        height: 332px;
    
    }
    
    
    button {
        text-align: center;
        display: block;
        margin: 0 auto;
        }
    
    
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0px;
        overflow: hidden;
    }
    
    li {
        float: left;
        margin-right: 2%;
        padding: 0px;
    }
    
    li a {
        display: block;
        text-align: center;
        padding: 10px 16px;
        text-decoration: none;
    }
    
    /*          I N I Z I O         C O L O R E     D E I     L I N K        AL         P A S S A G G I O         O         CLICK  */
    
    
    .link {
        font-size: 1.2em;
        font-family: spinnaker;
        padding: 30px;
    }
    
    .linklogo {
        font-size: 0.8em;
        font-family: spinnaker;
        padding: 0px;
    }
    
    a:link {
        color: #D9924C;
        background-color: transparent;
        text-decoration: none;
        transition-duration: 0.3s;
    }
    a:visited {
        color: #D9924C;
        background-color: transparent;
        text-decoration: none;
        transition-duration: 0.3s;
    }
    a:hover {
        color: #3D2C2A;
        background-color: transparent;
        text-decoration: none;
        transition-duration: 0.3s;
    }
    a:active {
        color: #734416;
        background-color: transparent;
        text-decoration: none;
        transition-duration: 0.3s;
    }
    
    /*         F I N E          C O L O R E     D E I     L I N K        AL         P A S S A G G I O         O         CLICK */
    
    
    
    
    



    Scusatemi la rottura

    Tommaso
     
    A ottofonsuppost piace questo elemento.
  2. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.870
    Mi Piace Ricevuti:
    287
    Punteggio:
    83
    Sesso:
    Maschio
    Rieccomi a te
    Allora a te perdono la rottura ma tu perdona a me se non ho capito molto di ciò che vuoi ottenere, riassumo:
    Vuoi ottenere delle immagini (jpg,png,ecc.) affiancate e disposte a croce.
    Giusto?
    Queste immagini con sfondo diverso, ma non dipende dall'immagine?
    Coso significa l'immagine ha un'animazione a rimbalzo?
    Tu usi Bootstrap? Non sono molto amico con questo anche perchè risulta difficile dare consigli su risultati che produce Bootstrap, sarebbe molto meglio creare le pagine scrivendo il codice a manina con un normale editore.

    Comunque se riesci a farmi capire meglio e a procedere per passi, io sono sempre qui
     
    A ottofonsuppost e Gregia piace questo messaggio.
  3. Gregia

    Gregia Nuovo Utente

    Registrato:
    11 Giugno 2016
    Messaggi:
    7
    Mi Piace Ricevuti:
    5
    Punteggio:
    1
    Sesso:
    Maschio
    Hahaha grande! Ti perdono eccome! Mi stai cercando di aiutare alla fine ;)
    Il codice l'ho scritto tutto a mano con Sublime... vedi bootstrap tra gli stylesheet ma non ho utilizzato nulla (ero indeciso se usarlo o meno xD).
    Praticamente per rendere la pagina come quella della prima immagine linkata... ho pensato di lavorare a "moduli".
    Volevo che gli elementi si alternassero al centro in questo modo e ordine:

    Prima parte:
    Immagine per prima e affianco del testo che sta "all'interno" di un riquadro con background di colore diverso.​
    Seconda parte:
    Background di colore differente per la pagina e sempre al centro Testo con riquadro uguale al primo (questa volta inserito per primo) seguito affianco dall'immagine. (Non so se si dica "a croce" in questo caso)​

    E così via invertendosi nuovamente...

    Il riquadro ha un'animazione che al primo caricamento lo fa "rimbalzare" sullo schermo facendolo apparire...

    Sono un disastro ad esprimermi ma spero di averti spiegato un po' meglio... D:
     
    Ultima modifica: 11 Giugno 2016
    A ottofonsuppost piace questo elemento.
  4. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.870
    Mi Piace Ricevuti:
    287
    Punteggio:
    83
    Sesso:
    Maschio
    Una cosa così potrebbe andare?
    PROVA
     
    A ottofonsuppost piace questo elemento.
  5. Gregia

    Gregia Nuovo Utente

    Registrato:
    11 Giugno 2016
    Messaggi:
    7
    Mi Piace Ricevuti:
    5
    Punteggio:
    1
    Sesso:
    Maschio
    Sii! più o meno è quello il risultato che voglio! :D
     
    A ottofonsuppost piace questo elemento.
  6. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.870
    Mi Piace Ricevuti:
    287
    Punteggio:
    83
    Sesso:
    Maschio
    Allora va bene così? Copia il codice e adattalo alle tue esigenze.
    Altrimenti dimmi cosa vuoi cambiare
     
    A ottofonsuppost piace questo elemento.
  7. Gregia

    Gregia Nuovo Utente

    Registrato:
    11 Giugno 2016
    Messaggi:
    7
    Mi Piace Ricevuti:
    5
    Punteggio:
    1
    Sesso:
    Maschio
    Grazie mille! Adesso devo uscire ma appena posso lo provo! Grazie :D
     
    A ottofonsuppost piace questo elemento.
  8. Gregia

    Gregia Nuovo Utente

    Registrato:
    11 Giugno 2016
    Messaggi:
    7
    Mi Piace Ricevuti:
    5
    Punteggio:
    1
    Sesso:
    Maschio

    Ho visto ora!!! non è proprio cos' che intendevo in quanto non si tratta di affiancare proprio due immagini ma di un'immagine e di un riquadro con testo, bottone con link e animazione...
    Ad ogni modo mi sono sbloccato e sono riuscito a creare la prima parte più o meno!
    Ora vedo se riesco a mettere in riga la seconda :D
    Grazie mille per l'aiuto comunque ;)
     
    A ottofonsuppost piace questo elemento.
  9. Max 1

    Max 1 Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    29 Febbraio 2012
    Messaggi:
    3.870
    Mi Piace Ricevuti:
    287
    Punteggio:
    83
    Sesso:
    Maschio
    Il mio è solo un esempio! Al posto dell'immagine con il testo in quel div puoi mettere ciò che vuoi! Testo, pulsanti, animazioni, senza cambiare nulla di ciò che ti ho scritto, devi solo togliere l'immagine e aggiungere i tuoi contenuti.
    Se mi dai il testo e il resto provo a fartelo io
     
    A ottofonsuppost piace questo elemento.
Sto caricando...

Condividi questa Pagina