Immagine con testo affianco (sfondo colore diverso)

Gregia

Nuovo Utente
11 Giu 2016
7
5
1
26
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
 
  • Like
Reactions: ottofonsuppost

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
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
 

Gregia

Nuovo Utente
11 Giu 2016
7
5
1
26
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:
  • Like
Reactions: ottofonsuppost

Gregia

Nuovo Utente
11 Giu 2016
7
5
1
26
Allora va bene così? Copia il codice e adattalo alle tue esigenze.
Altrimenti dimmi cosa vuoi cambiare


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 ;)
 
  • Like
Reactions: ottofonsuppost

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.406
339
83
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
 
  • Like
Reactions: ottofonsuppost
Discussioni simili
Autore Titolo Forum Risposte Data
I [HTML] Codice box testo con scrollbar sopra immagine HTML e CSS 1
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
P far apparire immagine sotto testo con rollover Javascript 2
U onclick immagine random con testo non random Javascript 20
C posizione immagine e testo con "align" HTML e CSS 1
S Testo e immagine con link Javascript 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
S [PHP] Recupero nome immagine da Form con input file PHP 3
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
A Salvare immagine ridimensionata in MySql con GD PHP 12
I Effetto glowing su immagine con GIMP Webdesign e Grafica 0
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
crealatualista [PHP] layout pagina con immagine codice a barre PHP 3
B INSERIRE DATI CON IMMAGINE DA FORM IN MYSQL MySQL 7
Daniele450 [Javascript] Slide show in java script, senza array con nome visibile dell'immagine Javascript 2
D [HTML] Problema con Dreamweaver; 1) tabella con larghezza 100% 2) Immagine che si adatta a Div HTML e CSS 28
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
trattorino [Javascript] caricamento immagine con effetto fade Javascript 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
C [PHP] Upload immagine in un form con target _blank: non funziona PHP 7
B Upload immagine con ajax post Ajax 5
C Immagine thumbnails con zoom e didascalia HTML e CSS 0
F Ho un Problema con una immagine HTML e CSS 6
F Aiuto: impossibile la mappatura di un'immagine con Dreamweaver CC2015 HTML e CSS 8
P immagine responsive problema con script jquery jQuery 0
otto9due Postare tweet con immagine cosa aggiungere a questa classe? PHP 0
L Inserire Script Jquery in immagine html con zone cliccabili jQuery 2
R visualizzare immagine con 2 tabelle differenti PHP 6
S Problema con il caricamento di un'immagine su aruba Hosting 11
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
F sostituire un'immagine con jquery jQuery 2
M Attributo placeholder con immagine HTML e CSS 2
A problema con il prelevamento di una immagine su internet Sviluppo app per Android 1
A [RISOLTO] Passaggio di valori con GET tra una immagine e una descrizione PHP 7
F Problema opacity e z-index con immagine HTML e CSS 3
A invio email con immagine inline senza clips PHP 0
M Grafico con php e librerie immagine PHP 2
G Con Photoshop come faccio a ritagliare un immagine irregolare e quindi non vedere più la parte ester Photoshop 3
M ritagliare una parte dell'immagine con le librerie gd PHP 0
F [Risolto] upload immagini con la classe di Baol74 con size immagine Classic ASP 15
C Creare mappe in un'immagine con link ed "evidenziate" al passaggio del mouse HTML e CSS 5
F Indicare nome dell'immagine con PHP PHP 0
M Mappa immagine con elenco di link reciproci Javascript 0
M aprire una immagine da una cartella con lightbox PHP 0
G Nome di immagine passato con variabile PHP 2
M Creare mappa immagine interattiva con dati forniti da database PHP 0
M form mail con allegato e immagine Classic ASP 4
M CSS...dinamico? Altezza div variabile, ma con immagine come bordo HTML e CSS 4

Discussioni simili