[Html/CSS] Header con 2 aree

[Alhazred]

Ho un problema con un 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 2 aree adiacenti? Una composta sulla sinistra dal solo sfondo e allineata a destra la gif animata, l'altra con l'immagine statica, il tutto in modo che venga come l'immagine qui sotto (ho evidenziato in rosso le varie aree, la prima è lo sfondo, la seconda è la gif animata e l'ultima è l'immagine statica, le prime 2 in realtà andrebbero in un unica area)


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

Potreste aiutarmi?

[FixFixFix]

crea un div della grandezza della somma delle due immagini, e all'interno due div ognuno con le dimensioni delle singole immagini. Poi usi le proprietà marginright : 0 per il div di destra e marginleft : 0 per il div di sinistra.
nel div di destra devi settare float:right

prova così poi posta il codice , se ho tempo ci guardo

[FixFixFix]

se quella + a sinistra non deve stare tutto a sinistra ma affiancata a quella tutta a destra, togli la proprietà marginleft e metti float:right anche a quella ma senza settare il margine.occhio all'ordine con cui inserisci i div nel codice

[Alhazred]

Grazie per la risposta.
Allora, il codice ora è così

<div id="header">
   <div style="width:937px; float: right; margin: 20px 20px 0 0;">
      <div id="header_img" width="538px">
         <div id="header_img1" width="286px"></div> <!-- gif animata da affiancare alla sinistra di quella nel div qui sotto -->
         <div id="header_img2" width="252px"></div> <!-- gif statica da posizionare all'estremità derta dell'header -->
      </div>
   </div>
</div>

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

#header_img1 { /*è l'immagine da affiancare sulla sinistra di quella qui sotto */
	background: url(../images/h_banner.png);
	float: rigth;
}

#header_img2 { /*è l'immagine che va ll'estremità destra */
	background: url(../images/h_img.png);
	float:right;
	margin-left: 0;
}

Le immagini però non appaiono. I nomi dei file ed i percorsi sono corretti.
Controllando la pagina con aardvark, i div che ho inserito ora non vengono rilevati, sebbene guardando con firebug il relativo codice è presente... ma scritto come più sbiadito rispetto al codice del resto della pagina.

In alternativa è possibile inserire le 2 immagini affiancate all'interno di un unico div header?

[MasterDany]

Le unisci con un programma o le metti nell' (x)html

[Alhazred]

Originariamente inviato da Alhazred

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

Cosa vuoi dire con "le metti nell'(x)html"?

[FixFixFix]

margin-right : 0

[FixFixFix]

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

#header_img1 { /*è l'immagine da affiancare sulla sinistra di quella qui sotto */
background-image: url('DSCN1888.JPG');
background-repeat: no-repeat;
float : right;
border: solid;
border-color : green;
border-width : 1px;
width : 284px;
height : 89px;
}

#header_img2 { /*è l'immagine che va ll'estremità destra */
background-image : url('DSCN2360.JPG');
background-repeat: no-repeat;
margin-right: 0;
float:right;
border: solid;
border-color : blue;
border-width : 1px;
width : 250px;
height : 89px;
}






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

<div id="header_img1" ></div>
<div id="header_img2" ></div>

</div>
</div>



così funziona, rimetti le tue immagini, togli i border e ripristina le dimensioni originali. Le dimensioni dei div vanno messe nel css

[Alhazred]

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



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 { /*è l'immagine da affiancare sulla sinistra di quella qui sotto */
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 { /*è l'immagine che va ll'estremità destra */
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;
}

[FixFixFix]

togli il div intermedio tra header e quelli delle immagini, e metti il width=937 al div "header"

[Alhazred]

Fantastico, grazie mille!!!