Header da 3 riquadri

[Alhazred]

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

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

Codice: [Seleziona]

<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

Codice: [Seleziona]

#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

[ramses_2th]

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

[Alhazred]

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.

[Alhazred]

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?

[Alhazred]

Ci siamo quasi, ora si tratta di allineare i div, il risultato che ho ora è questo


i codici sono questi

Codice: [Seleziona]

<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>


Codice: [Seleziona]

#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?