problema con heeader a due colori

**valeriadesigner** · 09-01-2010, 16:11

Buonasera a tutti
vi posto con la speranza che possiate darmi un supporto, confido nella vostra conoscenza.
Arrivo al sodo senza perdermi in chiacchiere, vorrei creare un header elastica che si estenda su tutta la larghezza della finestra del browser. L'header in questione è bicolore, il lato sinistro è grigio e il lato destro e rosso, il passaggio dei due colori e' reso da un elemento grafico posto al centro della barra. Al fine di chiarire il concetto allego immagine. Il quesito è "come la creo in CSS??"

Sto impazzendo ho già fatto svariati tentativi ma invani..l'unica soluzione al mio problema siete voi!!

Grazie
Saluti a tutti
Valeria

**valeriadesigner** · 09-01-2010, 16:45

una precisazione utile la struttura del template dovrebbe essere come quella di facebook, quindi header che si estende per tutta la larghezza e la pagina centrata.
Grazie

**LA VALE** · 09-01-2010, 17:31

Non so se sia la soluzione giusta e fattibile, però forse potresti provare con tre immagini:
- barra grigia
- barra rossa
- pezzo di transizione

Il pezzo di transizione deve rimanere fisso al centro, mentre i lati devono potersi allargare al 100%, utilizzando quindi tre div affiancati.

**valeriadesigner** · 10-01-2010, 13:00

Se imposto i due div al 100% l'ultimo mi si sposta sotto!! Possibile che non ci sia una soluzione che debba rinunciare alla mia barra???

**miki003** · 10-01-2010, 13:23

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#header {
	clear: both;
	width: 100%;
}
#header1 {
	background-color: #333;
	float: left;
	width: 69%;
}
#header2 {
	background-color: #FFF;
	float: left;
	width: 1%;
}
#header3 {
	background-color: #F00;
	float: left;
	width: 30%;
}
#header4 {
	clear:both;
}
-->
</style>
</head>

<body>
<div id="header">
      <div id="header1"></div>
      <div id="header2"></div>
      <div id="header3"></div>
      <div id="header4"></div>
</div>
</body>
</html>

Ovviamente il background lo puoi sostituire cn delle immagini se vuoi

**valeriadesigner** · 11-01-2010, 17:56

grazieeeeeeeeee provo subito il codice, Se funziona tornero' per i ringraziamenti

**valeriadesigner** · 11-01-2010, 23:42

Ho provato il codice e la barra bicolore elastica viene generata. La mia esigenza, pero' nello specifico è quella di avere logo + scritta posizionati sulla barra in quanto la pagina cosi' come accade in facebook deve avere una larghezza fissa, ossia ottimizzata per una risoluzione 1024X768. Oltre la barra ho creato dei div, uno con il logo e l'altro con la scritta ma li mette in basso, come faccio a sovrapporli alla barra e tenerli fissi??
Mi dispiace farvi tutte queste domande ma è da poco che studio i css e non pensavo fosse cosi' complicato montare un template che ho già mostrato al cliente e che è piaciuto!! Ora devo trovare una soluzione per il montaggio affinchè sia fedele a cio' che ho presentato.
Spero possiare comprendermi

Discussione: problema con heeader a due colori

Strumenti discussione

Ricerca discussione

Visualizza

problema con heeader a due colori

Permessi di invio