PDA

Visualizza versione completa : Header con 2 aree


Alhazred
16-12-2008, 15.02.02
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)
http://img242.imageshack.us/img242/1345/bannerjz2.th.jpg (http://img242.imageshack.us/my.php?image=bannerjz2.jpg)

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?

Mass8
16-12-2008, 15.55.51
ho una piccola riminiscenza: ma i frame non si usano +?

Alhazred
16-12-2008, 16.03.16
Boh, vedo la gente storcere il naso quando si parla di layout con i frame.

Alternativa: posso mettere tutte e 2 le immagini all'interno del div header esistente in modo che si affianchino una all'altra allineate a destra, senza che si sovrappongano? Come?

Mass8
16-12-2008, 16.20.57
hai provato con un editor a vedere lui come lo fa?

Alhazred
16-12-2008, 18.19.33
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;"> <!-- questo il div evidenziato -->
<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;
}


Come allineo i div?

Alhazred
16-12-2008, 18.43.48
Ho risolto togliendo il div
<div style="width:937px; float: right; margin: 20px 20px 0 0;">