immagine di sfondo sotto al menù

**james13** · 28-10-2013, 11:46

Ho trovato questo menù, cioè quello che serve a me:

http://www.html.it/articoli/36909/esempi/menu.html

E la mia pagina html è:

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
       <link rel="stylesheet" type="text/css" href="css/stilesito.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(function() {
          if ($.browser.msie && $.browser.version.substr(0,1)<7)
          {
            $('li').has('ul').mouseover(function(){
                $(this).children('ul').show();
                }).mouseout(function(){
                $(this).children('ul').hide();
                })
          }
        });        
    </script>
    
<style>

* {
  font-family: sans-serif;
  line-height: 1.5
}

.range_test {
  display: none;
  font-weight: bold;
}

html#range_0 #p_0 {
  /* Stile da 0px to 760px */
  display: block;
}

html#range_1 #p_1 {
  /* Stile da 760px to 980px */
  display: block;
}

html#range_2 #p_2 {
  /* Stile da 980px to 1280px */
  display: block;
}

html#range_3 #p_3 {
  /*Stile da 1280px to 1600px */
  display: block;
}

html#range_4 #p_4 {
  /* Stile da 1600px to 1920px */
  display: block;
}

html#range_5 #p_5 {
  /* Stile oltre 1920px */
  display: block;
}
</style>


<script>
// Chiamata adapt.js
function myCallback(i, width) {
  document.documentElement.id = 'range_' + i;

}

var ADAPT_CONFIG = {

  dynamic: true,
  callback: myCallback,

  range: [
    '0 to 760',
    '760 to 980',
    '980 to 1280',
    '1280 to 1600',
    '1600 to 1920',
    '1920'
  ]
};

</script>
<script src="stilemenu/assets/js/adapt.min.js"></script>


</head>

<body>
<img alt="full screen background image" src="images/piazza.png" id="full-screen-background-image" />

<p class="range_test" id="p_0">
<a href="Home.html"><img src="images/tastohome.png" width="66" height="20" border=”0″ hspace=”0″></a><a href="Terminiecondizioni.html"><img src="images/tastotermini.png" width="174" height="20" border=”0″ hspace=”0″></a><a href="lavoraconnoi.html"><img src="images/tastolavora.png" width="136" height="20" border=”0″ hspace=”0″></a><a href="Contatti.html"><img src="images/tastocontatti.png" width="88" height="20" border=”0″ hspace=”0″></a>
</p>
<p class="range_test" id="p_1">
<a href="Home.html"><img src="images/tastohome.png" width="66" height="20" border=”0″ hspace=”0″></a><a href="Terminiecondizioni.html"><img src="images/tastotermini.png" width="174" height="20" border=”0″ hspace=”0″></a><a href="lavoraconnoi.html"><img src="images/tastolavora.png" width="136" height="20" border=”0″ hspace=”0″></a><a href="Contatti.html"><img src="images/tastocontatti.png" width="88" height="20" border=”0″ hspace=”0″></a>
</p>
<p class="range_test" id="p_2">
<a href="Home.html"><img src="images/tastohome.png" width="66" height="20" border=”0″ hspace=”0″></a><a href="Terminiecondizioni.html"><img src="images/tastotermini.png" width="174" height="20" border=”0″ hspace=”0″></a><a href="lavoraconnoi.html"><img src="images/tastolavora.png" width="136" height="20" border=”0″ hspace=”0″></a><a href="Contatti.html"><img src="images/tastocontatti.png" width="88" height="20" border=”0″ hspace=”0″></a>
</p>
<p class="range_test" id="p_3">
<a href="Home.html"><img src="images/tastohome.png" width="66" height="20" border=”0″ hspace=”0″></a><a href="Terminiecondizioni.html"><img src="images/tastotermini.png" width="174" height="20" border=”0″ hspace=”0″></a><a href="lavoraconnoi.html"><img src="images/tastolavora.png" width="136" height="20" border=”0″ hspace=”0″></a><a href="Contatti.html"><img src="images/tastocontatti.png" width="88" height="20" border=”0″ hspace=”0″></a>
</p>
<p class="range_test" id="p_4">
<a href="Home.html"><img src="images/tastohome.png" width="66" height="20" border=”0″ hspace=”0″></a><a href="Terminiecondizioni.html"><img src="images/tastotermini.png" width="174" height="20" border=”0″ hspace=”0″></a><a href="lavoraconnoi.html"><img src="images/tastolavora.png" width="136" height="20" border=”0″ hspace=”0″></a><a href="Contatti.html"><img src="images/tastocontatti.png" width="88" height="20" border=”0″ hspace=”0″></a>
</p>
<p class="range_test" id="p_5">
<a href="Home.html"><img src="images/tastohome.png" width="66" height="20" border=”0″ hspace=”0″></a><a href="Terminiecondizioni.html"><img src="images/tastotermini.png" width="174" height="20" border=”0″ hspace=”0″></a><a href="lavoraconnoi.html"><img src="images/tastolavora.png" width="136" height="20" border=”0″ hspace=”0″></a><a href="Contatti.html"><img src="images/tastocontatti.png" width="88" height="20" border=”0″ hspace=”0″></a>
</p>



</body>
</html>

Il codice CSS è:

codice:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#full-screen-barra {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: 33%;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

.range_test {background: url(barra.png)}

Come devo fare?

**james13** · 29-10-2013, 08:52

Gentilmente come devo modificare?

**james13** · 04-11-2013, 17:28

Nessun aiuto? Grazie

**carlomarangoni** · 05-11-2013, 01:59

Originariamente inviata da james13

Nessun aiuto? Grazie

Non credo ci sia qualcuno che abbia voglia di leggere tutto quel codice e mettersi lì a modificarlo per darti la pappa cotta!

Al limite ti si può consigliare di prendere il menu che hai scelto e cambiare i colori di backgroung con le tue immagini.

Se vuoi che qualcuno prenda volentieri in considerazione il codice che posti devi postarlo in modo che sia velocemente leggibile, indentato e non a pezzi.

Se vuoi ti posso fare il codice di un menu ma non mi metto a modificare il tuo

**james13** · 07-11-2013, 11:07

Originariamente inviata da carlomarangoni

Non credo ci sia qualcuno che abbia voglia di leggere tutto quel codice e mettersi lì a modificarlo per darti la pappa cotta!

Al limite ti si può consigliare di prendere il menu che hai scelto e cambiare i colori di backgroung con le tue immagini.

Se vuoi che qualcuno prenda volentieri in considerazione il codice che posti devi postarlo in modo che sia velocemente leggibile, indentato e non a pezzi.

Se vuoi ti posso fare il codice di un menu ma non mi metto a modificare il tuo

Non voglio la pappa cotta, ma solo un aiuto per capire come funziona!

Comunque se mi fai un esempio(senza considerare quello che ho scritto) è meglio, così vedo come funziona un menù.

Grazie

**carlomarangoni** · 07-11-2013, 19:12

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#cm-nav li a.arrow {background-image: url("arrow-right.gif")}
#cm-nav > li > a.arrow {background-image: url("arrow-down.gif")}
ul#cm-nav ,
ul#cm-nav ul {
 list-style: none;
 margin: 0px;
 padding: 0px
}
ul#cm-nav li {
 list-style: none;
 margin: 0px;
 padding: 0px;
 width: auto;
 float: left;
 position: relative
}
ul#cm-nav li li {
 width: auto;
 float: none
}
#cm-nav a {
 background: url(image1.gif);
 padding: 5px;
 border: 1px solid black;
 text-align: left;
 color: black;
 font-family: verdana;
 font-size: 12px;
 text-decoration: none;
 display: block;
 white-space: nowrap
}
}#cm-nav a.no-click {cursor: default}
#cm-nav li a {margin: -1px -1px 0px 0px}
#cm-nav li li a {margin: 0px 0px -1px}
#cm-nav > li > a.arrow {padding-right: 14px}
#cm-nav ul.arrow-pad > li > a {padding-right: 11px}
#cm-nav li a.arrow ,
#cm-nav > li > a.arrow {
 background-position: right;
 background-repeat: no-repeat
}
#cm-nav li:hover > a {
 color: white;
 background: url(image2.gif);
}
#cm-nav li ul ,
#cm-nav li:hover ul ul ,
#cm-nav li:hover ul ul ul ,
#cm-nav li:hover ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ,
#cm-nav li:hover ul ul ul ul ul ul ul ul {
 display: none;
 position: absolute;
 z-index: 999
}
#cm-nav li:hover ul {display: block}
#cm-nav li li:hover ul ,
#cm-nav li li li:hover ul ,
#cm-nav li li li li:hover ul ,
#cm-nav li li li li li:hover ul ,
#cm-nav li li li li li li:hover ul ,
#cm-nav li li li li li li li:hover ul {
 margin-left: 100%;
 display: block
}
#cm-nav li:hover ul {margin-left: 0px}
#cm-nav ul ul {
 left: -1px;
 top: 1px
}
#cm-nav li {top: -1px}
</style>
</head>
<body style="background:#FFFFFF">
<ul id="cm-nav">
   <li><a href="#" target="_self">Home Page</a></li>
   <li><a href="#" target="_self" class="arrow no-click">Contenuti</a>
      <ul>
         <li><a href="#" target="_self">Contenuto 1</a></li>
         <li><a href="#" target="_self">Contenuto 2</a></li>
         <li><a href="#" target="_self">Contenuto 3</a></li>
      </ul>
   </li>
   <li><a href="#" target="_self" class="arrow no-click">Altri contenuti</a>
      <ul class="arrow-pad">
         <li><a href="#" target="_self">Altri 1</a></li>
         <li><a href="#" target="_self" class="arrow no-click">Altri 2</a>
            <ul>
               <li><a href="#" target="_self">Altri altri 1</a></li>
               <li><a href="#" target="_self">Altri Altri 2</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</body>
</html>

**james13** · 08-11-2013, 10:47

Il menù è perfetto, ma io vorrei eliminare quella line nere attorno ed inserire un'immagine. Come devo fare?

**james13** · 08-11-2013, 13:57

Sono riuscito a risolvere...ora come faccio a distanziare i sotto menù di un pixel o 3 pixel?

Ecco come ho fatto:

codice:

<li><a href="#" target="_self"><img src="images/1.png"></a></li><p>&nbsp;</p>
         <li><a href="#" target="_self"><img src="images/1.png"></a></li><p>&nbsp;</p>
         <li><a href="#" target="_self"><img src="images/1.png"></a></li>

Cioè ho usato :

<p> </p>

Infine per il rollover, visto che ho inserito un'immagine, come devo modificare?

**carlomarangoni** · 08-11-2013, 15:20

Non devi mettere immagini nel <li> le immagini per lo stato normale e hover le ho già previste nel codice CSS, devi solo cambiare il nome e il percorso

**james13** · 12-11-2013, 12:50

Alla fine sono riuscito ad avere il risultato che volevo. Grazie

Discussione: immagine di sfondo sotto al menù

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio