Posizionamento DIV

sabato 06 marzo 2010 - 21.53

squilibrio Profilo | Expert

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

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
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 !
Copyright © dotNetHell.it 2002-2017
Running on Windows Server 2008 R2 Standard, SQL Server 2012 & ASP.NET 3.5