Joomla.it Forum

Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : Alhazred 16 Dec 2008, 02:48:50

: Header da 3 riquadri
: Alhazred 16 Dec 2008, 02:48:50

Ho un problema con l'header che non riesco a risolvere... di certo è colpa mia che con i layout tableless sono ancora alle prime armi.
Dovrei mettere nell'header 2 immagini diverse affiancate, una è una gif animata, l'altra è un'immagine statica. Per ora ho risolto attaccando le due immagini e facendo venir fuori un'immagine in un unico file, ma è venuta da quasi 1,5MB quindi non va bene, la gif animata da sola è 62KB e l'altra 13KB, per questo credo sia meglio lasciarle separate.
Come faccio a creare un header con 3 spazi? Uno col solo sfondo, uno con la gif animata e l'altro con l'immagine statica in modo che venga come l'immagine qui sotto
(http://img242.imageshack.us/img242/1345/bannerjz2.th.jpg) (http://img242.imageshack.us/my.php?image=bannerjz2.jpg)
In realtà forse basterebbero 2 spazi soltanto, i primi 2 penso si possano unire a formarne solo uno e metterei l'immagine allineata a destra.

Questo è il codice attuale dell'header

:

<div id="header">
<div style="width:937px; float: right; margin: 20px 20px 0 0;">
<div id="newsflash">
<jdoc:include type="modules" name="top" style="rounded" />
</div>
</div>
</div>
Questo è il codice css

:

#header {
   height: 91px;
   background: #d0d0e0 url(../images/banner.gif) top right no-repeat;
   margin: 10px auto;
   width: 937px;
   padding: 0;
}
le dimensioni delle 2 immagini sono:
- gif animata 286x91
- immagine statica 252x91

: Re: Header da 3 riquadri
: ramses_2th 16 Dec 2008, 11:52:09

Ciao, ma on capisco la dimensione del file di 1,5mb.

Se la gif animata ha pochi frame, lo fondi con l'iimagine statica, creandoti la gif animata dalle dimensioni che ti serve.

Ho provato a fare una cosa del genere il tutto mi  risulta 101k ... ( il che dovrebbe essere accettabile).

Ciao

: Re: Header da 3 riquadri
: Alhazred 16 Dec 2008, 16:45:34

La gif animata è di 115 frame.
Come ho scritto nel primo post l'ho già fusa con l'altra immagine ed è venuto fuori il file da 1,5MB.

: Re: Header da 3 riquadri
: Alhazred 16 Dec 2008, 17:33:12

Altra idea: è possibile mettere 2 immagini dentro il div header allineate tutte e 2 a destra in modo che restino affiancate senza sovrapporsi?
Come faccio?

: Re: Header da 3 riquadri
: Alhazred 16 Dec 2008, 20:17:57

Ci siamo quasi, ora si tratta di allineare i div, il risultato che ho ora è questo
(http://img114.imageshack.us/img114/2306/banner1hh8.th.jpg) (http://img114.imageshack.us/my.php?image=banner1hh8.jpg)

i codici sono questi

:

<div id="header">
   <div style="width:937px; float: right; margin: 20px 20px 0 0;">
      <div id="header_img1" ></div>
      <div id="header_img2" ></div>
   </div>
</div>


:

#header {
height: 91px;
background-color: #d0d0e0;
margin: 10px auto;
width: 937px;
padding: 0;
border: none;
border-width : 0px;
}

#header_img1 {
background-image: url('../images/h_img.gif');
background-repeat: no-repeat;
float : right;
border: none;
border-width : 0px;
margin-top: 0;
width : 252px;
height : 91px;
}

#header_img2 {
background-image : url('../images/h_banner.gif');
background-repeat: no-repeat;
margin-right: 0;
margin-top: 0;
float:right;
border: none;
border-width : 0px;
width : 268px;
height : 91px;
}

Come allineo i div?