Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 30

Discussione: quante ul e li

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82

    quante ul e li

    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?

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    220
    Posta l'html relativo al menu.

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    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?
    Ultima modifica di KillerWorm; 18-09-2021 a 18:13 Motivo: fix format code

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    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.
    Ultima modifica di KillerWorm; 18-09-2021 a 18:30
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    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

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    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.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    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>

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    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".
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    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

  10. #10
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    82
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    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

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 © 2021 vBulletin Solutions, Inc. All rights reserved.