Margin-top

**teana7** · 11-07-2013, 10:12

Ciao a tutti,

sto cercando di realizzare un sito, ma i miei ricordi sono piuttosto sbiaditi.

Questo il mio problema:

sotto una "testata" che finisce con una pulsantiera, c'è:

a sinistra il div che contiene il menu

al centro quello del corpo

a destra i banner pubblicitari

tutti e 3 questi div, devono posizionarsi 10px sotto la pulsantiera.
Per i primi due il margin-top funziona, per il terzo no.
In progettazione me lo sposta abbassandolo, ma visualizzandolo con F12 rimane attaccato alla pulsantiera. Se inserisco poi 20px mi sposta di 10 tutto il main (se è corretto chiamarlo così, scusate ma non sono un'esperta)

Grazie
Teana

**Dragor** · 11-07-2013, 11:19

Posta il codice dei div così vedo di aiutarti

**teana7** · 11-07-2013, 11:31

Sarà un casino!?

QUESTO E' IL PRIMO DIV

<div id="menu_alto">
<div class="titoletti" id="ultima">ULTIMA PARTITA</div>
<table width="250" height="90" border="0">
<tr>
<td width="25%">[img]images/logo_ciampino.gif[/img]</td>
<td width="50%" align="center" class="risultati">16-2</td>
<td width="25%">[img]images/logo_romanina.gif[/img]</td>
</tr>
</table>
<table width="250" border="0">
<tr>
<td width="28%" class="squadre">Virtus
Ciampino</td>
<td width="44%"></td>
<td width="28%" class="squadre">Virtus
Romanina</td>
</tr>
</table>
<div class="titoletti" id="prossima">PROSSIMA PARTITA</div>
</div>
<div id="menu_basso">
<div class="titoletti" id="foto">La foto del mese</div>
<div id="fotoimg">[img]images/fotomese.gif[/img]</div>
<div class="titoletti" id="intervista">L'intervista</div>
<table>
<tr>
<td width="100px" height="120"></td>
<td width="150px">
<table cellspacing="10">
<tr>
<td width="150px" valign="top">E' il turno di:</td>
</tr>
<tr>
<td width="150px" height="70%"><font color="#790e12"></font></td>
</tr>
<tr>
<td width="150px" height="10%"><font color="#790e12">Archivio Interviste</font></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>

QUESTO IL SECONDO

<div id="corpo">
<div id="notizia"><span class="titoletti">La Virtus Ciampino conquista la serie C</span></div>

21 Marzo 2013

<table>
<tr>
<td width="50%"><font color="#790e12" font size="35">C</font><font face="Tahoma, Geneva, sans-serif" font size="2">i siamo!!!</font>
<p align="justify"><font face="Tahoma, Geneva, sans-serif" font size="2"> Una cavalcata lunga 18 partite. 17 le vittorie conseguite, con il miglior attacco e la miglior difesa all'attivo. Questo l'importante biglietto da visita con il quale la squadra dell'ex Capogna, ora guidata dal duo Zaccagnini-Cesaretti, si presenterà ai blocchi di partenza del prossimo campionato di serie C.

Appuntamento al 28 settembre!</font></p></td>
<td>[img]images/foto_notizia.gif[/img]</td>
</tr>
</table>
</div>

QUESTO IL TERZO

<div id="flash">qui va il banner che non scende</div>
<div id="cartolina">[img]images/cartoline.gif[/img]</div>

**Dragor** · 11-07-2013, 12:13

Parti da una struttura base.

<div id="corpo">
<div id="testata">

</div>
<div id="main">
--qui dentro inserisci i tuoi 3 div
</div>
</div>

Il div corpo è quello che racchiude tutta la pagina. Puoi anche eliminarlo se vuoi partire dal <body>.

Il main come vedi è subito sotto la testa. Diamo un'impostazione di css così:

#main {
margin-top: 10px;
}

**teana7** · 11-07-2013, 12:47

Avevo provato ad inserire i 3 div in un div contenitore, ma me li mette uno sotto l'altro e non più affiancati

Dove sbaglio?

**Dragor** · 11-07-2013, 13:00

Passami il css dei 3 div

**teana7** · 11-07-2013, 13:25

#menu_alto {
margin-left:0px;
margin-top:10px;
width:250px;
height:300px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(images/menu_alto.jpg);
overflow:hidden;

#menu_basso {
margin-left:0px;
margin-top:10px;
width:250px;
height:300px;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(images/menu_basso.jpg);
overflow:hidden;

#corpo {
margin-left:10px;
margin-top:10px;
width:540px;
height:auto;
margin-bottom:0px;
float:left;
display:inline;
background-image: url(images/corpo.jpg);
overflow:hidden;

#flash {
margin-top: 10px;
margin-left: 810px;
clear: none;
height: 446px;
width: 150px;
}
#cartolina img {
margin-left: 560px;
margin-top: 10px;

GRAZIE!!!

**Dragor** · 11-07-2013, 14:41

Prendi spunto da questo codice e applicalo alla tua pagina.

HTML

<div id="corpo">
<div id="testata">

</div>
<div id="main">
<div id="sx"></div>
<div id="content"></div>
<div id="dx"></div>
</div>
</div>

CSS

#corpo #main {
margin-top: 10px;
}
#sx{
height: 300px;
width: 250px;
position: relative;
float: left;

}
#content{
height: 300px;
width: 500px;
position: relative;
float: left;
}
#dx{
float: left;
height: 300px;
width: 250px;
position: relative;
}

**teana7** · 12-07-2013, 13:42

Praticamente lo sto rifacendo per fare un pò più di ordine.....e pare che al momento funzioni!!!

Grazie

**slimer1986** · 17-07-2013, 19:35

I div sono blocchi che automaticamente "vanno a capo".
Devi usare il float nel css

Discussione: Margin-top

Strumenti discussione

Ricerca discussione

Visualizza

Margin-top

Permessi di invio