Problema con il posizionamento dei div (beginner)

**CodeVisio** · 10-07-2012, 21:04

Ciao a tutti,

premetto che sto muovendo i primi passi sulle pagie web in html e css e nel hard way.

Sono riuscito a posizionare correttamente buona parte delle strutture
che compongoo la pagina web.
Ora, ho un riquadro centrale alla pagin web che rapparesenta il mio contenuto, chiamiamolo main_content.
Ok provoa fare un disegno così mi spiego meglio:

LLLLLLLL
MMMMM
CCCCCC
CCCCCC
CCCCCC
CCCCCC
FFFFFFF

L = logo.
M = menu
C = content
F = footer.

Dicevo, questa è più o meno la struttura. Ogni riquadro è composto da un div.
Ora, volevo scrivere qualcosa con il paragrafo all'interno di C. Però C si estende tanto quanto tutto il body diciamo. Allora ho pensato inserire un nuovo div all'interno(chiamiamolo I) di C, molto più piccolo di C ovv. e al suo interno scrivere i vari paragrafi.
Quando però setto nel css i margini di I rispetto a C, i left e right funzionano mentre il top sballa. Nel senso che a spostarsi in giù è tutto C.
Un'altra cosa strana accade quando uso il trucchetto di colorare tutti i div di rosso e renderli visibili e larghi 1px. Lo faccio per vedere come i div vengono posizionati. Quando devo provare la pagina al naurale allora metto 0px nel settaggio per tutti i div.
Ora, succcede che se visualizzo i div allora I si posiziona in modo corretto anche nel top rispetto a C. Se invece tolgo la visibilità dei div, 0px, allora accade i lproblema che ho spiegato.

dove sbaglio?

Grazie.

**ricman** · 11-07-2012, 00:57

Originariamente inviato da CodeVisio
dove sbaglio?

...a non postare il pezzo di codice che non funziona

**CodeVisio** · 11-07-2012, 07:13

ahahaha.

Peccato che se sapevo quale era il pezzo di codice che non funziona avevo già risolto il problema

Eccolo

codice:

----html
    <body id="home">
        <div id="container">
        
            <div id="logotitle">
                

A C M E E</p>
            </div>
            <div id="logosubtitle">
                

SSSSSSSS</p>
            </div>

            <div id="mainmenu">
                <ul>[*]Home[*]Menu1[*]Menu2[*]Menu3[/list]
            </div>
            
            <div id="content">

                <div id="contentright">
                    

2012\07\10</p>
                    

Welcome!</p>
                </div>
            </div>
....
</body>

--- CSS

div
{
	border: 0px solid #F00;
}
#container
{
	width: 800px;
	margin: 20px auto 20px auto;
}
#logotitle p
{
	margin-bottom: 0;
	margin-top: 0;
	margin-left: 0;
	font-size: 3.0em;
	font-family: 'Helvetica Neue', Helvetica, Verdana, Sans-Serif;
	text-align: left;
}
#logosubtitle
{
	margin-left: 3px;
}
#logosubtitle p
{
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	letter-spacing: 1.1em;
	font-family: 'Helvetica Neue', Helvetica, Verdana, Sans-Serif;
	text-align: left;
}
#mainmenu ul
{
	list-style: none;
	text-align: right;
}
#mainmenu li
{
	display: inline;
	margin: 0 50px 0 0;
}
#mainmenu li a:link, #mainmenu li a:visited
{
	text-decoration: none;
	font-size: 1.3em;
	font-family: 'Helvetica Neue', Helvetica, Verdana, Sans-Serif;
	color: Black;
}
#home #mainmenu a.home
{
	font-weight: bold;
	border-bottom: 3px solid #000;
}
#content
{
	min-height: 500px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	font: normal 90% 'Lucida Grande', Verdana, Sana-Serif;
}

#contentright
{
	margin-top: 100px;
	margin-right: 20px;
	margin-left: 20px;
	line-height: 70%;
}


manca il footer sopra, ma non penso sia importante.

Fatemi sapere.

**ricman** · 11-07-2012, 10:37

Se non ho capito male dalla tua spiegazione dovresti dare il padding al content (e togliere il margin di 100 al contentright).
Fai qualche prova e fammi sapere

**CodeVisio** · 11-07-2012, 13:42

Ciao ricman,

era una delle prove che mi è balzata in testa stamani, ma che ancora non ho fatto.

A prescindere dalla prova:
se io gioco con il margin del contenuto rispetto al contenitore invece che con il padding del contenitore rispetto al contenuto, non ottengo lo stesso effetto?
Mi sembrano due settaggi che vanno ad ottenere lo stesso effetto o mi sbaglio?

Poi, quell 100px lì era per "stressare" un po' con i tag e vedere quali erano i risultati. Non essendo un esperto sto andando un po' avanti a tentatvi dopo aver letto qualche libro.
Ho fatto qualche indagine con quel plug-in di firefox che visivamente di mostra i vari tag nella pagina ed ho notato che nel mio esempio il contenuto rimane lì fermo (dopo quei 100px) mentre a spostarsi di 100px è il contenitore. Come puoi vedere nell'html c'è una relazione gerarchica tra il contenuto e il contenitore. Perché il contenuto non si sposta si 100px sotto rispetto al conteitore nonostante glielo dica espressamente attraverso il suo id?

AGGIORNAMENTO:
ritornando sul discorso del margin e del padding. A me sembra che giochino creando lo stesso effetto, però c'è da dire che non sono esperto in queste cose. A rigore e con la mi esperienza non credo che le specifiche abbiano lasciato spazio a questa ridondanza. C'è qualcuno che può spiegarmi la differenza tra le due proprietà?

grazie.

**ricman** · 11-07-2012, 19:05

http://www.htmldog.com/guides/cssbeginner/margins/

**CodeVisio** · 11-07-2012, 19:51

grazie per il link.
Ho provato con il padding ed ottengo l'effetto che volevo.
Rimane cmq non chiaro perché se uso il padding del contenitore nei confronti del contenuto funziona, mentre se uso i margin del contenuto nei confronti del contenitore invece non va.
Hai qualche idea?

grazie.

Discussione: Problema con il posizionamento dei div (beginner)

Strumenti discussione

Ricerca discussione

Visualizza

Problema con il posizionamento dei div (beginner)

Re: Problema con il posizionamento dei div (beginner)

Permessi di invio