Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    [CSS] menu particolare e problemi

    Sto realizzando un menu simpatico con i css unendo due tutorial ma ho dei problemi e non capisco dove...

    Il primo tutorial serve per emulare la mappa cliccabile di un'immagine tramite css.

    lo trovate qui: Tutorial mappatura

    Questo funziona.

    Adesso a questo tutorial ho unito un altro tutorial per far apparire un testo descrittivo del link al passaggio del mouse.

    lo trovate qui: Tutorial scritte

    Il passo successivo sarà far apparire un'immagine oltre al testo nella casella in alto dove c'è la x.

    Il sito sul quale sto lavorando è il seguente Sito di mia sorella.


    Veniamo al codice:

    HTML:
    codice:
     <div id="menu1">
    <ul id="map1">
    <li id="map1-link1"><span>Quadri</span>
    <li id="map1-link2"><span>Ceramiche</span>
    <li id="map1-link3"><span>Mostre</span>
    <li id="map1-link4"><span>Contatti</span>[/list]
    </div>
    ed ecco il CSS:

    codice:
     div#menu1 {
    position: absolute;
    top: 180px;
    left: 0px;
    z-index: 2;
    }
    
    ul#map1 {
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    width:160px;
    height:30px;
    background:url("image/menu_home.gif") no-repeat;
    } 
    ul#map1 li {
    display:block;
    position:absolute;
    margin:0;padding:0
    }
    li#map1-link1 {
    left:4;top:0;
    width:23px;height:23px
    }
    [...]
    #map1 a {
    display:block;
    width:100%;
    height:100%;
    }
    Questo di sopra è codice che funziona precisamente.
    Questo di sotto è il codice del secondo tutorial. Quello che mi da i problemi .

    Ho commentato la prima regola per mostrare i link altrimenti non si vedrebbe nulla.

    Credo che il problema sia un conflitto di posizionamento. Commentando infatti da position fino a z-index qualcosa appare.

    codice:
    /*ul#map1  a span { display:none }*/
    
    #map1 a:hover span { 
      display: block;
      position: absolute; 
      top: 200px; 
      left: 0; 
      width: 125px;
      padding: 5px; 
      margin: 10px; 
      z-index: 100;
      color: #AAA; 
      background: black;
      font: 10px Verdana, sans-serif; 
      text-align: center;
      }
    Spero di essere stato completo e non prolisso.


    Grazie mille

    Luciano Amodio

  2. #2
    ho provato sia con opera che con Netscape 7 e tutto funziona quasi regolarmente.

    E' IE che da problemi.... cosa sarà?
    Perchè sul sito del tutorial tutto funziona anche con IE?


    Chi lo sa?

  3. #3
    Nessuno ha provato i suddetti tutorial?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.