posizionare i vari div

**theindio** · 08-01-2012, 23:10

Ciao Ragazzi,

non riesco a capire come riesco a posizionare esattamente i div in un container.

Come base ho un contenitore div=content widht 100%
Poi sul lato sinistro una classe .contentsx width 120px (link)
Al centro una classe .contencntr width 600px (content)
A destra sopra una classe . contentdxup width 240px height 300px (banner1)
A destra sotto una classe . contentdxdown width 240px height 300px (banner2)

Ho provato in tutti i metodi che mi venivano in mente, ma niente.
La prima classe .contentsx riesco a posizionarla perfettamente, se provo a mettere la classe al centro la vedo spostata sotto quella .contentsx.

Ho provato con margin padding, ma non riesco a capire come lavorarci???

**theindio** · 08-01-2012, 23:17

Come il file esce a me

**bob1983** · 09-01-2012, 14:41

Vorrei consigliarti lo schema a griglia 960px

dai uno sguardo su google 960grid system

**theindio** · 09-01-2012, 15:36

Sto tentando di capire il css, ma mi sa che mi sto incasinando sempre di più.
Di solito vado a tabelle e non ho problemi, ma volevo cominciare con i css.

Mamma che cacao che ho in testa.

**bob1983** · 09-01-2012, 16:11

Se abbandoni le tabelle e passi ai css ci guadagni e basta fidati

Nello specifico come potrei aiutarti?

**theindio** · 09-01-2012, 16:33

Ho trovato questo link che un po mi spiega la situazione??

Non ho ben capito come devo fare ca.

1. maincontainer
2. e poi tutti gli altri???

oppure devo inserire ancora qualcosa?

ti metto il codice che ho.

#content {
height: 611px;
background-image: url(../images/bckgrnd.jpg);
width: 989px;
position: fixed;
}
.contentlft {
background-color: #0FF;
width: 120px;
height: 591px;
opacity: 0.1;
margin: 10px;
float: left;
}
.contentrght {
float: right;
height: 300px;
width: 200px;
background-color: #09F;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 700px;
}

.contentcntr {
background-color: #09F;
height: 591px;
width: 600px;
opacity: 0.5;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 135px;
}

**bob1983** · 09-01-2012, 16:39

postami anche l'html cosi ti posso aiutare

**theindio** · 09-01-2012, 17:23

<!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>
<link href="css/lasfida.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper" class="bg">

<div id="mainCntr">

<div id="headerCntr">
[img]images/zz11.jpg[/img]
[img]images/zz12.jpg[/img]
[img]images/zz13.jpg[/img]
[img]images/zz14.jpg[/img]
[img]images/zz15.jpg[/img]
[img]images/zz16.jpg[/img]
</div>

<div id="menu">
<div class="menuCntr">
<ul>
<li class="selected">HOME[*]ABOUT [*]ù[*]SERVICES[*]CONTACT[/list]
</div>
</div>

<div id="content">
<div class="contentlft">
<div class="contentcntr">
<div class="contentrght">
</div>
</div>
</div>
</div>

<div id="footerhigh">Inserite qui il contenuto per id "footerhigh"</div>
<div id="footerlow">Inserite qui il contenuto per id "footerlow"</div>

</div>

</div>

</body>
</html>

**bob1983** · 09-01-2012, 17:45

mancano ancora un sacco di informazioni nel foglio di stile...

se ti può aiutare tieni presente che i div vanno uno sotto l'altro automaticamente.
Per affiancarli devi usare il "float"

per esempio se vuoi che la colonna sx si affianchi a quella destra dovrai dare al div contenitore della colonna sx "float:left"

così il div contenitore del corpo centrale va ad affiancarsi.

per es

----------------div contenitore----------------

---div cont sx-----I------div cont dx---------
I
qua va il............I quindi questo
float:left ............I si affianca
I
I
I
-------------------------------------------------

spero esserti d'aiuto
un saluto!

**theindio** · 09-01-2012, 18:10

Ti ringrazio, pian pianino comincio a capire.

Mi sa che dovrò fare diversi esperimenti, prima che mi venga naturale.

Grazie delle spiegazioni adesso funzia perfettamente

Discussione: posizionare i vari div

Strumenti discussione

Ricerca discussione

Visualizza

posizionare i vari div

Permessi di invio