problema posizionamento layer

**mascalzone** · 23-04-2004, 15:26

ciao a tutti....
come da titolo, ho un problema con il posizionamento di alcuni layer
ho una struttura semplice...header-contenuti-footer

il mio problema è posizionare altri layer (box1 e box2) all'interno del layer contenuti
ma non riesco a posizionarli come voglio

propongo di seguito il codice HTML e quello del foglio di stile

codice:

<body>
<div id="container">
	<div id="banner">HEADER HEADER HEADER HEADER HEADER </div>
	<div id="content">ciao ciao ciao ciao ciao ciao ciao ciao ciao ciao 
		<div id="box1">BOX1</div>
		<div id="box2">BOX2</div>
	</div>
	<div id="footer">FOOTER FOOTER FOOTER FOOTER FOOTER </div>
</div>
</body>

codice:

#container {
	width: 750px;
	\width: 750px;
	w\idth: 750px;
	border: 1px solid gray;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	top: 100px;
}
#banner {
	padding: 0px;
	margin-bottom: 0px;
	background-color: rgb(213, 219, 225);
}
#content {
	padding: 0px;
	background-color: gray;
}
#box1 {
	position:relative; 
	left:10px; 
	top:0px; 
	width:100px; 
	height:181px; 
	background-color: #CCCCCC; 
	border: 1px none #000000;
}
#box2 {
	position:relative; 
	left:118px; 
	top:0px; 
	width:100px; 
	height:181px; 
	background-color: #CCCCCC; 
	border: 1px none #000000;
}
#footer {
	clear: both;
	padding: 0px;
	margin-top: 0px;
	background-color: rgb(213, 219, 225);
}

in grassetto ho messo le lienee 'incriminate'

**mascalzone** · 23-04-2004, 15:31

per spiegare meglio il mio problema e
come vorrei il posizionamento ho preparato queste 3 immag.

e questo è quello che non mi riesce di fare

la mia domanda è:
ma se i layer box1 e box2 sono all'interno del layer container
la posizione assoluta di box1 e box2 non dovrebbe essere rispetto al layer padre ovvero container?

qualcuno mi saprebbe aiutare...
ringrazio anticipatamente tutti

**secan** · 23-04-2004, 15:34

Se ricordo bene, "position: relative;" indica che il posizionamento del layer è calcolato in base all'elemento che lo precede: se vuoi specificare delle posizioni relative all'elemento contenitore (nel tuo caso "content") credo che tu debba impostare il valore a "position: absolute;"

... in ogni caso non ci metterei la mano sul fuoco.

P.S. Potresti anche provare in questo modo:

codice:

#box1 {
	width:100px; 
	height:181px;
        display: inline;
        float: left
	background-color: #CCCCCC; 
	border: 1px none #000000;
}
#box2 {
	width:100px; 
	height:181px; 
	background-color: #CCCCCC; 
	border: 1px none #000000;

**mascalzone** · 23-04-2004, 15:41

mi scuso, faccio un correzione

io vorrei specificare il posizionameto in maniera assoluta
rispetto al layer content e non container come ho scritto nel secondo post
l'immagine cmq rende bene l'idea

grazie secan, ora provo come mi hai consigliato

**mascalzone** · 23-04-2004, 15:54

Originariamente inviato da secan
...
P.S. Potresti anche provare in questo modo:

codice:

#box1 {
	width:100px; 
	height:181px;
        display: inline;
        float: left
	background-color: #CCCCCC; 
	border: 1px none #000000;
}
#box2 {
	width:100px; 
	height:181px; 
	background-color: #CCCCCC; 
	border: 1px none #000000;

ho provato ma non funge,
mi posiziona BOX1 sotto la scritta ciao ciao
e BOX2 immediatamente sotto (che tra l'altro non si vede)

il fatto è che a me serve poterli posizionare in modo assoluto rispetto al layer content (che li contiene)

qualche suggerimento

grazie

**secan** · 23-04-2004, 16:24

Mmmm, la cosa è strana! il codice che ti ho dato dovrebbe fare questo:

codice:

#box1 { 
	margin-left:10px; /*imposta un margine di 10px a sinistra*/ 
	margin-top:0px; /*imposta un margine di 0px sopra*/
	width:100px; /*imposta una larghezza di 100px*/
	height:181px; /*imposta un'altezza di 181px*/
        display: inline; /*forza il layer a comportarsi come un elemento inline (ossia non manda a capo l'elemento successivo)*/
        float: left; /*allinea il layer al margine sinistro dell'elemento contenitore*/
	background-color: #CCCCCC; 
	border: 1px none #000000;
       }
/*
a questo punto dovresti avre il tuo layer "box1" posizionato nel
punto giusto e che occupa 112px in larghezza (100 + 10 di margine + 
2 di bordo) e 183px in altezza (181 + 2 di bordo)
*/

#box2 {
        margin-left: 6px; /*imposta un margine di 10px a sinistra*/
        margin-top: 0px; /*imposta un margine di 0px sopra*/
	width:100px; /*imposta una larghezza di 100px*/
	height:181px; /*imposta un'altezza di 181px*/
	background-color: #CCCCCC; 
	border: 1px none #000000;
       }
/*
e adesso dovresti avere il layer "box2" allineato al layer "box1" e
distanziato da esso di 6px
*/

Non mi sembra che ci siano errori perciò il problema potrebbe dipendere dal fatto che stai testando la tua pagina con un browser che non supporta a pieno le specifiche CSS2 (ad esempio io ho sempre parecchi problemi con Netscape): che browser stai usando? Hai controllato di aver messo tutti i ":" ed i ";" nei posti giusti?
Inoltre se imposti il valore "border: none" (nessun bordo) perchè poi specifichi anche uno spessore ed un colore?

codice:

border: 1px none #000000; /*???*/

border: none; /*nessun bordo*/
border: 1px solid #000000; /*bordo spesso 1px, a riga continua, di colore nero*/

Resto in attesa di tue nuove
Secan

**netgroup-lux** · 23-04-2004, 17:09

codice:

#box1 {
	position:relative; 
	left:10px; 
	top:0px; 
	width:100px; 
	height:50px; 
	background-color: #CCCCCC; 
	border: 1px none #000000;
}
#box2 {
	position:relative; 
	left:118px; 
	top:-50px; 
	width:100px; 
	height:50px; 
	background-color: #CCCCCC; 
	border: 1px none #000000;
}

**mascalzone** · 23-04-2004, 17:59

ciao netgroup-lux, innanzitutto grazie
avevo pensato ad una soluzione del genere...
i layer vengono posizionati affianco e questo va bene
ma ci sono 2 problemi di cui il secondo è molto più importante

1. devo posizionarli come nella 3° figura che ho postato, quindi sovrapposti al contenuto del layer content
potrei risolvere con lo stesso metodo ma non è una soluzione ottimale, poichè
2. non so di preciso la lunghezza del BOX1 nè del BOX2 in quanto ci va del testo dinamico e delle immagini
quindi così com'è non va bene

, devo trovare una soluzione ottimale che vada bene indipendentemente dalla lunghezza degli altri layer, anche per questo cercavo un posizionamento assoluto

X secan,
in effetti io testo tutto con FireFox...ho provato poi con I.E. e va meglio ma rimane il fatto che devono essere sovrapposti al contenuto del layer content come nei rettangoli tratteggiati
ecco quello che esce fuori

grazie ancora a tutti,
spero che possiamo risolvere

**mascalzone** · 26-04-2004, 10:52

esiste un modo per risolvere stò problema?
io proprio non ci riesco

grazie

**mascalzone** · 29-04-2004, 16:04

up

Discussione: problema posizionamento layer

Strumenti discussione

Ricerca discussione

Visualizza

problema posizionamento layer

prova cosi, a me funge

Permessi di invio