Immagini Menù

**Lollo5551** · 12-04-2012, 21:03

Salve a tutti, ho un problemino nella creazione di una pagina.

Sono un novizio o quasi, dopo aver impostato lo sfondo senza problemi, ne ho incontrati alcuni inserendo alcune immagini che utilizzo come "voci di menù", cioè in pratica invece di avere i soliti menù drop down, ho sfruttato delle immagini vere e proprie come "bottoni".

Vengo al dunque, il mio problema sta nel fatto che, mentre lo sfondo si adegua comunque alla finestra di navigazione anche se la riduco, se cambio schermo ecc ecc, le immagini usate per il menù "fluttuano" nella pagina cambiando posizione a seconda della risoluzione o della grandezza della finestra (in sostanza loro rimangono ferme mentre lo sfondo cambia dimensioni, mi ritrovo quindi, se clicco sulla barra di scroll, le mie opzioni che vanno a destra e sinistra mentre lo sfondo è fermo o vicevera.

Qualcuno gentilmente ha un suggerimento su che comando utilizzare per fare in modo che, come lo sfondo, anch'esse seguano regolarmente l'andamento della pagina in modo da non vederle in posizioni diverse ogni volta.

p.s. anche usando "fixedbackground.js" che mi sistema lo sfondo a seconda della risoluzione, il problema delle icone permane.

**carlomarangoni** · 12-04-2012, 23:00

Il discorso del layout che si adatta a tutto è lungo e complesso e a mio avviso è impossibile affrontarlo con dei post, inquanto non è che si tratti solo di un comando come tu dici ma di una progettazione vera e propria non molto facile.

Ti consiglio di usare un layout a dimensione fissa

**Bellu** · 13-04-2012, 09:27

potresti postare il codice?

**Lollo5551** · 13-04-2012, 11:22

Ok, immagino già sia incasinato e semplificabile

codice:

<HTML> 
<head> 
<title> X </title>
 <META name="description" content="X page"> 
<META name="keywords" content=" "> 
</head> 
<BODY> 
 
<!-- <script src="fixedbackground.js" type="text/javascript"></script> 
<body onload="fixedBackground('SfondoKarlo.jpg')"> --> 

 
<body style="background-image: url(SfondoKarlo.jpg);
   background-repeat: no-repeat; 
   background-position: Center; 
   background-size: 1024px 768px; 
   background-position: fixed;" > 

 
<DIV STYLE="position:fixed; top:90px; left:160px"> 
[img]HeaderKarlo.png[/img] 
</DIV> 

 
<DIV STYLE="position:fixed; top:160px; left:120px"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Talento</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<meta name="generator" content="HAPedit 3.1"> 
<style type="text/css"> 
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222} a.buttone{display:block;width: 482px;height: 113px; margin: 1em; 
   font: bold 18px/35px "Trebuchet MS",Arial,sans-serif; 
   text-align:center;text-decoration: none; 
   background: url(Talentoroll.png) no-repeat -70 0} 
a.buttone:hover{background-position:-70 -113px;} 
</style> 
</head> 
<body> 
<div>  
</div> 
</body> 
</html> 
</DIV> 

 
<DIV STYLE="position:fixed; top:305px; left:285px"> 
[img]Disco.png[/img] 
</DIV> 

 
<DIV STYLE="position:fixed; top:380px; left:120px"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Cassettina</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<meta name="generator" content="HAPedit 3.1"> 
<style type="text/css">
 body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222} a.buttond{display:block;width: 303px;height: 384px; margin: 1em; 
   font: bold 18px/35px "Trebuchet MS",Arial,sans-serif; 
   text-align:center;text-decoration: none; 
   background: url(TVroll.png) no-repeat 0 0} 
a.buttond:hover{background-position:0 -384px;} 
</style> 
</head> 
<body> 
<div> 

</div> 
</body> 
</html> 
</DIV> 

 
<DIV STYLE="position:fixed; top:280px; left:120px"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Cassettina</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<meta name="generator" content="HAPedit 3.1"> 
<style type="text/css"> 
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222} a.button{display:block;width: 331px;height: 227px; margin: 1em; 
   font: bold 18px/35px "Trebuchet MS",Arial,sans-serif; 
   text-align:center;text-decoration: none; 
   background: url(Cassettinaroll.png) no-repeat 0 0} 
a.button:hover{background-position:0 -227px;} 
</style> 
</head> 
<body> 
<div> 
 
</div> 
</body> 
</html> 
</DIV> 

 
<DIV STYLE="position:fixed; top:570px; left:500px"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Talento</title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
<meta name="generator" content="HAPedit 3.1"> 
<style type="text/css"> 
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222} a.buttonc{display:block;width: 303px;height: 269px; margin: 1em; 
   font: bold 18px/35px "Trebuchet MS",Arial,sans-serif; 
   text-align:center;text-decoration: none; 
   background: url(Scatoloneroll.png) no-repeat 0 0} 
a.buttonc:hover{background-position:0 -269px;} 
</style> 
</head> 
<body> 
<div> 
 
</div> 
</body> 
</html> 
</DIV> 
</BODY> 
</HTML>

**Bellu** · 13-04-2012, 12:07

obbiettivamente, questo codice è incasinato...

senza offesa!

ti consiglio inanzitutto di fare un css, perchè cosi è più difficile andare a trovare degli errori...

Correggimi se sbaglio:

nell'evento hover riposizioni il background usando delle coordinate come ad esempio top: xxx px.

Quindi se utilizzi uno schermo con una risoluzione diversa da quella con cui hai sviluppato il sito, oppure ridimensioni la finestra (quindi la risoluzione diventa minore) è del tutto normale che il sito si smonti.

Perchè le dimensioni sono in questi casi diverse, quindi il background andrà a finire in posizioni diverse a seconda della risoluzione.

Il mio consiglio è di abbandonare questa soluzione e farè un drop down in jquery, su internet ne trovi molti già fatti e di semplice utilizzo.

Spero di averti aiutato,

Bellu

**Lollo5551** · 13-04-2012, 13:34

ma figurati nessuna offesa anzi, più sono dure le critiche più imparo. E' proprio quello che voglio fare migliorare.

in teoria quello che dice nei button, nella stringa hover, è il posizionamento dello sfondo dell'immagine per avere l'effetto blur, in pratica di quanto si deve spostare per avere l'immagine 2 che sovrappone la 1, non sposta lo sfondo che è posizionato precedentemente.

In effetti la soluzione iniziale che avevo provato era proprio quella di un menù drop down, ma poi si era optato per questa soluzione perchè graficamente più "carina" anche se notevolmente più incasinata.

I CSS era una soluzione che avevo anche provato, ma devo esserne allergico non riesco a farli interagire col foglio html, per questo ho tutto su un unico foglio

Discussione: Immagini Menù

Strumenti discussione

Ricerca discussione

Visualizza

Immagini Menù

Permessi di invio