|
|||||||
|
|
|
 |
|
|
Strumenti |
14-12-2007, 08:18
|
#1 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
[xhtml] inserimento script in sito
problemone devo cambiare il menu perche' devo inserire dei sottomenu, e siccome sono veramente tanti i link da mettere nel menu devo fare un menu a scorrimento altrimenti viene gigantesco, cosi' ho trovato uno script da poter utilizzare e ne ho cambiato i colori per adattarlo al mio sito.
adesso viene il problema siccome il sito ha un layout fluido e si adatta alla risoluzione e prima il menu aveva una dimensione del 16% e si adattava al ridimensionamento della pagina, io ho pensato di creare una cella al 16% ed inserirci all'interno lo script. purtroppo ci ho fatto le due di notte e non ci sono riuscito ne a farlo funzionare ne a farlo ridimensionare. aiutoooooooooooooooooooooooooooooo |
|
|
|
14-12-2007, 08:18
|
#2 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
http://leomeya.altervista.org ->menu prima della modifica
http://leomeya.altervista.org/Prova/index.html -> menu dopo la modifica http://leomeya.altervista.org/Prova/Script/esempio.htm -> esempio dello script funzionante |
|
|
|
|
14-12-2007, 08:30
|
#3 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Ecco :
Codice:
<html>
<head>
<title>Menu verticale - Esempio JavaScript scaricato da HTML.it</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="HTML.it - il sito italiano sul Web publishing" />
<meta name="Keywords" content="Ad ogni apertura di pagina questo script genera un differente colore di sfondo." />
<meta name="Owner" content="HTML.it srl" />
<meta name="Author" content="HTML.it srl" />
<meta name="Copyright" content="HTML.it srl" />
<script type="text/javascript" src="ClickShowHideMenu.js"></script>
<style type="text/css">
body {
background-color: #FFFFFF;
}
.click-menu {
width :100%;
}
.click-menu .box1 {
color: #000000;
background-image: url(Immagini/Menu.jpg);
background-repeat: repeat-x;
}
.click-menu .box1-hover {
color: #FFFFFF;
background-image: url(Immagini/Menu.jpg);
background-repeat: repeat-x;
}
.click-menu .box1-open {
color: #FFFFFF;
background-image: url(Immagini/Menu2.jpg);
background-repeat: repeat-x;
}
.click-menu .box1-open-hover {
color: #000000;
background-image: url(Immagini/Menu2.jpg);
background-repeat: repeat-x;
}
.click-menu .box1,
.click-menu .box1-hover,
.click-menu .box1-open,
.click-menu .box1-open-hover {
text-indent: 12px;
font-weight: bold;
font-size: 14px;
line-height: 31px;
font-family: arial;
cursor: pointer;
width : 100%;
}
.click-menu .section {
width : 100%;
background-color: #000000;
font-family: arial;
font-size: 13px;
line-height: 15px;
padding: 0 0 5px 10px;
display: none;
}
.click-menu .section a {
color: #ffffff;
text-decoration: none;
white-space: nowrap;
}
.click-menu .section a:hover {
color: #000000;
text-decoration: none;
white-space: nowrap;
}
.click-menu .box2 {
border-color: #ffc400;
border-width: 1px;
border-style: none none solid solid;
padding: 1px 0 2px 6px;
}
.click-menu .box2-hover {
border-color: #ffc400;
border-width: 1px;
border-style: none none solid solid;
padding: 1px 0 2px 6px;
background-color: #9F9F9F;
}
</style>
</head>
<body>
<script type="text/javascript">
/* preload images, you can remove this code */
var img = new Array();
img[0] = new Image();
img[0].src = "images/button1.gif";
img[1] = new Image();
img[1].src = "images/button1-click.gif";
</script>
<!-- Imposta qui la percentuale che vuoi ottenere -->
<table width="25%"><tr><td style="height: 500px; background-color: #000000; vertical-align: top; padding: 10px;">
<table width="100%" cellspacing="0" cellpadding="0" id="click-menu2" class="click-menu">
<tr>
<td width="100%">
<div class="box1">Products</div>
<div class="section">
<div class="box2"><a href="example2.html">Product One</a></div>
<div class="box2"><a href="example2.html">Product Two</a></div>
<div class="box2"><a href="example2.html">Product Three</a></div>
<div class="box2"><a href="example2.html">Product Four</a></div>
<div class="box2"><a href="example2.html">Product Five</a></div>
</div>
</td>
</tr>
<tr><td height="8"></td></tr>
<tr>
<td>
<div class="box1">Partners</div>
<div class="section">
<div class="box2"><a href="example2.html">Partner Benefits</a></div>
<div class="box2"><a href="example2.html">Partner Application</a></div>
<div class="box2"><a href="example2.html">Partner Listing</a></div>
</div>
</td>
</tr>
<tr><td height="8"></td></tr>
<tr>
<td>
<div class="box1">Customers</div>
<div class="section">
<div class="box2"><a href="example2.html">Customer One</a></div>
<div class="box2"><a href="example2.html">Customer Two</a></div>
<div class="box2"><a href="example2.html">Customer Three</a></div>
<div class="box2"><a href="example2.html">Customer Four</a></div>
<div class="box2"><a href="example2.html">Customer Five</a></div>
<div class="box2"><a href="example2.html">Customer Six</a></div>
<div class="box2"><a href="example2.html">Customer Seven</a></div>
</div>
</td>
</tr>
<tr><td height="8"></td></tr>
<tr>
<td>
<div class="box1">About Us</div>
<div class="section">
<div class="box2"><a href="example2.html">Executive Team</a></div>
<div class="box2"><a href="example2.html">Investors</a></div>
<div class="box2"><a href="example2.html">Career</a></div>
<div class="box2"><a href="example2.html">Press Center</a></div>
<div class="box2"><a href="example2.html">Success Stories</a></div>
<div class="box2"><a href="example2.html">Contact Us</a></div>
</div>
</td>
</tr>
</table>
</td></tr></table>
<script type="text/javascript">
var clickMenu2 = new ClickShowHideMenu('click-menu2');
clickMenu2.init();
</script>
</body>
</html>
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 08:39
|
#4 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
aspetta ti posto l'intero codice del sito tanto l'ho fatto per imparare
COME ERA PRIMA -------------------------------------------------------------------------- codice index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Home</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="default01l.css" rel="stylesheet" type="text/css" title="default" /> </head> <body> <div id="struttura"> <div id="header"><br /> PianetaLeo</div> <div id="menu01v"> <ul> <li> <div align="center"><a href="index.html">Home</a></div> </li> <li> <div align="center"><a href="foto.html">Foto Album</a></div> </li> <li> <div align="center"><a href="fotoslideshow.html">Foto Slideshow</a></div> </li> <li> <div align="center"><a href="http://www.flickr.com/photos/leomeya/sets/72157603433226405/" title="Foto Su Flickr" target="_blank">Flickr Foto</a></div> </li> <li> <div align="center"><a href="http://www.flickr.com/photos/leomeya/map/" title="Foto Su Flickr Map" target="_blank">Flickr Map</a></div> </li> </ul> </div> <div id="content"> <h1 align="center">Una foto non scattata è un ricordo che non c'è!</h1> <h1 align="center">Il Mio Mondo Di Ricordi </h1> <table width=100% height=100%> <tr> <td align=center valign=center> <!-- start trippermap.com code --> <script type="text/javascript"><!-- trippermap_user = "9970919@N06"; trippermap_width = 630; trippermap_height = 630; //--></script> <script src="http://www.trippermap.com/gmap/gmap.js" type="text/javascript"></script> <!-- end trippermap.com code --> </td> </tr> </table> </div> <div id="footer"></div> </div> </body> </html> -------------------------------------------------------------------------- codice .css body { background-color: #fff; color: #000; font-family: arial, helvetica, verdana, tahoma, sans-serif; font-size: 80%; margin: 0em; padding: 0em; } #struttura { background-color: #000000; color: #000; line-height: 180%; margin: 0em; padding: 0em; text-align: left; width: 100%; } #header { background-color: #000000; background-image: url(Immagini/Banner.jpg); background-position: right bottom; background-repeat: no-repeat; border: 1px solid #000; border-bottom: 1px; border-left: 0; border-right: 0; border-top: 0; color: #ffc400; height: 148px; padding-left: 0.6em; font-family: "Blackoak Std"; font-size: 30px; font-style: italic; font-weight: normal; font-variant: normal; } #menu01v { float: left; font: 90% Arial, Helvetica, sans-serif; margin: 0; padding: 0; width: 16%; } #menu01v ul { list-style: none; margin: 0; padding: 0; } #menu01v li { display: inline; font-size: 1.1em; margin: 0; padding: 0; } #menu01v a:link, #menu01v a:visited { border: 1px solid #666; color: #fff; display: block; margin: 0.06em 0; padding: 0.3em 0.6em; text-decoration: none; background-color: #000000; } #menu01v a:hover, #menu01v a:focus, #menu01v a:active { border-color: #41545F; color: #000; padding-left: 0.95em; text-transform: uppercase; font-weight: bold; background-color: #ffc400; } #content { background: #fff; border-left: 1px solid #000; color: #000; margin-left: 16%; padding: 1.25em 0.8em; padding: 0.625em; } #content p { font-size: 100%; line-height: 1.8em; padding-left: 1em; padding-right: 1em; } #content h1 { background-color: #FFFFFF; color: #000000; padding-bottom: 0.3em; padding-top: 0.3em; font-family: Georgia, "Times New Roman", Times, serif; font-size: 180%; font-style: italic; font-weight: bold; font-variant: normal; } #content h2 { background: #fff; border-bottom: 1px dotted #FF9006; color: #940D1E; font: normal 150% Georgia, "Times New Roman", Times, serif; padding-bottom: 0.3em; } #content a:link, #content a:visited { background-color: #fff; color: #41545F; font-size: 95%; font-weight: normal; text-decoration: underline; } #content a:hover { background-color: #FFFFFF; color: #fff; text-decoration: none; } #footer { border: 1px solid #000; border-bottom: 1px; border-left: 0; border-right: 0; border-top: 1px; color: #fff; font-family: helvetica, arial, verdana, tahoma, sans-serif; font-size: 80%; margin: 0 auto; padding: 0.8em 0.8em; text-align: center; background-color: #000000; } #footer a:link, #footer a:visited { background-color: #000000; color: #fff; text-decoration: underline; } #footer a:hover { background-color: #fff; color: #000000; text-decoration: none; } .click-menu { } .click-menu .box1 { color: #000000; background-image: url(Script/Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-hover { color: #FFFFFF; background-image: url(Script/Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-open { color: #FFFFFF; background-image: url(Script/Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1-open-hover { color: #000000; background-image: url(Script/Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1, .click-menu .box1-hover, .click-menu .box1-open, .click-menu .box1-open-hover { text-indent: 12px; font-weight: bold; font-size: 14px; line-height: 31px; font-family: arial; cursor: pointer; width: 150px; } .click-menu .section { background-color: #000000; font-family: arial; font-size: 13px; line-height: 15px; padding: 0 0 5px 10px; display: none; } .click-menu .section a { color: #ffffff; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #000000; text-decoration: none; white-space: nowrap; } .click-menu .box2 { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; } .click-menu .box2-hover { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; background-color: #9F9F9F; } |
|
|
|
|
14-12-2007, 08:40
|
#5 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
E che ci devo fare con questo?
E comunque usa i tag code!
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 08:41
|
#6 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
COME E' ORA
----------------------------------------------------------------------------------------------- codice index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Home</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="default01l.css" rel="stylesheet" type="text/css" title="default" /> <script type="text/javascript" src="ClickShowHideMenu.js"></script> </head> <body> <div id="struttura"> <div id="header"><br /> PianetaLeo</div> <div id="menu01v"> <ul> <script type="text/javascript"> /* preload images, you can remove this code */ var img = new Array(); img[0] = new Image(); img[0].src = "images/button1.gif"; img[1] = new Image(); img[1].src = "images/button1-click.gif"; </script> <table width="16%" border="0" cellpadding="0"> <tr class="click-menu"> <td><div class="box1">Products</div> <div class="section"> <div class="box2"><a href="example2.html">Product One</a></div> <div class="box2"><a href="example2.html">Product Two</a></div> <div class="box2"><a href="example2.html">Product Three</a></div> <div class="box2"><a href="example2.html">Product Four</a></div> <div class="box2"><a href="example2.html">Product Five</a></div> </div></td> </tr> <tr class="click-menu"> <td height="8"></td> </tr> <tr class="click-menu"> <td><div class="box1">Partners</div> <div class="section"> <div class="box2"><a href="example2.html">Partner Benefits</a></div> <div class="box2"><a href="example2.html">Partner Application</a></div> <div class="box2"><a href="example2.html">Partner Listing</a></div> </div></td> </tr> <tr class="click-menu"> <td height="8"></td> </tr> <tr class="click-menu"> <td><div class="box1">Customers</div> <div class="section"> <div class="box2"><a href="example2.html">Customer One</a></div> <div class="box2"><a href="example2.html">Customer Two</a></div> <div class="box2"><a href="example2.html">Customer Three</a></div> <div class="box2"><a href="example2.html">Customer Four</a></div> <div class="box2"><a href="example2.html">Customer Five</a></div> <div class="box2"><a href="example2.html">Customer Six</a></div> <div class="box2"><a href="example2.html">Customer Seven</a></div> </div></td> </tr> <tr class="click-menu"> <td height="8"></td> </tr> <tr class="click-menu"> <td><div class="box1">About Us</div> <div class="section"> <div class="box2"><a href="example2.html">Executive Team</a></div> <div class="box2"><a href="example2.html">Investors</a></div> <div class="box2"><a href="example2.html">Career</a></div> <div class="box2"><a href="example2.html">Press Center</a></div> <div class="box2"><a href="example2.html">Success Stories</a></div> <div class="box2"><a href="example2.html">Contact Us</a></div> </div></td> </tr> <tr> <th scope="row"> </th> </tr> </table> <script type="text/javascript"> var clickMenu2 = new ClickShowHideMenu('click-menu2'); clickMenu2.init(); </script> </ul> </div> <div id="content"> <h1 align="center">Una foto non scattata è un ricordo che non c'è!</h1> <h1 align="center">Il Mio Mondo Di Ricordi </h1> <table width=100% height=100%> <tr> <td align=center valign=center> <!-- start trippermap.com code --> <script type="text/javascript"><!-- trippermap_user = "9970919@N06"; trippermap_width = 630; trippermap_height = 630; //--></script> <script src="http://www.trippermap.com/gmap/gmap.js" type="text/javascript"></script> <!-- end trippermap.com code --> </td> </tr> </table> </div> <div id="footer"></div> </div> </body> </html> -------------------------------------------------------------------------- codice .css body { background-color: #fff; color: #000; font-family: arial, helvetica, verdana, tahoma, sans-serif; font-size: 80%; margin: 0em; padding: 0em; } #struttura { background-color: #000000; color: #000; line-height: 180%; margin: 0em; padding: 0em; text-align: left; width: 100%; } #header { background-color: #000000; background-image: url(Immagini/Banner.jpg); background-position: right bottom; background-repeat: no-repeat; border: 1px solid #000; border-bottom: 1px; border-left: 0; border-right: 0; border-top: 0; color: #ffc400; height: 148px; padding-left: 0.6em; font-family: "Blackoak Std"; font-size: 30px; font-style: italic; font-weight: normal; font-variant: normal; } #menu01v { float: left; font: 90% Arial, Helvetica, sans-serif; margin: 0; padding: 0; width: 16%; } #menu01v ul { list-style: none; margin: 0; padding: 0; } #menu01v li { display: inline; font-size: 1.1em; margin: 0; padding: 0; } #menu01v a:link, #menu01v a:visited { border: 1px solid #666; color: #fff; display: block; margin: 0.06em 0; padding: 0.3em 0.6em; text-decoration: none; background-color: #000000; } #menu01v a:hover, #menu01v a:focus, #menu01v a:active { border-color: #41545F; color: #000; padding-left: 0.95em; text-transform: uppercase; font-weight: bold; background-color: #ffc400; } #content { background: #fff; border-left: 1px solid #000; color: #000; margin-left: 16%; padding: 1.25em 0.8em; padding: 0.625em; } #content p { font-size: 100%; line-height: 1.8em; padding-left: 1em; padding-right: 1em; } #content h1 { background-color: #FFFFFF; color: #000000; padding-bottom: 0.3em; padding-top: 0.3em; font-family: Georgia, "Times New Roman", Times, serif; font-size: 180%; font-style: italic; font-weight: bold; font-variant: normal; } #content h2 { background: #fff; border-bottom: 1px dotted #FF9006; color: #940D1E; font: normal 150% Georgia, "Times New Roman", Times, serif; padding-bottom: 0.3em; } #content a:link, #content a:visited { background-color: #fff; color: #41545F; font-size: 95%; font-weight: normal; text-decoration: underline; } #content a:hover { background-color: #FFFFFF; color: #fff; text-decoration: none; } #footer { border: 1px solid #000; border-bottom: 1px; border-left: 0; border-right: 0; border-top: 1px; color: #fff; font-family: helvetica, arial, verdana, tahoma, sans-serif; font-size: 80%; margin: 0 auto; padding: 0.8em 0.8em; text-align: center; background-color: #000000; } #footer a:link, #footer a:visited { background-color: #000000; color: #fff; text-decoration: underline; } #footer a:hover { background-color: #fff; color: #000000; text-decoration: none; } .click-menu { } .click-menu .box1 { color: #000000; background-image: url(Script/Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-hover { color: #FFFFFF; background-image: url(Script/Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-open { color: #FFFFFF; background-image: url(Script/Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1-open-hover { color: #000000; background-image: url(Script/Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1, .click-menu .box1-hover, .click-menu .box1-open, .click-menu .box1-open-hover { text-indent: 12px; font-weight: bold; font-size: 14px; line-height: 31px; font-family: arial; cursor: pointer; width: 150px; } .click-menu .section { background-color: #000000; font-family: arial; font-size: 13px; line-height: 15px; padding: 0 0 5px 10px; display: none; } .click-menu .section a { color: #ffffff; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #000000; text-decoration: none; white-space: nowrap; } .click-menu .box2 { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; } .click-menu .box2-hover { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; background-color: #9F9F9F; } |
|
|
|
|
14-12-2007, 08:42
|
#7 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Codice:
USA I TAG CODE
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 08:43
|
#8 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
codice che era nello script di esempio
<html> <head> <title>Menu verticale - Esempio JavaScript scaricato da HTML.it</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="it" /> <meta name="Robots" content="All" /> <meta name="Description" content="HTML.it - il sito italiano sul Web publishing" /> <meta name="Keywords" content="Ad ogni apertura di pagina questo script genera un differente colore di sfondo." /> <meta name="Owner" content="HTML.it srl" /> <meta name="Author" content="HTML.it srl" /> <meta name="Copyright" content="HTML.it srl" /> <script type="text/javascript" src="ClickShowHideMenu.js"></script> <style type="text/css"> body { background-color: #000000; } .click-menu { } .click-menu .box1 { color: #000000; background-image: url(Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-hover { color: #FFFFFF; background-image: url(Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-open { color: #FFFFFF; background-image: url(Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1-open-hover { color: #000000; background-image: url(Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1, .click-menu .box1-hover, .click-menu .box1-open, .click-menu .box1-open-hover { text-indent: 12px; font-weight: bold; font-size: 14px; line-height: 31px; font-family: arial; cursor: pointer; width: 150px; } .click-menu .section { background-color: #000000; font-family: arial; font-size: 13px; line-height: 15px; padding: 0 0 5px 10px; display: none; } .click-menu .section a { color: #ffffff; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #000000; text-decoration: none; white-space: nowrap; } .click-menu .box2 { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; } .click-menu .box2-hover { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; background-color: #9F9F9F; } </style> </head> <body> <script type="text/javascript"> /* preload images, you can remove this code */ var img = new Array(); img[0] = new Image(); img[0].src = "images/button1.gif"; img[1] = new Image(); img[1].src = "images/button1-click.gif"; </script> <table><tr><td style="height: 500px; background-color: #000000; vertical-align: top; padding: 10px;"> <table cellspacing="0" cellpadding="0" id="click-menu2" class="click-menu"> <tr> <td> <div class="box1">Products</div> <div class="section"> <div class="box2"><a href="example2.html">Product One</a></div> <div class="box2"><a href="example2.html">Product Two</a></div> <div class="box2"><a href="example2.html">Product Three</a></div> <div class="box2"><a href="example2.html">Product Four</a></div> <div class="box2"><a href="example2.html">Product Five</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">Partners</div> <div class="section"> <div class="box2"><a href="example2.html">Partner Benefits</a></div> <div class="box2"><a href="example2.html">Partner Application</a></div> <div class="box2"><a href="example2.html">Partner Listing</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">Customers</div> <div class="section"> <div class="box2"><a href="example2.html">Customer One</a></div> <div class="box2"><a href="example2.html">Customer Two</a></div> <div class="box2"><a href="example2.html">Customer Three</a></div> <div class="box2"><a href="example2.html">Customer Four</a></div> <div class="box2"><a href="example2.html">Customer Five</a></div> <div class="box2"><a href="example2.html">Customer Six</a></div> <div class="box2"><a href="example2.html">Customer Seven</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">About Us</div> <div class="section"> <div class="box2"><a href="example2.html">Executive Team</a></div> <div class="box2"><a href="example2.html">Investors</a></div> <div class="box2"><a href="example2.html">Career</a></div> <div class="box2"><a href="example2.html">Press Center</a></div> <div class="box2"><a href="example2.html">Success Stories</a></div> <div class="box2"><a href="example2.html">Contact Us</a></div> </div> </td> </tr> </table> </td></tr></table> <script type="text/javascript"> var clickMenu2 = new ClickShowHideMenu('click-menu2'); clickMenu2.init(); </script> </body> </html> |
|
|
|
|
14-12-2007, 08:44
|
#9 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
non capisco perche' non funzioni
|
|
|
|
|
14-12-2007, 08:46
|
#10 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Il codice che ti ho mandato all'inizio fa si che il menu si adatti alla tabella in cui è contenuto, tabella la cui larghezza la puoi impostare in percentuale, come è scritto nel commeto nel codice.
Usa quel codice e inseriscilo nelle tue pagine.
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 08:47
|
#11 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
provo subito
|
|
|
|
|
14-12-2007, 08:57
|
#12 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
ho seguito il tuo consiglio ma continua a non funzionare secondo me perche' quelle all'interno della tabellasono delle immagini è per quello che non si ridimensiona, come posso fare?altra cosa continua a non funzionare lo script perche'?
Seguendo il tuo consiglio index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> <head> <title>Home</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="default01l.css" rel="stylesheet" type="text/css" title="default" /> <script type="text/javascript" src="ClickShowHideMenu.js"></script> </head> <body> <div id="struttura"> <div id="header"><br /> PianetaLeo</div> <div id="menu01v"> <ul> <script type="text/javascript"> /* preload images, you can remove this code */ var img = new Array(); img[0] = new Image(); img[0].src = "images/button1.gif"; img[1] = new Image(); img[1].src = "images/button1-click.gif"; </script> <table width="16%"><tr><td style="height: 500px; background-color: #000000; vertical-align: top; padding: 0px;"> <table width="100%" cellspacing="0" cellpadding="0" id="click-menu2" class="click-menu"> <tr> <td width="100%"> <div class="box1">Products</div> <div class="section"> <div class="box2"><a href="example2.html">Product One</a></div> <div class="box2"><a href="example2.html">Product Two</a></div> <div class="box2"><a href="example2.html">Product Three</a></div> <div class="box2"><a href="example2.html">Product Four</a></div> <div class="box2"><a href="example2.html">Product Five</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">Partners</div> <div class="section"> <div class="box2"><a href="example2.html">Partner Benefits</a></div> <div class="box2"><a href="example2.html">Partner Application</a></div> <div class="box2"><a href="example2.html">Partner Listing</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">Customers</div> <div class="section"> <div class="box2"><a href="example2.html">Customer One</a></div> <div class="box2"><a href="example2.html">Customer Two</a></div> <div class="box2"><a href="example2.html">Customer Three</a></div> <div class="box2"><a href="example2.html">Customer Four</a></div> <div class="box2"><a href="example2.html">Customer Five</a></div> <div class="box2"><a href="example2.html">Customer Six</a></div> <div class="box2"><a href="example2.html">Customer Seven</a></div> </div> </td> </tr> <tr><td height="8"></td></tr> <tr> <td> <div class="box1">About Us</div> <div class="section"> <div class="box2"><a href="example2.html">Executive Team</a></div> <div class="box2"><a href="example2.html">Investors</a></div> <div class="box2"><a href="example2.html">Career</a></div> <div class="box2"><a href="example2.html">Press Center</a></div> <div class="box2"><a href="example2.html">Success Stories</a></div> <div class="box2"><a href="example2.html">Contact Us</a></div> </div> </td> </tr> </table> </td></tr></table> <script type="text/javascript"> var clickMenu2 = new ClickShowHideMenu('click-menu2'); clickMenu2.init(); </script> </ul> </div> <div id="content"> <h1 align="center">Una foto non scattata è un ricordo che non c'è!</h1> <h1 align="center">Il Mio Mondo Di Ricordi </h1> <table width=100% height=100%> <tr> <td align=center valign=center> <!-- start trippermap.com code --> <script type="text/javascript"><!-- trippermap_user = "9970919@N06"; trippermap_width = 630; trippermap_height = 630; //--></script> <script src="http://www.trippermap.com/gmap/gmap.js" type="text/javascript"></script> <!-- end trippermap.com code --> </td> </tr> </table> </div> <div id="footer"></div> </div> </body> </html> -------------------------------------------------------------------------- .css body { background-color: #fff; color: #000; font-family: arial, helvetica, verdana, tahoma, sans-serif; font-size: 80%; margin: 0em; padding: 0em; } #struttura { background-color: #000000; color: #000; line-height: 180%; margin: 0em; padding: 0em; text-align: left; width: 100%; } #header { background-color: #000000; background-image: url(Immagini/Banner.jpg); background-position: right bottom; background-repeat: no-repeat; border: 1px solid #000; border-bottom: 1px; border-left: 0; border-right: 0; border-top: 0; color: #ffc400; height: 148px; padding-left: 0.6em; font-family: "Blackoak Std"; font-size: 30px; font-style: italic; font-weight: normal; font-variant: normal; } #menu01v { float: left; font: 90% Arial, Helvetica, sans-serif; margin: 0; padding: 0; width: 16%; } #menu01v ul { list-style: none; margin: 0; padding: 0; } #menu01v li { display: inline; font-size: 1.1em; margin: 0; padding: 0; } #menu01v a:link, #menu01v a:visited { border: 1px solid #666; color: #fff; display: block; margin: 0.06em 0; padding: 0.3em 0.6em; text-decoration: none; background-color: #000000; } #menu01v a:hover, #menu01v a:focus, #menu01v a:active { border-color: #41545F; color: #000; padding-left: 0.95em; text-transform: uppercase; font-weight: bold; background-color: #ffc400; } #content { background: #fff; border-left: 1px solid #000; color: #000; margin-left: 16%; padding: 1.25em 0.8em; padding: 0.625em; } #content p { font-size: 100%; line-height: 1.8em; padding-left: 1em; padding-right: 1em; } #content h1 { background-color: #FFFFFF; color: #000000; padding-bottom: 0.3em; padding-top: 0.3em; font-family: Georgia, "Times New Roman", Times, serif; font-size: 180%; font-style: italic; font-weight: bold; font-variant: normal; } #content h2 { background: #fff; border-bottom: 1px dotted #FF9006; color: #940D1E; font: normal 150% Georgia, "Times New Roman", Times, serif; padding-bottom: 0.3em; } #content a:link, #content a:visited { background-color: #fff; color: #41545F; font-size: 95%; font-weight: normal; text-decoration: underline; } #content a:hover { background-color: #FFFFFF; color: #fff; text-decoration: none; } #footer { border: 1px solid #000; border-bottom: 1px; border-left: 0; border-right: 0; border-top: 1px; color: #fff; font-family: helvetica, arial, verdana, tahoma, sans-serif; font-size: 80%; margin: 0 auto; padding: 0.8em 0.8em; text-align: center; background-color: #000000; } #footer a:link, #footer a:visited { background-color: #000000; color: #fff; text-decoration: underline; } #footer a:hover { background-color: #fff; color: #000000; text-decoration: none; } .click-menu { } .click-menu .box1 { color: #000000; background-image: url(Script/Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-hover { color: #FFFFFF; background-image: url(Script/Immagini/Menu.jpg); background-repeat: no-repeat; } .click-menu .box1-open { color: #FFFFFF; background-image: url(Script/Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1-open-hover { color: #000000; background-image: url(Script/Immagini/Menu2.jpg); background-repeat: no-repeat; } .click-menu .box1, .click-menu .box1-hover, .click-menu .box1-open, .click-menu .box1-open-hover { text-indent: 12px; font-weight: bold; font-size: 14px; line-height: 31px; font-family: arial; cursor: pointer; width: 150px; } .click-menu .section { background-color: #000000; font-family: arial; font-size: 13px; line-height: 15px; padding: 0 0 5px 10px; display: none; } .click-menu .section a { color: #ffffff; text-decoration: none; white-space: nowrap; } .click-menu .section a:hover { color: #000000; text-decoration: none; white-space: nowrap; } .click-menu .box2 { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; } .click-menu .box2-hover { border-color: #ffc400; border-width: 1px; border-style: none none solid solid; padding: 1px 0 2px 6px; background-color: #9F9F9F; } |
|
|
|
|
14-12-2007, 08:59
|
#13 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Certo che non funziona non hai fatto quello che ti ho detto.
Devi sostituire il mio codice al tuo, lo stile, e usa i tag code
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 09:00
|
#14 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
ecco il risultato di adesso ma sembra identico alla modifica che avevo fatto io sopra
http://leomeya.altervista.org ->menu prima della modifica http://leomeya.altervista.org/Prova2/index.html -> menu dopo la modifica http://leomeya.altervista.org/Prova2/Script/esempio.htm -> esempio dello script funzionante |
|
|
|
|
14-12-2007, 09:01
|
#15 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Lo stile modificato
Codice:
<style type="text/css">
body {
background-color: #000000;
}
.click-menu {
width :100%;
}
.click-menu .box1 {
color: #000000;
background-image: url(Immagini/Menu.jpg);
background-repeat: repeat-x;
}
.click-menu .box1-hover {
color: #FFFFFF;
background-image: url(Immagini/Menu.jpg);
background-repeat: repeat-x;
}
.click-menu .box1-open {
color: #FFFFFF;
background-image: url(Immagini/Menu2.jpg);
background-repeat: repeat-x;
}
.click-menu .box1-open-hover {
color: #000000;
background-image: url(Immagini/Menu2.jpg);
background-repeat: repeat-x;
}
.click-menu .box1,
.click-menu .box1-hover,
.click-menu .box1-open,
.click-menu .box1-open-hover {
text-indent: 12px;
font-weight: bold;
font-size: 14px;
line-height: 31px;
font-family: arial;
cursor: pointer;
width : 100%;
}
.click-menu .section {
background-color: #000000;
font-family: arial;
font-size: 13px;
line-height: 15px;
padding: 0 0 5px 10px;
display: none;
}
.click-menu .section a {
color: #ffffff;
text-decoration: none;
white-space: nowrap;
}
.click-menu .section a:hover {
color: #000000;
text-decoration: none;
white-space: nowrap;
}
.click-menu .box2 {
border-color: #ffc400;
border-width: 1px;
border-style: none none solid solid;
padding: 1px 0 2px 6px;
}
.click-menu .box2-hover {
border-color: #ffc400;
border-width: 1px;
border-style: none none solid solid;
padding: 1px 0 2px 6px;
background-color: #9F9F9F;
}
</style>
Codice:
<table width="25%"><tr><td style="height: 500px; background-color: #000000; vertical-align: top; padding: 10px;">
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 09:04
|
#16 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Vedi che c'è pure un file javascript che viene utilizzato per aprire e chiudere i menu.
Ti allego l'esempio modificato
__________________
http://www.tevigroup.it/ |
|
|
|
|
14-12-2007, 09:07
|
#17 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
lo stile io l'ho messo con quello del layout di pagina altrimenti poi non ci capisco una mazza
è per questo che non funziona? non ci sto capendo piu' niente sono nel pallone I'm on the ball mi potresti passare il tuo contatto messanger? |
|
|
|
|
14-12-2007, 09:08
|
#18 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
scusa ho risposto prima ancora di leggere adesso guardo
grazie mille |
|
|
|
|
14-12-2007, 09:20
|
#19 |
|
Senior Member
Iscritto dal: Sep 2001
Messaggi: 1302
|
mi passeresti il contatto messanger? niente ho riprovato ma niente non capisco dove sbaglio
|
|
|
|
|
14-12-2007, 09:22
|
#20 |
|
Senior Member
Iscritto dal: Sep 2007
Messaggi: 754
|
Hai provato l'esempio che ti ho allegato?
__________________
http://www.tevigroup.it/ |
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 22:57.
