Immagini non ridimensionabili, posizionamento fisso.

**WebMinus** · 17-06-2011, 10:47

Scusate, sono di nuovo io. Non riesco a posizionare come vorrei le immagini in una pagina. Praticamente ho utilizzato degli zindex per giocare con i livelli. ma per un corretto utilizzo è necessario che le immagini restino sempre sovrapposte, a prescindere dalle dimensioni della finestra browser. Ho provato con tutte le combinazioni di posizione (position absolute, relative, fixed), ma niente. Vi scrivo il codice sotto, grazie mille.

codice:

<style type="text/css">
a img{
margin-left: 20px;
margin-top: 25px;
width:60px;
border:0;
}
a:hover img{
margin-left: 0px;
margin-top: 0px;
width:100px;
}
#schermo { position: absolute;
margin-left: 300px;
margin-top: 0px;
z-index: 1;}
#casapagina { position: absolute;
z-index: 3;}
#imac { position: absolute;
z-index: 2;
margin-left: 70px;
margin-top: 40px;}
</style>
</head>

<body>
<div id="casapagina">
 [img]../img/botton_casapagina.png[/img] 
</div>
<div id="imac">
<p align="center">
[img]img/imac.png[/img]
<map name="date" id="date">
<area shape="rect" coords="35, 65, 150, 100" href="img/13-05-2011/tasti.png" target="#tasti">
</map>
</div>
<div id="schermo">
<iframe name="schermo" height="550px" width="900px" border="0" src="1.html">
</iframe>
</div>
</body>

</html>

**Prill** · 17-06-2011, 14:30

Esempio:

codice:

...
<style type="text/css">
#main {
   position:relative; /* così il tutto sarà posizionato in base a questo contenitore */
   /* aggiungere le caratteristiche volute per il div, dimensioni eccetera */
   width:600px;
   height:500px;
   margin:0 auto;
}
#layer1 {
   position:absolute;
   width:300px;/* da variare secondo le proprie esigenze */
   height:300px;/* da variare secondo le proprie esigenze */
   top:100px;/* da variare secondo le proprie esigenze */
   left:100px;/* da variare secondo le proprie esigenze */
   z-index:2;
   background-color:green; /* solo per visualizzare il div */
}
#layer2 {
   position:absolute;
   width:300px;
   height:300px;
   top:150px;
   left:150px;
   z-index:3;
   background-color:yellow;
}
#layer3 {
   position:absolute;
   width:300px;
   height:300px;
   top:200px;
   left:200px;
   z-index:4;
   background-color:pink;
}
</style>

</head>

<body>

<div id="main">
   <div id="layer1"></div>
   <div id="layer2"></div>
   <div id="layer3"></div>
</div>
...

**WebMinus** · 17-06-2011, 17:42

Argh. Quindi per tenere tutto fermo basta mettere tutto in una <div> che racchiuda tutto il resto. E' questo il punto vero?

Grazie mille!

**WebMinus** · 17-06-2011, 18:08

Scusa una domanda: perchè non hai messo lo zindex 1?

**Prill** · 17-06-2011, 20:30

non l'ho messo perché scrivendo stavo tenendo il conto dei div e il layer1 era il secondo, è del tutto casuale, puoi cominciare se ritieni da 1, ma potresti usare anche 10 20 e 30, non è rilevante, l'importante è che siano valori crescenti

**WebMinus** · 18-06-2011, 01:43

Ok, chiaro. Grazie mille ancora.

**WebMinus** · 18-06-2011, 23:23

Mmm... io ho provato a fare come dici, ma mentre i frame (o i div #tastiera e #schermo) mi restano in posizione fissa, i div #casapagina e #imac mi si continuano ad adattare allo schermo come dimensione. Non riesco a trovare errori nel codice però... Sarà sicuramente un errore del cacchio e mi farò l'ennesima figura da nubbie!

Porta pazienza Prill.

codice:

        <style type="text/css">
	#main{ position: relative;
			   margin: 0;}
	#casapagina { position: absolute;
				  z-index: 5;}
	#imac { position: absolute;
				z-index: 3;
				margin-left: 70px;
				margin-top: 40px;}	
	#tastiera { position: absolute;
				z-index: 4;
				margin-left: 321px;
				margin-top: 378px;}
	#schermo { position: absolute;
			   margin-left: 300px;
			   margin-top: 100px;
				z-index: 2;}
	
	
        </style>
        </head>

            <body>
              <div id="main">
                <div id="casapagina">
                 [img]../img/botton_casapagina.jpg[/img] 
                </div>
                <div id="imac">
                [img]imac.png[/img]
                <map name="date">
                <area shape="rect" coords="35, 65, 150, 100" href="13-05-11/frames/tastiera.html" target="#tastera">
                </map>
                </div>
                <div id="tastiera">
                <iframe name="tastiera" height="150px" width="460px" src="13-05-11/frames/tastiera.html">
                </iframe>
                </div>
                <div id="schermo">
                <iframe name="schermo" height="400px" width="900px" border="3" src="13-05-11/frames/1.html">
                </iframe>
                </div>
               
              </div>
            </body>

</html>

**WebMinus** · 21-06-2011, 00:50

Argh! Ho risolto. Avevo messo delle dimensioni in percentuale invece che in px.

Discussione: Immagini non ridimensionabili, posizionamento fisso.

Strumenti discussione

Ricerca discussione

Visualizza

Immagini non ridimensionabili, posizionamento fisso.

Permessi di invio