Header con 2 aree

[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 2 aree adiacenti? Una composta sulla sinistra dal solo sfondo e allineata a destra la gif animata, e 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?

[ricman]

Originariamente inviato da Alhazred
le dimensioni delle 2 immagini sono:
- gif animata 286x91
- immagine statica 252x91

Potreste aiutarmi?

Due immagini le puoi affiancare così:
<img 1 ... /><img 2 ... />

e sen ti riesce puoi provare così:
<img 1 ... style="float: left;" />
<img 2 ... style="float: left;" />

...tutta quella roba che scritto non sono stato a leggerla.. fai sapere se funziona

[lila89]

ciao, basta che costruisci di in tutto 3 div... uno header, uno cont1 e cont2... e poi vai a inserire il tag dell'immagine all'interno dei div che allinerai con float:

<div class="header">
<div class="cont1">
<img...>
<\div>
<div class="cont2">
<img...>
<\div>
<\div>

propriertà header:

margin:0px;
padding:0px;

proprietà cont1 e cont 2

margin:0px;
display:inline;
padding:0px;
float:right;

il display inline è per IE6

[Alhazred]

La situazione ora è questa:

<div id="header">
	<div style="width:937px; float: right; margin: 20px 20px 0 0;">
		<div class="cont1">
			[img]images/h_banner.gif[/img]
		</div>
		<div class="cont2">
			[img]images/h_img.gif[/img]
		</div>
		<div id="newsflash">
			<jdoc:include type="modules" name="top" style="rounded" />
		</div>
	</div>
</div>

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

.cont1, .cont2 {
   margin:0px;
   display:inline;
   padding:0px;
   float:right;
}

Ma le immagini non appaiono proprio. Il percorso e il nome delle immagini è giusto.

[Alhazred]

Ho provato anche senza creare i 2 div, ovvero così

<div id="header">
	<div style="width:937px; float: right; margin: 20px 20px 0 0;">
		[img]/images/h_banner.gif[/img]
		[img]/images/h_img.gif[/img]
	</div>
</div>

Ma con lo stesso risultato, le immgini non appaiono.

[ricman]

Originariamente inviato da Alhazred
Ho provato anche senza creare i 2 div, ovvero così

<div id="header">
	<div style="width:937px; float: right; margin: 20px 20px 0 0;">
		[img]/images/h_banner.gif[/img]
		[img]/images/h_img.gif[/img]
	</div>
</div>

Ma con lo stesso risultato, le immgini non appaiono.

Se non appaiono non è mica un problema di allineamento... Devi controllare meglio i percorsi e/o le Maiuscole/minuscole

[lila89]

1) domanda stupida.. ma non si sa mai... dove hai la cartella images?

2) hai lasciato alcuni attributi obbligatori! un immagine "completa" im minima forma è così:

[img]images/sponsor.JPG[/img]

3) se continua a non vedertele prova a metterne una in formato jpg per vedere se quella te la vede (e quindi errore di formato) o errore di percorso\collegamento .

[Alhazred]

I link erano giusti, adesso ho questo come risultato


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?

[ricman]

Originariamente inviato da Alhazred
Come allineo i div?

L'allineamento si fa col Float. L'hai usato... (di solito si usa left...)

[Alhazred]

Ho tolto direttamente questo div
<div style="width:937px; float: right; margin: 20px 20px 0 0;">
e adesso è tutto ok.
Grazie per le risposte