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

    Bootstrap grid img a sinistra (col-sm-4) serie di div a destra (in col-sm-8)

    Buongiorno, sto avendo dei problemi nel realizzare un'idea che ho in mente.
    Innanzitutto, sto sviluppando un sito con joomla 3.x e un template che si basa su EF4.

    Quello che vorrei ottenere è un modulo custom html che a sinistra (ca 40% della pagina, quindi col-sm-4 sembrava la soluzione adatta) mostra un'immagine che però deve coprire verticalmente la totalità della pagina fino a che l'utente non scrolla, mentre a destra un'insieme di div, che ho provato ad inserire in un col-sm-8.

    Di seguito l'url: http://francescaleso.com/it/

    Come potrete vedere (se non dall'URL, nel caso nel frattempo abbia fatto modifiche, allego di seguito uno screenshot) la bootstrap grid non funziona, risultando nell'immagine sproporzionatamente grossa sopra e l'altro div (col-sm-8) al di sotto di essa.
    leso-1.jpg

    Come posso ottenere ciò che ho in mente? Non so più dove sbattere la testa.

    per intenderci, vorrei ottenere un fac-simile di questo, ma con dimensioni delle col diverse

    upload_2017-7-3_12-13-30.jpg

    Grazie per l'attenzione

  2. #2
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Quote Originariamente inviata da _Marco_87 Visualizza il messaggio
    Ciao, ho dato uno sguardo alla pagina, ma le classi che hai citato non hanno attributi di stile o altro, quindi in teoria non fanno nulla, a meno che non funziono come selettori per i sotto elementi, ma non lo vedo specificato, quindi non fanno propio nulla. Che attributi avrebbero dovuto avere? Comunque non capisco il problema, puoi specificarlo meglio?
    Ciao, essendo il template bootstrap ready dovrebbero credo fare quello che prevede il sistema grid di bootstrap..
    In pratica come mostrato nell'esempio in basso mi servono due div, uno (quello a sinistra) più piccolo dell'altro e con una background image che occupi tutto lo spazio ad esso designato, e uno a dx con il grid dei vari item che vedi sotto la foto grossa nel sito attuale (http://francescaleso.com/it/).

    Vorrei che l'immagine occupasse tutto lo spazio verticale visibile senza scrollare in giù, come da screen.

    --------------edit
    pare che il template abbia bootstrap 2.3.2 quindi ho usato span4 e span8... la sostanza c'è ma i due div non sono alti a sufficienza, quello che desidero èche l'utente entrando sul sito veda la foto a sx e gli item a dx a fullscreen, e sotto (se scrolla) il resto.
    Ultima modifica di a94; 03-07-2017 a 16:08

  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Ciao, grazie per la risposta.
    Il sito lo sto realizzando io, per altri, ma ogni suggerimento sul css è ben accetto.
    Quello che vorrei realizzare è appunto una home che a prima vista sia interamente coperta (verticalmente) da un'immagine a sx e dai div con immagini circolari a dx. Position absolute applicato ai due div (ho fatto una prova due giorni fa prima di assegnare le col di bootstrap ai rispettivi div) va a coprire la totalità del sito, coprendo anche i contenuti in main e footer,mentre io vorrei che questi fossero visibili una volta scrollato verso il basso.
    Insomma, quello che vorrei ottenere è proprio il risultato del secondo screen, e vorrei che fosse responsive (per pc e tablet, mentre per mobile farei un modulo a se con solo gli 8 div con immagini a border-radius:50).

  4. #4
    Utente di HTML.it L'avatar di tigerjack
    Registrato dal
    Aug 2003
    Messaggi
    1,661
    Ciao,
    usa il componente Page Builder per realizzare queste cose, dove hai già delle griglie di impaginazione pronte nella versione base.

    Perché - anche se non ho la certezza matematica - che riusciresti senza il pagebuilder a realizzare quella griglia... senza smembrare il template di un CMS

    Ti consiglio in seconda ipotesi, se il sito non è complesso prendi un progetto bootstrap nativo.

    ciao
    figlio perso e MAI ritrovato....?

  5. #5
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Quote Originariamente inviata da tigerjack Visualizza il messaggio
    Ciao,
    usa il componente Page Builder per realizzare queste cose, dove hai già delle griglie di impaginazione pronte nella versione base.

    Perché - anche se non ho la certezza matematica - che riusciresti senza il pagebuilder a realizzare quella griglia... senza smembrare il template di un CMS

    Ti consiglio in seconda ipotesi, se il sito non è complesso prendi un progetto bootstrap nativo.

    ciao
    Ciao, potresti scendere più nel dettaglio?

    Per _Marco_87: sono riuscito a rendere le due col di uguale altezza seguendo l'opzione 2 di questo link:

    https://scotch.io/quick-tips/differe...he-same-height

    Tuttavia ancora non sono riuscito a far coprire alla row la totalità (verticale) della pagina.

    Idee?

  6. #6
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Ciao, dall'esempio da te fornitomi non riesco a vedere l'immagine... comuque basterebbe utilizzare un'altra immagine con proporzioni più consone?

  7. #7
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    o meglio: da trytit funziona perfettamente, ma implementandola in un modulo derivato dal precedente (ora unpublished)non trova l'img oltre a andare ad accavallarsi al contenuto sottostante.
    Mi scuso ma sono un novizio e quel che per lei pu� apparire scontato per me non lo �

  8. #8
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Ciao, è possibile assegnare l'attributo come override? Altrimenti non so come agire all'interno del plugin (ti riferisci al framework adottato dal template?).

    Ad ogni modo da F12 ho fatto delle prove ed effettivamente va tutto a posto meno la sezione di destra, anche assegnando height:100% a span8...

    ---edit---

    Inserendo gli attributi come override alcuni non vengono applicati, nella fattispecie "jm-module-content clearfix notitle" non viene riconosciuta
    Ultima modifica di a94; 04-07-2017 a 14:13

  9. #9
    Utente di HTML.it L'avatar di tigerjack
    Registrato dal
    Aug 2003
    Messaggi
    1,661
    Quote Originariamente inviata da a94 Visualizza il messaggio
    Ciao, potresti scendere più nel dettaglio?
    Ciao direttamente dalla JED https://extensions.joomla.org/extens...-page-builder/
    figlio perso e MAI ritrovato....?

  10. #10
    Utente di HTML.it
    Registrato dal
    Jul 2017
    Messaggi
    18
    Buongiorno, momentaneamente sono tornato all'impostazione precedente, tuttavia da quando ho modificato quelle classi, su mobile il componente utilizzato per la gallery home da problemi: la descrizione nelle immagini risulta tagliata a destra e con una qualche position strana, senza che io abbia toccato le classi relative a questa particolare gallery. Non so se sia il caso chiederlo qui, ma visto il supporto della suddetta estensione sino ad ora latitante... se avete qualche idea su come risolvere il problema ne farò tesoro

    http://francescaleso.com/it/
    Ultima modifica di a94; 07-07-2017 a 16:23

Tag per questa discussione

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.