Problema posizione div gestita da css con differente risoluzione schermo

**markgrav** · 15-04-2011, 13:10

Ciao a tutti ho questa situazione,

ho la mia pagina html e voglio usare sovrapporre un immagine a questa pagina, inserendo quest'immagine in un div e gestendo la sua posizone con css

nel css faccio così:

#logo {
position: absolute;
z-index:1;
margin-top: -40px;
margin-left: 170px;
}

nella pagina questo:

<div id="logo" align="left">
[img]logo.png[/img]
</div>

il problema e che se vedo la pagina con differenti risoluzione (1024x768 oppure 1280x1024 - 800x600) l'immagine si vede in una poszione diversa, insomma si sposta.

Cosa sbaglio?

Grazie

**markgrav** · 15-04-2011, 15:41

Qualcuno mi puo dare qualche info a riguardo

**0-c00l** · 15-04-2011, 16:52

NOn puoi fare:

codice:

#logo {
background: url(logo.png);
width: LARGHEZZA IMMAGINE;
height: ALTEZZA IMMAGINE;
margin: auto; /* Appare centrato con questa proprietà */
}

?

**mucu** · 15-04-2011, 20:06

Originariamente inviato da markgrav
Cosa sbaglio?

non si usano i margini ma per esempio

codice:

top: 100px;
left: 170px;

questi valori vengono calcolato dall'elemento genitore
probabilmente tu hai qualcosa di simile

codice:

body>
    <pagina></pagina>
    <logo></logo>
</body>

invece dovresti/vorresti avere

codice:

body>
    <pagina>
        <logo></logo>
    </pagina>
</body>

**markgrav** · 16-04-2011, 11:31

mucu nn ho capito bene cosa intendi, ti posso far vedere perfettamente il coidce della mia pagina, come potrai notare c'è un'effetto di carosello di immagini sopra il quale vorrei sovrapporre la mia immagine come ti dicevo con l'utilizzo di un div posizionato con l'uso di css:

codice:

<html>
<head>
<title>Pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="carosello/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="carosello/stepcarousel.js"></script>
<script type="text/javascript" src="carosello/dimensioni.js"></script>
<link href="carosello/carosello.css" rel="stylesheet" type="text/css">

<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">

<div id="logo">
[img]logo.png[/img]
</div>

<table width="997" height="950" border="0" cellpadding="0" cellspacing="0" bgcolor="#172539">
	<tr>
		<td>
			[img]immagini/index_01.png[/img]</td>
	</tr>
	<tr>
		<td width="997" height="348">
		
		<div id="mygallery" class="stepcarousel">
		<div class="belt">
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		</div>
		</div>
		

		</td>
	</tr>
	<tr>
		<td>
			[img]immagini/index_03.png[/img]</td>
	</tr>
</table>
</div>
</body>
</html>

nel css esterno invece faccio così (ti copio solo la porzione per il logposizonamento dell'immagine che poi è il logo):

codice:

#logo {
position: absolute;
z-index:1;
top: -40px;
left: 170px;
}

grazie dell'aiuto

**mucu** · 16-04-2011, 14:03

meglio di quanto pensassi, scrivi questo

codice:

div {
    width: 997px;
    margin: 0 auto
}

e funzionerà in ogni browser a patto che usi un doctype strict

**markgrav** · 17-04-2011, 13:19

Mucu scusami nn ho capito dove lo devo inserire questo codice che mi hai indicato.

E poi ma nel codice della pagina ho messo correttamente i div quello che centra il sito e quello del logo?

**mucu** · 17-04-2011, 16:03

devi scriverlo nel tuo style.css oppure nell'head del tuo html
facciamo così cancella

codice:

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">

e scrivi

codice:

<style type="text/css">
div.pagina {
    width: 997px;
    margin: 0 auto
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="pagina">

ma se non sai queste cose, prima di andare avanti, è meglio che ti leggi una guida di quelle che trovi nei link utili o cercando con google

**markgrav** · 17-04-2011, 20:11

mucu non so dove sbaglio cmq nn mi funziona nel senso che portandolo ad es. alla risoluzione 1024x768 il logo si muove e nn si ancora

ti incollo nuovamente come ho sistemato il tutto secondo le tue indicazoni:

codice:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" src="carosello/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="carosello/stepcarousel.js"></script>
<script type="text/javascript" src="carosello/dimensioni.js"></script>
<link href="carosello/carosello.css" rel="stylesheet" type="text/css">

<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="logo">
[img]logo.png[/img]
</div>

<div class="pagina">
<table width="997" height="950" border="0" cellpadding="0" cellspacing="0" bgcolor="#172539">
	<tr>
		<td>
			[img]immagini/index_01.png[/img]</td>
	</tr>
	<tr>
		<td width="997" height="348">
		
		<div id="mygallery" class="stepcarousel">
		<div class="belt">
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		<div class="panel">
		[img]carosello/1.png[/img]
		</div>
		
		</div>
		</div>
		

		</td>
	</tr>
	<tr>
		<td>
			[img]immagini/index_03.png[/img]</td>
	</tr>
</table>
</div>
</body>
</html>

e nel css esterno ho aggiunto:

div.pagina {
width: 997px;
margin: 0 auto
}

**mucu** · 17-04-2011, 21:20

abbiamo fatto un errore a testa
io non ti scritto nella regola di .pagina
position: relative;
e tu hai messo il logo fuori da pagina

Discussione: Problema posizione div gestita da css con differente risoluzione schermo

Strumenti discussione

Ricerca discussione

Visualizza

Problema posizione div gestita da css con differente risoluzione schermo

Re: Problema posizione div gestita da css con differente risoluzione schermo

Permessi di invio