quante ul e li

**merovese** · 18-09-2021, 01:40

Ciao a tutti, scusate ma non sono molto pratico e sto cercando di inserire 2 menu nella stessa pagina.
cioè: manu in orizzontale ed uno in verticale ma nel codice css come faccio a far convivere i codici di entrambe?

codice:

/* menu top*/
	ul {
    list-style-type: none;
    margin-top: 1px;
	margin-left: 192px;
    padding: 0;
    overflow: hidden;
    background-color: #2e9bac;
	height: 25px;
	}
	li {
    float: left;
}


li a {
    display: block;
    color: white;
    text-align: left;
    padding: 3px 5px;
    text-decoration: none;
}


li a:hover {
    background-color: #1f6383;
}
li a:active {
    background-color: #7e9faa;
}
li {
    border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}
li:last-child {
    border-right: ;
}

se vado ad inserire un'altro con le sue ul ed li, succede il casino, come faccio? mi aiutereste per piacere?

**ninja72** · 18-09-2021, 09:53

Posta l'html relativo al menu.

**merovese** · 18-09-2021, 10:05

Originariamente inviata da ninja72

Posta l'html relativo al menu.

Fai conto una cosa del genere:

codice:

style>
#menucss {height:180px;}
#menucss a {
   text-decoration: none;
}
#mnucss nav {
     font-family: monospace;
}
#menucss ul {
   background: darkorange;
     list-style: none;
     margin: 0;
     padding-left: 0;
}
#menucss li {
     color: #fff;
   background: darkorange;
     display: block;
     float: left;
     padding: 1rem;
     position: relative;
     text-decoration: none;
   transition-duration: 0.5s;
    z-index:99999;
}  
#menucss li a {
   color: #fff;
}
#menucss li:hover {
     background: red;
     cursor: pointer;
}
#menucss ul li ul {
     background: orange;
     visibility: hidden;
   opacity: 0;
   min-width: 5rem;
     position: absolute;
   transition: all 0.5s ease;
   margin-top: 1rem;
     left: 0;
}
#menucss ul li:hover > ul, ul li:focus-within > ul,
ul li ul:hover {
    visibility: visible;
    opacity: 1;
}
#menucss ul li ul li {
     clear: both;
   width: 100%;
}
</style>
<div id="menucss">
<nav role="navigation">
   <ul>
     <li><a href="#">One</a>
<ul class="dropdown">
         <li><a href="#">Sub1-1</a></li>
         <li><a href="#">Sub1-2</a>
</li>
         <li><a href="#">Sub1-3</a></li>
       </ul>
</li>
     <li><a href="#">Two</a>
       <ul class="dropdown">
         <li><a href="#">Sub2-1</a></li>
         <li><a href="#">Sub2-2</a>
</li>
         <li><a href="#">Sub2-3</a></li>
       </ul>
     </li>
     <li><a href="#">Three</a>
<ul class="dropdown">
         <li><a href="#">Sub3-1</a></li>
         <li><a href="#">Sub3-2</a>
</li>
<li><a href="#">Sub3-3</a>
</li>
</ul>
</li>
  <li><a href="#">Four</a></li>
   </ul>
</nav>
</div>

come faccio ad inserire un altro menu nello stesso codice, posizionato da un’altra parte della pagina, mantenendo invariato questo?

**KillerWorm** · 18-09-2021, 18:13

Ciao, è un problema di specificità. Il tuo primo CSS agisce in modo generico sugli elementi usando semplicemente il nome tag (ul, li e così via) per cui lo stile viene applicato indistintamente su tutti gli elementi con tali relativi nomi.

Prova ad aggiungere un id, analogamente a come è nel tuo ultimo codice dove è stato specificato id="menucss" nel <div> e il relativo selettore css #menucss.

Chiaramente usa un diverso id.

Se è già presente un id, per il contenitore del menu, puoi usare quello anche nel CSS; altrimenti applica un nuovo id al contenitore del menu (come è nel tuo secondo codice), ad esempio:

codice:

<div id="menu-top">

.
Sul CSS basterà quindi specificare i selettori in questo modo:

codice:

/* menu top*/

#menu-top ul {
    /* ... relative proprietà */
}

#menu-top li a {
    /* ... relative proprietà */
}

/* ... e così via */

Fai sapere, buon proseguimento.

**merovese** · 19-09-2021, 10:21

Grazie per il tentativo ma di sicuro sbaglio qualcosa, il codice originale è questo, un pò incasinato ma finora funge tutto, menù a parte

codice:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<style>
div
    }
    .header{
        background-color:#fff;
        width:100%;
        height:100px;
        display: flex;
    }
    .logo{
        height:100px;
        width:10%;
        position: Absolute;
        top: 10px;
        left: 5px;
    }    
    .menu{
        height:100px;
        position: absolute;
        top: 70px;
        left: 214px;
        width: 100%;
    }
    div.menu:before{
          content: '';
          top: 1px;
          left: 192px;
        position: absolute;
          border-top: 25px solid #fff;
          border-right: 14px solid transparent;
          width: 0;
    }
    .topmenu{
        height:25px;
        min-width: 100%;
        position: Absolute;
        top: -24px;
        left: 480px;
        background-color: #1f6383;
        }
    div.topmenu:before{
          content: '';
          top: 0px;
          left: 0px;
        position: absolute;
          border-top: 25px solid #fff;
          border-right: 14px solid transparent;
          width: 0;
    }    
    .topmen2{
        height:25px;
        width: 80%;
        position: Absolute;
        top: 25px;
        left: 400px;
        background-color: #7e9faa;
    }
    div.topmen2:before{
          content: '';
          top: 1px;
          left: px;
        position: absolute;
          border-bottom: 25px solid #fff;
          border-right: 20px solid transparent;
          width: 0;
    }    
    /* menu top*/
    ul {
    list-style-type: none;
    margin-top: 1px;
    margin-left: 192px;
    padding-left: 288px;
    overflow: hidden;
    background-color: #2e9bac;
    height: 25px;
    }
    li {
    float: left;
}


li a {
    display: block;
    color: white;
    text-align: left;
    padding: 3px 5px;
    text-decoration: none;
}


li a:hover {
    background-color: #1f6383;
}
li a:active {
    background-color: #7e9faa;
}
li {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}
li:last-child {
    border-right: ;
}    
    .lat_sx
{
    position: relative;
    top: 20px;
    left: -200px;
    background-color: #fff;
    width: 180px;
    height: 300px;
    border: 1px solid #eee;
}
    /* menu sx*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}


li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}


li {
    text-align: center;
    border-bottom: 1px solid #555;
}


li:last-child {
    border-bottom: none;
}


li a.active {
    background-color: #2e9bac;
    color: white;
}


li a:hover:not(.active) {
    background-color: #1f6383;
    color: white;
}
    .desktop{
        position: absolute;
        top: 62px;
        left: -10px;
        background-color:#eee;
        min-width: 100%;
        min-height: 100%;
    }
</style>
</head>
<body>
    <div class="header">
    <div class="logo">
      <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="413" height="99" alt=""/>
</div>
        <div class="menu">
    <ul>
    <div>
  <li><a href="#home">Contatti</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Noi</a></li>
  <li><a href="#about">Home</a></li>
        </div>
        </ul>
        <div class="topmenu">
        </div>
        <div class="topmen2">
        </div>
        <div class="lat_sx">
            <ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
        </div>     
        <div class="desktop">
        <a href="#home">desktop</a>     
        </div>
</body>
</html>

ho provato ad apportare le modifiche e ad assegnare ad ogni meno un id ma il risultato è che mi sparisce del tutto il menu top

**KillerWorm** · 19-09-2021, 17:44

ho provato ad apportare le modifiche e ad assegnare ad ogni meno un id ma il risultato è che mi sparisce del tutto il menu top

Direi che c'è un bel po' di confusione. Il codice riporta diversi errori, meglio correggerli prima di proseguire. Puoi usare un validatore online, vedi questo:
https://validator.w3.org/#validate_by_input

Cerca inoltre di dare una indentazione corretta a tutto il codice; questo ne facilita la lettura e ti aiuta a comprendere meglio dove andare a correggere gli errori e apportare le modifiche volute. Puoi usare uno strumento di formattazione del codice, ce ne sono anche online, basta una piccola ricerca tipo html formatter.

Non è chiaro comunque di quale menu stai parlando; nel codice HTML vedo topmenu, topmen2 e lat_sx; solo l'ultimo (lat_sx) riporta del contenuto ma nel tuo CSS vedo il commento riferito a /*menu top*/; non capisco quale tu voglia sistemare e quali sono le prove che hai fatto.

Ti consiglio di essere più preciso, diversamente sarà difficile ricevere aiuto qui sul forum.

**merovese** · 02-10-2021, 15:48

allora eccoci, scusate ma il lavoro mi ha tenuto lontano dal mio progetto, allora ho rivisto il codice che ora dovrebbe essere corretto e completo, non riesco però a far capire alla grafica che deve occupare la pagina intera sia in larghezza che in altezza, infatti la grafica (se pur semplice) del menù in alto si estende per svariati scroll in larghezza

codice:

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Futura Logisca e Trasporti Tomao</title>
      <style>
         div
         }
         .header{
         background-color:#fff;
         width:100%;
         height:100px;
         display: flex;
         }
         .logo{
         height:100px;
         width:10%;
         position: Absolute;
         top: 10px;
         left: 3px;
         }	
         .menu{
         height:100px;
         position: absolute;
         top: 70px;
         left: 211px;
         width: 100%;
         }
         div.menu:before{
         content: '';
         top: 2px;
         left: 195px;
         position: absolute;
         border-top: 24px solid #fff;
         border-right: 14px solid transparent;
         width: 0;
         }
         .topbar{
         height:25px;
         min-width: 100%;
         position: Absolute;
         top: 45px;
         left: 650px;
         background-color: #1f6383;
         }
         div.topbar:before{
         content: '';
         top: 0px;
         left: 0px;
         position: absolute;
         border-top: 25px solid #fff;
         border-right: 14px solid transparent;
         width: 0;
         }	
         .bottombar{
         height:25px;
         width: 80%;
         position: Absolute;
         top: 98px;
         left: 552px;
         background-color: #7e9faa;
         }
         div.bottombar:before{
         content: '';
         top: 1px;
         left: 0px;
         position: absolute;
         border-bottom: 25px solid #fff;
         border-right: 20px solid transparent;
         width: 0;
         }	
         /* menu top*/
         ul {
         list-style-type: none;
         margin-top: 72px;
         margin-left: 192px;
         padding-left: 352px;
         overflow: hidden;
         background-color: #2e9bac;
         height: 25px;
         }
         li {
         float: left;
         }
         li a {
         display: block;
         color: white;
         text-align: left;
         padding: 3px 5px;
         text-decoration: none;
         }
         li a:hover {
         background-color: #1f6383;
         }
         li a:active {
         background-color: #7e9faa;
         }
         li {
         border-right: 1px solid #fff;
         border-left: 1px solid #fff;
         }
         li:last-child {
         border-right: 1px solid #fff;
         }	
         #lat_sx
         {
         position: relative;
         top: 20px;
         left: 10px;
         background-color: #fff;
         width: 180px;
         height: 300px;
         border: 1px solid #eee;
         }
         /* menu sx*/
         #lat_sx ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         width: 200px;
         background-color: #f1f1f1;
         border: 1px solid #555;
         }
         #lat_sx li a {
         display: block;
         color: #000;
         padding: 8px 16px;
         text-decoration: none;
         }
         #lat_sx li {
         text-align: center;
         border-bottom: 1px solid #555;
         }
         #lat_sx li:last-child {
         border-bottom: none;
         }
         #lat_sx li a.active {
         background-color: #2e9bac;
         color: white;
         }
         #lat_sx li a:hover:not(.active) {
         background-color: #1f6383;
         color: white;
         }
         .desktop{
         position: absolute;
         top: 162px;
         left: 400px;
         background-color:#eee;
         min-width: 100%;
         min-height: 100%;
         }
      </style>
   </head>
   <body>
	   <div class="header"></div>
      <div class="logo">
         <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="403" height="100" alt=""/>
      </div>
   <div class="menu"></div>
      <ul>
         <div>
            <li><a href="#home">Contatti</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Noi</a></li>
            <li><a href="#about">Home</a></li>
         </div>
      </ul>
      <div class="topbar">
      </div>
      <div class="bottombar">
      </div>
      <div id="lat_sx">
         <ul>
         <li>
         <a class="active" href="#home">Home</a></li>
         <li><a href="#news">News</a></li>
         </ul>
      </div>
      <div class="desktop">
         <a href="#home">desktop</a>	 
      </div>
   </body>
</html>

**KillerWorm** · 02-10-2021, 23:04

scusate ma il lavoro mi ha tenuto lontano dal mio progetto

nessun problema, figurati.

ho rivisto il codice che ora dovrebbe essere corretto e completo

non mi pare che sia validato però. Se passo il tuo codice su questo validatore mi restituisce qualche errore "abbastanza grave", direi. Prova a correggere.

Il problema dello scroll sta nel fatto che hai usato delle posizioni assolute per i vari elementi, definendone la loro posizione iniziale attraverso top e left e poi impostando però le proprietà min-width:100%, min-height:100% che li estendono per l'intera dimensione del loro relativo elemento di riferimento (il genitore, se possiede position diverso da static, oppure il body). Capisci bene che se top e left sono valori maggiori di zero, allora l'elemento (che ha dimensione 100% di quella del body) sborderà oltre i limiti del body stesso.

Se ti interessa estendere l'elemento in base allo spazio disponibile, allora, oltre top e left (a cui hai dato dei valori arbitrari), si potrebbe impostare bottom:0 e right:0 (piuttosto che min-width e min-height 100%). In questo modo l'elemento si estenderà dal punto alto/sinistro voluto, fino al limite zero relativo al punto basso/destro dell'elemento di riferimento.

Per maggiori informazioni riguardo il posizionamento di elementi con CSS, ti invito a dare uno sguardo al capitolo 2 dei link utili CSS, sotto la voce "Position".

**merovese** · 13-10-2021, 11:30

Originariamente inviata da KillerWorm

nessun problema, figurati.

non mi pare che sia validato però. Se passo il tuo codice su questo validatore mi restituisce qualche errore "abbastanza grave", direi. Prova a correggere.

Il problema dello scroll sta nel fatto che hai usato delle posizioni assolute per i vari elementi, definendone la loro posizione iniziale attraverso top e left e poi impostando però le proprietà min-width:100%, min-height:100% che li estendono per l'intera dimensione del loro relativo elemento di riferimento (il genitore, se possiede position diverso da static, oppure il body). Capisci bene che se top e left sono valori maggiori di zero, allora l'elemento (che ha dimensione 100% di quella del body) sborderà oltre i limiti del body stesso.

Se ti interessa estendere l'elemento in base allo spazio disponibile, allora, oltre top e left (a cui hai dato dei valori arbitrari), si potrebbe impostare bottom:0 e right:0 (piuttosto che min-width e min-height 100%). In questo modo l'elemento si estenderà dal punto alto/sinistro voluto, fino al limite zero relativo al punto basso/destro dell'elemento di riferimento.

Per maggiori informazioni riguardo il posizionamento di elementi con CSS, ti invito a dare uno sguardo al capitolo 2 dei link utili CSS, sotto la voce "Position".

scusa ma il variatore che hai usato, e che sto provando a consultare proprio ora, inserisce delle stringhe che nel codice originale non ci sono, quindi genera qualche errore di troppo, ora ne provo un'altro

**merovese** · 13-10-2021, 11:35

Originariamente inviata da KillerWorm

nessun problema, figurati.

non mi pare che sia validato però. Se passo il tuo codice su questo validatore mi restituisce qualche errore "abbastanza grave", direi. Prova a correggere.

Il problema dello scroll sta nel fatto che hai usato delle posizioni assolute per i vari elementi, definendone la loro posizione iniziale attraverso top e left e poi impostando però le proprietà min-width:100%, min-height:100% che li estendono per l'intera dimensione del loro relativo elemento di riferimento (il genitore, se possiede position diverso da static, oppure il body). Capisci bene che se top e left sono valori maggiori di zero, allora l'elemento (che ha dimensione 100% di quella del body) sborderà oltre i limiti del body stesso.

Se ti interessa estendere l'elemento in base allo spazio disponibile, allora, oltre top e left (a cui hai dato dei valori arbitrari), si potrebbe impostare bottom:0 e right:0 (piuttosto che min-width e min-height 100%). In questo modo l'elemento si estenderà dal punto alto/sinistro voluto, fino al limite zero relativo al punto basso/destro dell'elemento di riferimento.

Per maggiori informazioni riguardo il posizionamento di elementi con CSS, ti invito a dare uno sguardo al capitolo 2 dei link utili CSS, sotto la voce "Position".

eccoci, il w3c mi dice che il codice css è corretto e validato

Discussione: quante ul e li

Strumenti discussione

Ricerca discussione

Visualizza

quante ul e li

Permessi di invio