[Risolto] Allineamento moduli

[vales]

Ho installato Joomfish e vorrei visualizzare, nel template accessibile, il modulo di scelta linguaggi in una delle seguenti posizioni breadcrumb o banner o user3 all'estrema destra dopo gli altri moduli presenti.

Ottengo però sempre la visualizzazizone in basso sotto il modulo già presente nelle posizioni sopra indicate.

Ho provato a modificare in vari modi i css ed il template con l'inserimento di nuove posizioni senza risultati.

Potri metterlo nella posizione right, ma volevo utilizzare meglio lo spazio della parte alta del template.

Qualcuno sa darmi una dritta ??

Vales

[Jos]

Nel css prova ad aggiungere il parametro
 

Codice: [Seleziona]

float: right;

[vales]

Non funziona. I moduli vanno tutto a destra ma su due righe.

Il codice del template è questo:

Codice: [Seleziona]

<?php if ($this->countModules('user3')) { ?>
            <div id="menu-top">
                <div class="padding">
                <jdoc:include type="modules" name="user3" style="xhtml" />
                </div>
            </div>
            <?php } ?>
Questo il CSS associato

Codice: [Seleziona]

div#menu-top .moduletable {
padding-left: 0;
margin-bottom: 0;
}


div#menu-top .padding, div#footer .padding{
    padding-top: 0;
    padding-bottom: 0;
}

[Jos]

Sì, è normale perché il float lo hai applicato ad un solo div che include tutti e due i moduli. Io proverei a:ù

- creare una nuova posizione tipo user4, ti basta aggiungere sotto il div dello user3:

Codice: [Seleziona]

<?php if ($this->countModules('user4')) { ?>
            <div id="menu-top">
                <div class="padding">
                <jdoc:include type="modules" name="user4" style="xhtml" />
                </div>
            </div>
            <?php } ?>
- guarda che joomfish non usi un suo css e nel caso controlla la parte che formatta la posizione del modulo

- nel caso non funzioni nessuna delle due, riprova con la prima aggiungendo il float: right; solo al primo div del modulo user3

Non sono un esperto in css ma di solito questi accorgimenti mi risolvono problemi come il tuo...magari però c'è qualche soluzione più elegante

[vales]

Ti ringrazio per i suggerimenti.
Ho provato in tutti i modi ma non funziona.
Ho controllato anche il css di joomfish e nei settaggi del modulo ho scelto di disalibitare il css.
 
Ho sostituito anche i div con spam, che non crea nuove righe come il div, ma senza risultati.

Il mio obiettivo è quello di avere i due moduli sulla stessa riga.

[tonicopi]

Un link al sito?

[vales]

Eccolo qui

Grazie.

[tonicopi]

Scrivi questo comando in layout.css

Codice: [Seleziona]

#jflanguageselection { float:right}

[vales]

Fatto. E'andato a destra, ma sempre sulla riga superiore.

[tonicopi]

ma sempre sulla riga superiore.

Con IE ma con FF no
Ma mi sembra un difetto  da poco. Si potrebbe eliminare dividendo in due quel div che racchiude la posizione moduli e creando un'altra posizione moduli. Una cosa del genere:

Codice: [Seleziona]

<div contenitore> 
                <div destra>
modulo menù
                  </div>

              <div sinistra>
modulo joomfish
 </div>
</div>

[vales]

Tonicopi, grazie per la tua dritta fondamentale che mi ha messo sulla strada giusta.

Il problema era il "menu top" che occupava tutto lo spazio a disposizione.

Ho risolto con questo codice aggiunto al tuo nel css

Codice: [Seleziona]

#jflanguageselection { float:right}
.moduletable_menu {width: 60%;}

Sei un grande come sempre.

Vales

[tonicopi]

Credi di aver risolto! Con FF2 il modulo principale si riduce anch'esso al 60%.
Con IE6 va peggio. Vedi l'allegato.

[allegato eliminato da un amministratore - Il file era vecchio]

[vales]

Ho avuto fretta. Ulteriore modifica.

Codice: [Seleziona]

#jflanguageselection { float:right;}
#jflanguageselection img{ vertical-align: middle;}
div#menu-top .moduletable_menu {width: 60%;}

OK con FF3, Chrome e IE7. Gli altri ?

[tonicopi]

Con FF2 ok
Con IE6 tutto come prima salvo che per il menù principale che è andato a posto. IE6 è un a brutta bestia
Potresti provare a mettere width in pixel

Codice: [Seleziona]

div#menu-top .moduletable_menu {width: 700px;}perchè IE6 lo manda a capo al 60% della strada che trova libera...

[vales]

Forse aumentando qualche punto in % la width dovrebbe andare a posto mi sembra ci sia del margine disponibile.

Ora provo ma non potrò verificare di persona perchè non ho più IE6.

Ancora OK con FF3, Chrome e IE 7.

Questa prova è con width: 70%; posso arrivare anche 75%

[vales]

Ci siamo incrociati con i post.

[tonicopi]

non lo devi mettere in percentuale ma in pixel

[vales]

Punto situazione dopo nottata.

Ho settato width a 700px ed è saltato tutto.
Ho riportato width a 70% e (mistero prima funzionava) non ha più funzionato.

Ho fatto allora dei controlli sia con Aardvark e CSSviewer (non so se c'e qualche visore migliore) ed ho visto che c'era una classe .moduletable sulle bandierine che prima non avevo visto ed ho allora inserito un float: right per metterla a destra.

Ora sta viaggiando così

Codice: [Seleziona]

#jflanguageselection { float: right;}
#jflanguageselection img{ vertical-align: middle;}
div#menu-top .moduletable {float: right;}
div#menu-top .moduletable_menu {width: 700px;}
Ancora OK con FF3, Chrome e IE 7.
Funziona con tutti anche con width: 70%;

[tonicopi]

Bene con FF2 e Opera.
Con IE6 siamo quasi a posto. Adesso va solo a capo l'ultimo link del menù perchè non riconosce la riduzione all'80% dei font e li scrive troppo grandi. Prova a mettere una dimensione in pixel qui:typography.css (line 41)

Codice: [Seleziona]

div#menu-top .moduletable_menu {
width:700px;
font-size:12px;
}
Per studiare i codici e non solo dopo aver provato quelli che citi tu io uso la web developer toolbar e firebug. L'ultimo è impareggiabile :)Peccato che ancora non sia disponibile per FF3. Per quello uso ancora la verisone 2

[vales]

Ho ridotto il font come suggerito.
Se necessario penso che ora si possa ridurre anche il width 700px;

Ho cercato Firebug ed ho visto che ora va anche su FF3.

Grazie per la dritta.