strscia e box

**WeB VaLiDaToR** · 13-05-2006, 22:38

ragzzi io vorrei organizzare un layout cosi fatto:

come faccio??

**Fello** · 14-05-2006, 14:09

le soluzioni potrebbero essere tante, magari se lasci qualche altra informazione in più....

i contenuti dove andranno messi?
La striscia blu scuro deve contenere qualcosa o è semplicemente un elemento di layout?
Il box centrale deve allungarsi?

**WeB VaLiDaToR** · 15-05-2006, 07:28

Originariamente inviato da Fello
le soluzioni potrebbero essere tante, magari se lasci qualche altra informazione in più....

i contenuti dove andranno messi?
La striscia blu scuro deve contenere qualcosa o è semplicemente un elemento di layout?
Il box centrale deve allungarsi?

1) i contenuti andranno messi nel box grigio centrale

2)la striscia blu scuro NON deve contenere nulla...è un semplice elemento

3)no il box centrale deve avere una dimensione fissa

mi aiutate?

**WeB VaLiDaToR** · 16-05-2006, 07:02

che mi dite

?

**Mich_** · 16-05-2006, 08:33

Faccio un tentativo.

codice:

<body>
  <div id="sfondo">
    <div id="fascia"> </div>
  </div>
  <div id="primop">
    <div id="semitr">
      

qui il tuo contenuto</p>
    </div>
  </div>
</body>

Con il CSS

codice:

#html, body {
  width: 100%;
  height: 100%;
  font-size: 100%;
}
#sfondo, #primop {
  width: 400px;
  height: 300px;
  position: absolute;
  top:0; left:0;
}
#sfondo { z-index: 10; }
#primop { z-index: 20; }

#fascia {
  position: absolute;
  left:0; top:150px;
  background: blue;
  width: 100%;
  height: 50px;
}
#semitr {
  positon: absolute;
  left: 100px; top: 50px;
  width: 200px;
  height: 150px;
  background: transparent url(semitr.gif) repeat;
  color: black;
}

Le misure sono molto approssimate, basate sulla tua immagine.
Ho usato tutto misure assolute.
Devi avere un file .gif di pochi px che da` l'effetto semitrasparente.
Infatti nei CSS2 la semitrasparenza ancora non c'e`, anche se alcuni browser la riconoscono (con sintassi proprietarie).

Discussione: strscia e box

Strumenti discussione

Ricerca discussione

Visualizza

strscia e box

Permessi di invio