Back to top

Autore Topic: Problema margini fra moduli.  (Letto 2832 volte)

Offline Th3_p3n1sh3r

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Problema margini fra moduli.
« il: 23 Ago 2012, 17:12:48 »
Salve a tutti. Sono alla mia prima esperienza con Joomla quindi portate pazienza se me ne vengo fuori con qualche assurdità. Sto mettendo in piedi un sitarello per un festival musicale locale e vorrei sistemare una cosa: In questa pagina vorrei che il modulo con i contatti social e del nome della band della band "eva" risultassero attaccato al modulo "simple spotlight" un po' come succede per le due band sotto (soltanto che in questo caso si tratta di video di youtube con codice embeddato usando "crea nuovo modulo html personalizzato") Immagino si tratti di qualche problema di margini...Come faccio ad editarli per ridurre il gap a 0px?

vi fornisco le due righe di codice del modulo contatti social (creato sempre da me attraverso "html personalizzato") - NOME MODULO: INTESTAZIONELIVE8
Codice: [Seleziona]
<p style="text-align: center;"><img src="images/8_SET.jpg" width="600" height="120" alt="8 SET" /><br /><br /><a href="http://www.facebook.com/we.are.eva" target="_blank"><img src="images/chipartecipa/MAIN_EVENTS/facebook_1mezzo.jpg" width="298" height="40" alt="facebook 1mezzo" style="margin: 0px; border: 0px solid #000000;" onmouseout="this.src='images/chipartecipa/MAIN_EVENTS/facebook_1mezzo.jpg';" onmouseover="this.src='images/chipartecipa/MAIN_EVENTS/facebook_1mezzoP.jpg';" /></a><a href="http://www.evarock.it/EVA_ROCK_-_HOME.html" target="_blank"><img src="images/chipartecipa/MAIN_EVENTS/website_1_mezzo.jpg" width="298" height="40" alt="website 1 mezzo" style="margin: 0px; border: 0px solid #000000;" onmouseout="this.src='images/chipartecipa/MAIN_EVENTS/website_1_mezzo.jpg';" onmouseover="this.src='images/chipartecipa/MAIN_EVENTS/website_1_mezzop.jpg';" /></a></p>e del modulo con il nome della  band (creato sempre allo stesso modo) NOME MODULO:EVA NOME
Codice: [Seleziona]
<p style="text-align: center;" margin-top: "0px;"><img src="images/chipartecipa/MAIN_EVENTS/EVA.jpg" width="596" height="99" alt="EVA" style="margin: 0px; border: 0px solid #000000;" /></p>qui invece c'è uno screenshot con le impostazioni generali del modulo simple spotlight (che è posizionato in mezzo ai precedenti) http://i.imgur.com/lo0fX.png

In sostanza: come faccio a ridurre al minimo lo spazio fra questi 3 moduli creando un effetto visivo simile alle band successive?

Vi ringrazio in anticipo.


« Ultima modifica: 24 Ago 2012, 17:40:28 da Th3_p3n1sh3r »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #1 il: 23 Ago 2012, 18:14:06 »
il link del sito può essere reso disponibile?
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Th3_p3n1sh3r

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo

Offline Th3_p3n1sh3r

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #3 il: 23 Ago 2012, 22:43:08 »
Nessuno che mi aiuta?

Offline Cereal___killer

  • Appassionato
  • ***
  • Post: 287
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #4 il: 24 Ago 2012, 05:19:07 »
Ho capito il problema; i 3 moduli quando vengono tradotti dal server in html e inviati, vengono inglobati dentro i tag <p> e </p>, pertanto risultano ovviamente separati...


Ci sarebbe bisogno di sapere come questi moduli sono stati integrati; la mia supposizione è che tu abbia inserito un articolo che richiama i moduli attraverso la loro posizione con il codice {loadposition posizione}
e cioé la tua pagina è una cosa del genere:


{loadposition social_1}
{loadposition gallery}
{loadposition eva}


{loadposition social_2}
(codice del video youtube)
{loadposition my_tie_is_evil}


...




E' corretto?


Proverei a sistemare alla bell'e meglio così:
i primi 3 moduli li togli dall'articolo e al loro posto ci metti il richiamo ad un modulo html personalizzato fatto così:


<div id="mypos_top">{loadposition social_1}</div>
<div id="mypos_middle">{loadposition gallery}</div>
<div id="mypos_bottom">{loadposition eva}</div>


In pratica questo modulo html personalizzato contiene i 3 moduli da allineare, però ficcati dentro dei div con un ID


ora vai nel css del tuo template e gestisci la posizione dei div con position absolute aggiungendo i 3 ID:



#mypos_top{
   position:absolute;
   left: 45px;
   top: 45px;
}



#mypos_middle{
   position:absolute;
   left: 45px;
   top: 45px;
}



#mypos_bottom{
   position:absolute;
   left: 45px;
   top: 45px;
}


ovviamente i valori left e top in cui ho scritto 45 px, vanno in ognuno dei 3 sostituiti in modo che il modulo compaia nella posizione desiderata e che non vi sia più gap tra di essi...
« Ultima modifica: 24 Ago 2012, 05:21:46 da Cereal___killer »
No way as a way,
   no limit as a limit...

Offline Th3_p3n1sh3r

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #5 il: 24 Ago 2012, 17:37:24 »
Allora, porta pazienza se non ti rispondo in maniera appropriata ma a quanto pare ne sai molto più di me  :D
Ad ogni modo (parlo del primo blocco di 3 moduli - quello problematico) Ho inserito il primo e terzo modulo in questo modo (administration-> gestione moduli-> nuovo modulo-> html personalizzato) ed inserendo le immagini tramite semplicissimi tag di formattazione html attraverso JCE, Il risultato lo vedi codificato nelle due  sezioni di codice postate nell'Op) ed ordinandoli con l'apposita funzione del pannello di gestione del modulo.
Il secondo modulo (lo slider fotografico) l'ho ottenuto da J! extensions e credo sia piuttosto famoso - si chiama Simple Spotlight e l'ho chiamato FOTO EVA.
C'è Anche da notare (non so se sia rilevante) che per la band Eva (l'unica che non ha un video da postare e che mi obbliga a questo calvario) il loro "pacchetto" è composto da tre moduli differenti come vedi qui evidenziato in giallo http://i.imgur.com/O6wpe.png mentre per le successive due band il modulo è uno solo (evidenziato in rosso e creato sempre con il metodo html personalizzato visto che disponevo direttamente del codice da embeddare fornito da youtube da inserire direttamente nell'html personalizzato - cosa che sarebbe bello fare anche con simple spotlight o magari qualche servizio che offra uno slider di immagini personalizzabile - e img hosting per cui venga fornito un codice iframe da consentire l'embed, ma non ne trovo)

Con le informazioni che ti ho dato cambiano le carte in tavola?
Grazie per il tempo che intendi dedicarmi.

edit:ho aggiunto alle sezioni di codice nell'OP il rispettivo nome del modulo per orientarsi meglio.
« Ultima modifica: 24 Ago 2012, 17:48:06 da Th3_p3n1sh3r »

Offline Cereal___killer

  • Appassionato
  • ***
  • Post: 287
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #6 il: 24 Ago 2012, 17:48:30 »

No, prova a farti un quarto modulo html personalizzato come ti ho indicato sopra, ovvero mettendo i 3 moduli precedenti dentro dei div e poi aggiungendo le regole css nel template... Dovrai andare un po' per tentativi ma riuscirai a posizionarli come voluto...




Se vuoi usare esattamente il codice che ti ho postato facendo copia e incolla diretto nel nuovo modulo che devi creare, devi prima modificare le posizioni dei 3 vecchi moduli (ora li hai posizionati tutti in "position-2", mentre devi posizionarli rispettivamente in "social-1", "gallery" e "eva").
Da notare che puoi ovviamente usare i nomi che preferisci per le posizioni (non devono essere posizioni del tuo template, bensì posizioni inventate che NON esistono nel template), l'importante è che nel 4 modulo che vai ora a creare, le ripeti uguali ;)




In sostanza il codice {loadposition nome_posizione} non fa altro che caricare in quel preciso punto il modulo che si trova pubblicato nella posizione "nome_posizione.
In realtà volendo i moduli si possono anche caricare per nome invece che per posizione con {loadmodule nome_modulo}, ma è una scelta...


Infine la classe CSS per i div dentro a cui vengono caricati i moduli, va a definirne lo stile... In particolare position:absolute, rimuove il div dal flusso e lo posiziona esattamente dove indicato nei due parametri sotto (nell'esempio che ti ho indicato a 45 pixel dal bordo superiore e a 45 pixel dal bordo sinistro)... Ovvio che i valori vanno poi impostati correttamente per ognuno dei 3 (es.: facciamo finta che per centrare i moduli orizzontalmente al centro del mainbody la distanza dal bordo sinistro debba essere 30 pixel, allora per tutti e tre gli ID il valore di left sarà 30px;


Facciamo poi finta che il corretto posizionamento in verticale si ottenga con una distanza dal bordo superiore di 50 pixel, che il primo modulo sia alto 60 pixel, il secondo sia alto 350 pixel e il terzo 80 pixel... In questo caso i valori di top saranno:


per mypos_top   50px
per mypos_middle   50+60=110px
per mypos_bottom  50+60+350=460px)


Spero di essermi spiegato... In ogni caso tali valori non li puoi calcolare prima.. Cominci col posizionare il primo div dove vuoi tu... Dopodiché sai che negli altri due il valore di left resta tale e quale, mentre quello di top lo regoli di conseguenza andando per tentativi...
« Ultima modifica: 24 Ago 2012, 17:59:25 da Cereal___killer »
No way as a way,
   no limit as a limit...

Offline Th3_p3n1sh3r

  • Nuovo arrivato
  • *
  • Post: 10
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #7 il: 24 Ago 2012, 17:56:37 »
Ok grazie provo a cimentarmi e se riesco a combinare qualcosa sarete i primi a saperlo!

Offline Cereal___killer

  • Appassionato
  • ***
  • Post: 287
    • Mostra profilo
Re:Problema margini fra moduli.
« Risposta #8 il: 24 Ago 2012, 18:03:53 »
Sì, al limite poi se vuoi mi fai un account temporaneo per poter accedere al backend e te lo sistemo, visto che mi pare una cosa semplice (uso il condizionale perché la vita insegna che non si sa mai ;) )
No way as a way,
   no limit as a limit...

 



Web Design Bolzano Kreatif