Problema con div che si sposta in base alla risoluzione

**.Mark29** · 28-06-2009, 15:25

Salve a tutti,ho questo problema con il contenuto dei div che si spostano a seconda della risoluzione,ho provato anche ad usare le percentuali,sapete cosa posso fare per far si che siano fisse per ogni risoluzione?

codice:

<div style="position: absolute; width: 40%; height: 16p%; z-index: 2; left: 45%; top: 25%" id="livello6">

<span class="stile1">Prova Prova Prova Prova Prova Prova Prova Prova
Prova Prova Prova Prova Prova Prova Prova Prova
Prova Prova Prova Prova Prova Prova Prova Prova</span>

</div>

**kontrasto** · 28-06-2009, 16:07

Credo che il problema sia il fatto che usi il posizionamento assoluto. Bisognerebbe vedere un po' il resto del codice per aiutarti.

P.S. Per evitare che i div si spostino al cambio della risoluzione NON vanno usate le percentuali, ma le dimensioni fisse in pixel.

**.Mark29** · 28-06-2009, 16:25

codice:

<html>
<head>

<title>Untitled-1(2)</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>

.stile1 {
font-family: tahoma;
font-size: 13px;
color: #685950;
text-align: left;
text-decoration:none;
}

</style>
</head>




<div style="position: absolute; width: 40%; height: 16p%; z-index: 2; left: 45%; top: 25%" id="livello6">

<span class="stile1">Prova Prova Prova Prova Prova Prova Prova Prova
Prova Prova Prova Prova Prova Prova Prova Prova
Prova Prova Prova Prova Prova Prova Prova Prova</span>

</div>


<div style="position: absolute; width: 40%; height: 16p%; z-index: 2; left: 45%; top: 58%"; padding: 20%"; id="livello2">


<span class="stile1">Prova Prova Prova Prova Prova Prova Prova Prova
Prova Prova Prova Prova Prova Prova Prova Prova</span>

</div>



<body bgcolor="#424242" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<center>
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="19">
			[img]images/Home_01.png[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="10">
			[img]images/Home_02.gif[/img]</td>
		<td colspan="6" rowspan="7">
			[img]images/Home_03.gif[/img]</td>
		<td colspan="3" rowspan="4">


			[img]images/Home_04.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td rowspan="13">
			[img]images/Home_05.gif[/img]</td>
		<td colspan="5">
			[img]images/Home_06.gif[/img]</td>
		<td colspan="4" rowspan="5">
			[img]images/Home_07.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="5">
			[img]images/Home_08.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			[img]images/Home_09.gif[/img]</td>
		<td colspan="2" rowspan="2">
			[img]images/Home_10.gif[/img]</td>
		<td rowspan="3">
			[img]images/Home_11.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td rowspan="10">
			[img]images/Home_12.gif[/img]</td>
		<td rowspan="11">
			[img]images/Home_13.png[/img]</td>
		<td rowspan="10">
			[img]images/Home_14.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="2">
			[img]images/Home_15.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td rowspan="8">
			[img]images/Home_16.gif[/img]</td>
		<td colspan="5" rowspan="2">
			[img]images/Home_17.gif[/img]</td>
		<td colspan="3" rowspan="3">
			[img]images/Home_18.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="6" rowspan="2">
			[img]images/Home_19.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="5" rowspan="2">
			[img]images/Home_20.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="2">
			[img]images/Home_21.gif[/img]</td>
		<td colspan="6" rowspan="3">
			[img]images/Home_22.gif[/img]</td>
		<td rowspan="5">
			[img]images/Home_23.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="4">
			[img]images/Home_24.gif[/img]</td>
		<td colspan="4">
			[img]images/Home_25.gif[/img]</td>
		<td rowspan="4">
			[img]images/Home_26.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="4" rowspan="3">
			[img]images/Home_27.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="6">
			[img]images/Home_28.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="6">
			[img]images/Home_29.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="17" rowspan="2">
			[img]images/Home_30.gif[/img]</td>
		<td rowspan="7">
			[img]images/Home_31.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td rowspan="6">
			[img]images/Home_32.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="13">
			[img]images/Home_33.gif[/img]</td>
		<td colspan="4">
			[img]images/Home_34.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="12">
			[img]images/Home_35.gif[/img]</td>
		<td colspan="2" rowspan="3">
			[img]images/Home_36.gif[/img]</td>
		<td colspan="3" rowspan="4">
			[img]images/Home_37.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="8" rowspan="3">
			[img]images/Home_38.gif[/img]</td>
		<td colspan="3">
			[img]images/Home_39.gif[/img]</td>
		<td rowspan="3">
			[img]images/Home_40.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2">
			[img]images/Home_41.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="2">
			[img]images/Home_42.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td colspan="19">
			[img]images/Home_43.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
	</tr>
	<tr>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td>
			[img]images/spacer.gif[/img]</td>
		<td></td>
	</tr>
</table>
<map name="Home_01_Map">
<area shape="rect" alt="" coords="162,9,593,54" href="#">
</map>
<map name="Home_06_Map">
<area shape="rect" alt="" coords="25,9,85,29" href="#">
</map>
<map name="Home_10_Map">
<area shape="rect" alt="" coords="22,5,82,31" href="#">
</map>
<map name="Home_12_Map">
<area shape="rect" alt="" coords="17,48,18,75" href="#">
</map>
<map name="Home_13_Map">
<area shape="rect" alt="" coords="1,126,21,147" href="#">
<area shape="rect" alt="" coords="3,89,22,114" href="#">
<area shape="rect" alt="" coords="0,48,22,75" href="#">
<area shape="rect" alt="" coords="1,8,22,40" href="#">
</map>
<map name="Home_17_Map">
<area shape="rect" alt="" coords="21,7,110,32" href="#">
</map>
<map name="Home_25_Map">
<area shape="rect" alt="" coords="18,5,136,24" href="#">
</map>
<map name="Home_27_Map">
<area shape="rect" alt="" coords="18,0,136,1" href="#">
</map>
<map name="Home_39_Map">
<area shape="rect" alt="" coords="5,5,61,15" href="#">
</map>
<map name="Home_40_Map">
<area shape="rect" alt="" coords="0,5,4,15" href="#">
</map>




</center>

</body>
</html>

Ho provato anche con le dimensioni in pixel ma mi da lo stesso problema

**kontrasto** · 28-06-2009, 16:41

Ciao,

innanzitutto tutto il contenuto della pagina deve essere compreso nel <body>, quindi inizia a spostare i due div con position: absolute dopo il tag <body>. Per il resto dovresti assegnare la proprietà position: relative al tag table e posizoinare i due div di conseguenza. Se non sai cosa intendo, cerca qualche tutorial sul posizionamento relativo-assoluto, è abbastanza semplice.

Discussione: Problema con div che si sposta in base alla risoluzione

Strumenti discussione

Ricerca discussione

Visualizza

Problema con div che si sposta in base alla risoluzione

Permessi di invio