Posizionamento DIV

sabato 06 marzo 2010 - 21.53

Elenco Threads

Stanze Forum

Aggiungi ai Preferiti

Cerca nel forum

squilibrio Profilo | Expert

527 messaggi | Data Invio: sab 6 mar 2010 - 21:53

Ciao ho una pagina che visualizza:

- un'area superiore
- 3 box uno accanto all'altro: su due righe, parte sopra "titolo" (immagine), parte sotto "contenuto"
- 3 box uno accanto all'altro, per il footer

La struttura della pagina è corretta, il problema è che quando cerco di inserire del testo nell'area "contenuto" dei 3 box, se non utilizzo i <br> il box si "allunga" causando lo spostamento (sotto) del/dei box accanto

<div id="wrap" align="center">
<div id="main">

<div id="banner" align="center">
.....
</div>

<div class="content">
<div class="bar" id="BarSSSSSS"></div>
<div align="center">

</div>
</div>

<div class="content">
<div class="bar" id="BarEEEEEEE"></div>
<div align="left">
<img ...>
dnskfasklf dsfsdfjds fsdkfj dsfdjs klfkldsf dsklf jdsklfj dsfjldsfds
</div>
</div>

<div class="content">
<div class="bar" id="BarNNNNNNN"></div>
<div align="left">

.......
</div>
</div>

<div class="footer">
<div class="bar" id="FooterBar1"></div>
</div>

<div class="footer">
<div class="bar" id="FooterBar2"></div>
</div>

<div class="footer">
<div class="bar" id="FooterBar3"></div>
</div>

</div>

Le 3 aree:

BarSSSSS
BarEEEEE
BarNNNNN

Contengono l'immagine del titolo di ogni box

Se inserisco il contenuto (esempio nell'area di BarEEEEE)

dnskfasklf dsfsdfjds fsdkfj dsfdjs klfkldsf dsklf jdsklfj dsfjldsfds

il testo è nella stessa riga (non va a capo automaticamente in base alla dimensione del box) e quindi la struttura risulta modificata.

io vorrei avere 3 box (titolo e contenuto) fixed

Grazie

body
{
margin:0;
padding:0;
background:#3b6279 url(images/background.png) repeat-x center ;
height:750px
}

#wrap
{
width: 100%;
height: 100%;
}

#main
{
width: 980px;
height: 100%;
}

#main p
{
padding: 10px;
}

#menu
{
margin-top: 100px;
width: 980px;
background: #ffffff;
}

#banner
{
margin-top: 8px;
width: 980px;
}

#bar
{
margin-left: 0px;
width: 980px;
}

div.content
{
float: left;
}

div.content div.bar
{
height: 60px;
}

div.footer
{
width: 33%;
float: left;
}

div.footer div.bar
{
height: 70px;
}

#BarSSSSSS
{
width: 518px;
margin-top: 8px;
height: 58px;
background: url(images/bar_SSSSSS.png) no-repeat;
}

#BarEEEEEEE
{
width: 231px;
margin-top: 8px;
height: 58px;
background: url(images/bar_evidenza.png) no-repeat;
}

#BarNNNNNNN
{
width: 231px;
margin-top: 8px;
height: 58px;
background: url(images/bar_evidenza.png) no-repeat;
}

</div>

martinez Profilo | Senior Member

274 messaggi | Data Invio: lun 8 mar 2010 - 11:11

Ciao credo che il tuo problema sia nei CSS ... dei vari BOX ...

anzitutto dovresti eliminare la classe BAR (width: 980px) altrimenti inserisci i box in un contenitore enorme ... e cmq a mio parere gli stili sono tutti da rivedere e da rifare :)

allora io imposterei così la cosa supponendo di avere un contenitore da 980 px e tre blocchi (BAR) da inserire all'interno:



#contenitore
{
margin: 0 auto;
padding: 0;
width: 980px;
text-align: center;
}

#bar1, #bar2, #bar3
{
float: left;
margin: 0;
padding: 0;
width: 320px;
}

in questo caso stabilisci la grandezza del contenitore e dei relativi BOX posizionandoli al centro ...



div id="contenitore">
   <div id="bar1"></div>
   <div id="bar2"></div>
   <div id="bare"></div>
</div>
{

Saluti

Torna su

Stanze Forum

Elenco Threads

Partecipa anche tu! Registrati!

Hai bisogno di aiuto ?
Perchè non ti registri subito?

Dopo esserti registrato potrai chiedere
aiuto sul nostro Forum oppure aiutare gli altri

Consulta le Stanze disponibili.

Registrati ora !