Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13
  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30

    problema con menu dropdown

    Salve, spero che qualcuno di voi possa aiutarmi....
    ho cercato di realizzare un menù dropdown mediante un generatore, con questa grafica http://www.cssmenumaker.com/builder/...o.php?menu=067
    Il problema è che quando copio l'html all'interno della mia pagina, rimane visibile la barra nera del menù principale, ma non compare la barra del sottomenu. il menù viene inserito all'interno di un contenitore.


    L'html nell'head:

    <style media="all" type="text/css">@import "/menu/menu_style.css";</style>


    L'html che ho messo nel contenitore:

    <div class="nav">
    <div class="table">
    <ul class="select">[*]Home
    [/list]
    <ul class="select">[*]La società
    <div class="select_sub">
    <ul class="sub">[*]Chi siamo[*]Dove siamo[*]Pubblicazioni[/list]
    </div>
    [/list]
    <ul class="select">[*]Metodi di indagine
    <div class="select_sub">
    <ul class="sub">[*]Geoelettrica[*]Sismica[*]Georadar[*]Elettromagnetismo[/list]
    </div>
    [/list]
    <ul class="select">[*]Strumentazione
    [/list]
    <ul class="select">[*]Qualità
    [/list]
    <ul class="select">[*]Contatti
    [/list]
    </div>
    </div>

    i css di riferimento:
    MENU_STYLE:

    .nav {
    height:35px;
    background: url(images/bg.gif) repeat-x;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:11px;
    width:100%;
    z-index:100;
    margin:0;
    padding:0;
    }

    .nav .table {
    display:table;
    margin:0 auto;
    }

    .nav .select,
    .nav .current {
    margin:0;
    padding:0;
    list-style:none;
    display:table-cell;
    white-space:nowrap;
    }

    .nav li {
    margin:0;
    padding:0;
    height:auto;
    float:left;
    }

    .nav .select a {
    display:block;
    height:35px;
    float:left;
    font-weight:bold;
    background: url(images/bg.gif);
    padding:0 30px 0 30px;
    text-decoration:none;
    line-height:35px;
    white-space:nowrap;
    color:#dfdfdf;
    }


    .nav .select a:hover,
    .nav .select li:hover a {
    background: url(images/hover.gif);
    padding:0 0 0 15px;
    cursorointer;
    color:#2b3238;
    }

    .nav .select a b{
    font-weight:bold;
    }

    .nav .select a:hover b,
    .nav .select li:hover a b {
    display:block;
    float:left;
    padding:0 30px 0 15px;
    background:url(images/hover.gif) right top;
    cursorointer;
    }

    .nav .select_sub {
    display:none;
    }

    /* IE6 only */
    .nav table {
    border-collapse:collapse;
    margin:-1px;
    font-size:1em;
    width:0;
    height:0;
    }

    .nav .sub {
    display:table;
    margin:0 auto;
    padding:0;
    list-style:none;
    }

    .nav .sub_active .current_sub a,
    .nav .sub_active a:hover {
    background:transparent;
    color:#2b3238;
    }

    .nav .select :hover .select_sub,
    .nav .current .show {
    display:block;
    position:absolute;
    width:100%;
    top:35px;
    background:url(images/back.gif);
    padding:0;
    z-index:100;
    left:0;
    text-align:center;
    }

    .nav .current .show {
    z-index:10;
    }

    .nav .select :hover .sub li a,
    .nav .current .show .sub li a {
    display:block;
    float:left;
    background:transparent;
    padding:0 10px 0 10px;
    margin:0;
    white-space:nowrap;
    border:0;
    color:#2b3238;
    }

    .nav .current .sub li.sub_show a {
    color:#2b3238;
    cursor:default;
    }

    .nav .select .sub li a {
    font-weight:normal;
    }

    .nav .select :hover .sub li a:hover,
    .nav .current .sub li a:hover {
    visibility:visible;
    color:#909090;
    }

    IE:
    .nav ul {display:inline-block;}
    .nav ul {display:inline;}
    .nav ul li {float:left;}
    .nav {text-align:center;}
    .nav .select a:hover b,
    .nav .select li:hover a b {float:none;}

    potete voi capire come mai non vedo la barra del sottomenu?
    grazie mille.

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Benvenuto nel forum!
    Ricorda che quando posti codice, e` opportuno usare i codici VB correttamente, altrimenti chi legge si rovina la vista. Per il codice puoi usare i bottoni # o php sopra l'area di scrittura.

    Mi pare di vedere delle sintassi strane.
    Mi pare (ma e` difficile esserne sicuri, proprio per il mancato uso dei tag VB) che nel tuo codice ci sia uno spazio prima del :hover: prova a toglierlo.
    Infatti la pseudoclasse :hover va scritta attaccata all'elemento cui si riferisce.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30
    scusa, mi sono appena iscritta e non ho avuto ancora tempo di leggere tutto il vostro regolamento, per cui mi sono persa questa cosa dei bottoncini....appena riesco mi leggo tutto , così non faccio più questi errori grossolani, opss! però la mia pagina non è ancora online, quindi non posso darvi l'indirizzo, provo a reincollare il css sotto con il code, spero vada meglio.....

    ho provato a togliere lo spazio davanti a :hover, ma non ha risolto ancora nulla, continua a non vedersi la barra del sottomenu.




    codice:
    /* SFONDO */ html, body {  margin : 5px 0 0 0 ; padding : 0; }   body {  font : 75% Arial, "Trebuchet MS", Helvetica, Tahoma, sans-serif; background : #ccc url(images/bg.jpg) top center repeat-y; color : #555; }      /*contenitore principale*/ #contenitore {  width : 770px; margin-left : auto; margin-right : auto; margin-top : 10px; padding : 0; line-height : 1.8em; }  /*testo principaòe*/ #contenuto {  padding : 2em; margin : 50px 250px 0 0; border-right : 1px solid plum; text-align: justify;  }  /*tsto laterale*/ #laterale {  float : right; width : 220px; margin-top : 50px; padding : 1em; }   /*testo grafica*/ h1 {  float : left; margin : 0; padding : 50px 0 20px 25px; font : 150% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; text-transform : uppercase; letter-spacing : 5px; color : #fff; }  h2 {  float : right; margin : 0; padding : 25px 20px 20px 0; font : 90% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; letter-spacing : 3px; color : #E80202; }  h3 {  margin : 0; padding : 20px 0 20px 0; border-bottom : 1px solid #aaa; font : 150% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif; text-transform : uppercase; letter-spacing : 2px; color : #E80202; }  h4 {  margin : 0; padding : 20px 0 20px 0; border-bottom : 1px solid #aaa; font : 90% Arial, Tahoma, sans-serif; letter-spacing : 1px; color : #CC33CC ; }  blockquote { font-weight : bold; font-style : italic; border-bottom : 1px solid #aaa; border-top : 1px solid #aaa; color : #b29b35; }   /*immagini*/ img.no-border { 	border: none; }  /*piè di pagina*/ #piè {  font : 10px Arial, Tahoma, sans-serif; clear : both; height : 30px; padding : 0; margin-bottom : 0; margin-top : 40px; text-align : center; border-top : 1px solid #eee; color : black; background : #CCCCFF  ; }  /*bordi*/ hr { 	color: #eee; 	size: 1px; }

  4. #4
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30
    e l'html
    codice:
     <div class="nav">      <div class="table">        <ul class="select">[*]Home[/list]<ul class="select">[*]La società            <div class="select_sub">              <ul class="sub">[*]Chi siamo[*]Dove siamo[*]Pubblicazioni[/list]</div>[/list]<ul class="select">[*]Metodi di indagine            <div class="select_sub">              <ul class="sub">[*]Geoelettrica[*]Sismica[*]Georadar[*]Elettromagnetismo[/list]</div>[/list]<ul class="select">[*]Strumentazione[/list]<ul class="select">[*]Qualità[/list]<ul class="select">[*]Contatti[/list]</div>   </div>

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Mi spiace.
    Un codice cosi` mi rifiuto di leggerlo.
    Usa correttamente gli acapo e le indentazioni.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  6. #6
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30
    Mich, ti domando di nuovo scusa con queste cose sono proprio un pò negata mi sa....
    codice:
    .
    nav { 
    height:35px;  
    background: url(images/bg.gif) repeat-x;  
    position:relative;  f
    ont-family:arial, verdana, sans-serif;  
    font-size:11px;  
    width:100%;  
    z-index:100; 
    margin:0; 
    padding:0; }  
    
    .nav .table { display:table;  margin:0 auto; }  .nav .select, .nav .current { margin:0;  padding:0;  list-style:none;  display:table-cell;  white-space:nowrap; }  .nav li { margin:0;  padding:0;  height:auto;  float:left; }  .nav .select a { display:block;  height:35px;  float:left;  font-weight:bold; background: url(images/bg.gif);  padding:0 30px 0 30px;  text-decoration:none;  line-height:35px;  white-space:nowrap;  color:#dfdfdf; }   .nav .select a:hover,  .nav .select li:hover a { background: url(images/hover.gif);  padding:0 0 0 15px;  cursor:pointer;  color:#2b3238; }  .nav .select a b{ 	font-weight:bold; 	}  .nav .select a:hover b,  .nav .select li:hover a b { display:block;  float:left;  padding:0 30px 0 15px;  background:url(images/hover.gif) right top;  cursor:pointer; }  .nav .select_sub { display:none; }  /* IE6 only */ .nav table { border-collapse:collapse;  margin:-1px;  font-size:1em;  width:0;  height:0; }  .nav .sub { display:table;  margin:0 auto;  padding:0;  list-style:none; }  .nav .sub_active .current_sub a,  .nav .sub_active a:hover { background:transparent;  color:#2b3238; }  .nav .select:hover .select_sub,  .nav .current .show { display:block;  position:absolute;  width:100%;  top:35px;  background:url(images/back.gif);  padding:0;  z-index:100;  left:0;  text-align:center; }  .nav .current .show { z-index:10; }  .nav .select:hover .sub li a,  .nav .current .show .sub li a { display:block;  float:left;  background:transparent;  padding:0 10px 0 10px;  margin:0;  white-space:nowrap;  border:0;  color:#2b3238; }  .nav .current .sub li.sub_show a { color:#2b3238;  cursor:default;  }  .nav .select .sub li a { 	font-weight:normal; }  .nav .select:hover .sub li a:hover,  .nav .current .sub li a:hover { visibility:visible;  color:#909090;  }

  7. #7
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30
    ho sbagliato di nuovo!
    sorry sorry sorry!

  8. #8
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30
    forse questa volta ci riesco (spero), porta pazienza sono imbranatissima con queste cose, ma quando capisco poi ce la faccio.....prima o poi. spero più prima che poi altrimenti mi butti fuori dal forum mi sa.....

    Dicevi che vedevi delle sintassi strane, questo è il codice che mi ha dato quel generatore di css.... ma è anche vero che funziona solo a metà, quindi tutto è possibile....spero che ora sia leggibile, mi pare che sia come negli altri post.... ma come detto imbranata sono....



    codice:
    .nav { 
          height:35px;  
          background: url(images/bg.gif) repeat-x;  
          position:relative;  
          font-family:arial, verdana, sans-serif;  
          font-size:11px;  
          width:100%;  
          z-index:100; 
          margin:0; 
          padding:0; }  
    
    .nav .table { 
          display:table;  
          margin:0 auto; }  
    
    .nav .select, .nav .current { 
          margin:0;  
          padding:0;  
          list-style:none;  
         display:table-cell;  
          white-space:nowrap; }  
    
    .nav li { 
          margin:0;  
          padding:0;  
          height:auto;  
          float:left; }  
    
    .nav .select a { 
          display:block;  
          height:35px;  
          float:left;  
          font-weight:bold; 
          background: url(images/bg.gif);  
          padding:0 30px 0 30px;  
          text-decoration:none;  
          line-height:35px;  
          white-space:nowrap;  
          color:#dfdfdf; }   
    
    .nav .select a:hover, 
    .nav .select li:hover a { 
          background: url(images/hover.gif);  
          padding:0 0 0 15px;  
          cursor:pointer;  
          color:#2b3238; }  
    
    .nav .select a b{ 
     	font-weight:bold; 	}  
    
    .nav .select a:hover b,  
    .nav .select li:hover a b { 
          display:block;  
          float:left;  
          padding:0 30px 0 15px;  
          background:url(images/hover.gif) right top;  
          cursor:pointer; }  
    
    .nav .select_sub { 
          display:none; }  
    
    /* IE6 only */ 
    
    .nav table { 
          border-collapse:collapse;  
          margin:-1px;  
          font-size:1em;  
          width:0;  
          height:0; }  
    
    .nav .sub { 
          display:table;  
          margin:0 auto;  
          padding:0;  
          list-style:none; } 
    
    .nav .sub_active .current_sub a,  
    .nav .sub_active a:hover { 
           background:transparent;  
           color:#2b3238; }  
    
    .nav .select:hover .select_sub,  
    .nav .current .show { 
           display:block;  
           position:absolute;  
           width:100%;  
           top:35px;  
           background:url(images/back.gif);  
           padding:0;  
           z-index:100;  
           left:0;  
           text-align:center; }  
    
    .nav .current .show { 
           z-index:10; }  
    
    .nav .select:hover .sub li a,  
    .nav .current .show .sub li a { 
           display:block;  
           float:left;  
           background:transparent;  
           padding:0 10px 0 10px;  
           margin:0;  
           white-space:nowrap;  
           border:0;  
           color:#2b3238; }  
    
    .nav .current .sub li.sub_show a { 
           color:#2b3238;  
           cursor:default;  }  
    
    .nav .select .sub li a { 	
           font-weight:normal; }  
    
    .nav .select:hover .sub li a:hover,  
    .nav .current .sub li a:hover { 
            visibility:visible;  
            color:#909090;  }
    codice:
     
    <div class="nav">      
          <div class="table">        
               <ul class="select">         [*]Home        [/list]
               <ul class="select">         [*]La società            
                          <div class="select_sub">             
                                <ul class="sub">               [*]Chi siamo               [*]Dovesiamo                        [*]Pubblicazioni            [/list]
                          </div>         
                             [/list]
               <ul class="select">         [*]Metodi di indagine                   
                     <div class="select_sub">              
                             <ul class="sub">               [*]Geoelettrica [*]Sismica                       [*]Georadar              [*]Elettromagnetismo             [/list]
                      </div>         
                          [/list]
               <ul class="select">        [*]Strumentazione                 [/list]
                <ul class="select">        [*]Qualità                                  [/list]
               <ul class="select">         [*]Contatti        [/list]
          </div>   
    </div>

  9. #9
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Adesso finalmente e` scritto in modo "umano".

    Ecco le cose "strane"(*) nel CSS:

    .nav .select li:hover a { -- perche` :hover e` applicato al[*] e non all'<a>?

    .nav .select:hover .select_sub -- discorso simile (non funziona in qualche versione di IE)

    target="_self" -- attributo deprecato (non funziona nelle DTD Strict)

    <a ...>Home</a> -- sono tag di formattazione - meglio non usarli. Dato che usi un CSS, puoi definire bold il testo all'interno di[*]<a>, con un selettore opportuno (nel codice precedente si nota che i selettori li hai messi in modo corretto - quasi tutti)

    codice:
    [*]La società 
        <div class="select_sub"> <ul class="sub"> ....[/list]</div>
    il div non serve, e crea confusione (tra l'altro dentro un[*] e` anche errato dal punto di vista semantico)


    Inoltre dovresti dire che DTD usi, dato che per utilizzi alcuni attributi CSS che vengono interpretati dal browser IE in modo diverso a seconda della DTD.

    E per lo stesso motivo dovresti dire in quali brwoser deve funzionare il tutto (soprattuto le varie versioni di IE)


    (*) per "strane" intendo cose che normalmente si vedono fatte in modo diverso. Non necessariamente sono sbagliate, ma occorre motivare la scelta fatta (anche in funzione di DTD e browser)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  10. #10
    Utente di HTML.it
    Registrato dal
    Aug 2009
    Messaggi
    30
    Per me è tutto strano, visto che sono neofita totale.....

    il DTD nella pagina è questo:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    Dovrebbe poter girare su più browser possibile, essendo un sito commerciale rivolto a tutto il mondo. L'esempio che mi avevano mandato loro (quelli del CSS generator) insieme col codice funziona bene sia in IE7, sia in firefox, ovvero mi fa vedere la barra del sottomenu senza problemi. Sicurmente devo trovare il modo oppure trovare un altro codice che dia questo tipo di effetto grafico che funzioni in firefox e nelle ultime versioni di IE, 6 e 7 (per il momento non voglio pensare alla 8).

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.