Impostazione layout

[Valeria75_bis]

Ciao a tutti, ho creato un'immagine relativa alla struttura di un layout (molto semplice) che vorrei utilizzare, ora vorrei "trasformarla" in css ma ho qualche problema con i posizionamenti.

Nel dettagllio vorrei avere nel contro della pagina (orizzontale e verticale), un box lungo 950px e contenente questi elementi:

immagine

questa struttura dovrà essere riempita poi con vari content, quindi sarebbe lo scheletro:

nell'area menu inserirò il menu
nell'area content ovviamente il contenuto
nell'area immagine un'immagine diversa per ogni contenuto

Potete aiutarmi a creare questa struttura?

Grazie

[sea_green]

Vediamo se ho capito il problema

La struttura della pagina html potrebbe essere questa

<div id="contenitore">
 <div id="logo"></div>
 <div id="menu"></div>
 <div id="area_contenent"></div>
 <div id="immagine"></div>
</div>

Il file *.css più o meno così

#contenitore{
                    background-image:url('layout_ok.png');
                    background-repeat:no-repeat;
                    width: VALOREpx;
                    height:950px
                  }
#logo{
                    position:absolute;
                    width: VALOREpx;
                    height: VALOREpx;
                    top: VALOREpx;
                    left:VALOREpx;
                  }

Per i div mancanti comportati come con logo

[Valeria75_bis]

Prima di tutto ti ringrazio per l'aiuto!!!

Però vorrei immagini separate per ogni area (div), in quanto le immagini dovrebbero essere come background di ogni box (top, menu, immmagine, content, footer) per poi inserire sopra/all'interno i miei contenuti.

Il layout ha dimensioni superiori.... a me basta un width da 950 px

[Valeria75_bis]

Nessun aiuto per creare il CSS???

[sea_green]

Tu hai già le immagini separate?

Se è così non cambia molto

l'html può rimanere quello (in alcuni punti ho scritto magari delle cose che ti risultano ovvie , le ho messo perché non so quali siano le tue conoscenze... )

<div id="contenitore">
 <div id="logo"></div>
 <div id="menu">Inserisci qui il menù</div>
 <div id="area_contenent">Inserisci qui i contenuti</div>
 <div id="immagine">Puoi inserire qui l'immagine o metterla direttamente come sfondo</div>
</div>

il css potrebbe diventare

#contenitore{width: 950px;}
#logo{
                    position:absolute;
                    background-image:url('CARTELLA/NOME_IMMAGINE.est');
                    background-repeat:no-repeat;
                    width: VALOREpx;
                    height: VALOREpx;
                    top: VALOREpx;
                    left:VALOREpx;
                  }
#menu{
                    position:absolute;
                    background-image:url('CARTELLA/NOME_IMMAGINE.est');
                    background-repeat:no-repeat;
                    width: VALOREpx;
                    height: VALOREpx;
                    top: VALOREpx;
                    left:VALOREpx;
                  }
#area_contenent{
                    position:absolute;
                    background-image:url('CARTELLA/NOME_IMMAGINE.est');
                    background-repeat:no-repeat;
                    width: VALOREpx;
                    height: VALOREpx;
                    top: VALOREpx;
                    left:VALOREpx;
                  }
#immagine{
                    position:absolute;
                    background-image:url('CARTELLA/NOME_IMMAGINE.est');
                    background-repeat:no-repeat;
                    width: VALOREpx;
                    height: VALOREpx;
                    top: VALOREpx;
                    left:VALOREpx;
                  }

Sostituisci il CARTELLA/NOME_IMMAGINE.EST con l'indirizzo dell'immagine di sfondo
e al posto di VALORE con il numero di pixel adeguato in modo che vada tutto a posto.

Ovviamente questo è un css di partenza...

[Valeria75_bis]

Grazie!!!

Sto facendo delle prove, ho creato i pezzi di immagine e modificato il tuo CSS, inserendo width e height delle immagini.

però non so come modificare

top: VALOREpx;
left:VALOREpx;

dei vari div


anche perchè che il layout fosse centrato verticalmente ed orizzontalmente

quindi layout da 950 x 650 (centrato)

questa è la versione modificata

layout

[sea_green]

margin:auto è per centrare infirefox
body {text-align:center} per centrare in explorer

top è la distanza dalla parte più alta (in questo caso) del div#contenitore
left è la distanza dal lato sinistro (in questo caso) del div#contenitore

body {text-align:center}

#contenitore{width: 950px;
             height: 650px;
             margin:auto;
             position:relative;}

#logo{
                    position:absolute;
                    background-image:url('logo.png');
                    background-repeat:no-repeat;
                    width: 950px;
                    height: 93px;
                    top: 0px;
                    left:0px;
                  }
#menu{
                    position:absolute;
                    background-image:url('menu.png');
                    background-repeat:no-repeat;
                    width: 230px;
                    height: 424px;
                    top: 93px;
                    left:0px;
                  }
#area_contenent{
                    position:absolute;
                    background-image:url('content.png');
                    background-repeat:no-repeat;
                    width: 379px;
                    height: 424px;
                    top: 93px;
                    left:230px;
                  }
#immagine{
                    position:absolute;
                    background-image:url('immagine.png');
                    background-repeat:no-repeat;
                    width: 338px;
                    height: 424px;
                    top: 93px;
                    left:609px;
                  }

da qui dovresti farcela da sola

[Valeria75_bis]

Da ieri ho lavorato a questa struttura:

#contenitore {
  width: 950px;
  margin: 0px auto;
}
#logo {
  background-image: url('logo.png');
  background-repeat: no-repeat;
  width: 950px;
  height: 93px;
  top: 10px;
}
#menu {
  background-image: url('menu.png');
  background-repeat: no-repeat;
  width: 230px;
  height: 424px;
  float: left;
}
#area_contenent {
  background-image: url('content.png');
  background-repeat: no-repeat;
  width: 379px;
  height: 424px;
  float: left;
}
#immagine {
  background-image: url('immagine.png');
  background-repeat: no-repeat;
  width: 338px;
  height: 424px;
  float: left;
}
#footer {
  background-image: url('footer.png');
  background-repeat: no-repeat;
  height: 74px;
}
.clearfix {
  clear: both;
}


<body>

<div id="contenitore">
  <div id="logo">
  </div>
  <div id="menu">Inserisci qui il menù</div>
  <div id="area_contenent">Inserisci qui i contenuti</div>
  <div id="immagine">Puoi inserire qui l&#39;immagine o metterla direttamente come sfondo</div>
  <div class="clearfix">
  </div>
  <div id="footer">Inserire qui i dati.</div>
</div>

</body>

Sembra OK! Solo che non è centrato verticalmente ..... ma sempre spostato in alto.

Come posso risolvere?

Thanks

[sea_green]

Prova a vedere


http://css.flepstudio.org/css-tutori...izzontale.html
o
http://css.html.it/faq/leggi/304/com...verticalmente/

[Valeria75_bis]

mmmmm ho provato a seguire questo esempio

http://css.html.it/faq/leggi/304/com...verticalmente/

ma non funziona, non capisco come applicarlo al mio css