Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 11
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    37

    Elenchi puntati in navbar

    Buonasera,
    premetto che ne so pochissimo di html ma stavo cercando di realizzare un menù del tipo navbar come quello che vedete nelle immagini in fondo.
    Ho preso il codice dal web ed ho provato ad incollarlo nel pannello della pagina che devo impostare. Il pannello di questa pagina ha un menù facilitato per scrivere ed inserire immagini ma chiaramente per fare questo tipo di menù ho per forza bisogno di scrivere in html.
    Codice:
    codice:
    <div class="tabbable">	<ul class="nav nav-tabs mb-3" role="tablist">
    	
    		<li class="nav-item">
    			<a href="#tab-1" data-toggle="tab" class="nav-link active" role="tab" aria-controls="pills-home" aria-selected="true">Prova 1</a>
    		</li>
    	
    		<li class="nav-item">
    			<a href="#tab-2" data-toggle="tab" class="nav-link" role="tab" aria-controls="pills-home" aria-selected="false">Prova 2</a>
    		</li>
    	
    		<li class="nav-item">
    			<a href="#tab-3" data-toggle="tab" class="nav-link" role="tab" aria-controls="pills-home" aria-selected="false">Prova 3</a>
    		</li>
    	
    		<li class="nav-item">
    			<a href="#tab-4" data-toggle="tab" class="nav-link" role="tab" aria-controls="pills-home" aria-selected="false">Prova 4</a>
    		</li>
    	
    	</ul>
    	<div class="tab-content">	
    	
    		<div class="tab-pane active" id="tab-1"><p></p>
    <p>Prova prova</p>
    <p></p></div> 
    	
    		<div class="tab-pane" id="tab-2"><p></p>
    <p>Prova prova prova</p>
    <p></p></div> 
    	
    		<div class="tab-pane" id="tab-3"><p></p>
    <p>Prova prova prova prova</p>
    <p></p></div> 
    	
    		<div class="tab-pane" id="tab-4"><p></p>
    <p>Prova prova prova prova prova</p>
    <p></p></div> 
    	
    	</div>
    </div>

    Il problema è che però questo codice su dreamweaver funziona perfettamente e visualizzo tutto come vorrei, ma quando lo vado ad incollare su questo pannello del sito mi tira fuori quei fastidiosi pallini degli elenchi puntati.

    Il problema credo che sia con il tag <ul> che il pannello rileva come elenco puntato.

    Come posso risolvere?

    Altra cosa, come posso personalizzare il colore delle linguette?

    Grazie


    Come lo visualizzo su dreamweaver:



    Come lo visualizzo sul sito una volta inserito tramite pannello di controllo:


  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Nella classe nav-tabs aggiungi text-decoration: none; oppure list-style: none;

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    37
    Dove dovrei inserirlo esattamente?
    Considera che io ho inserito solo questo codice nella pagina, non ho creato una classe nav-tabs sopra ad esempio
    Ultima modifica di mtguido; 01-06-2020 a 19:22

  4. #4
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    sulla pagina html dovresti avere <link rel="stylesheet" href="style.css"> apri il tuo foglio di stile, in questo esempio si chieama style.css e aggiungi :
    codice:
    .nav-tabs {text-decoration: none!important}
    se invece lavori con gli style all'interno della pagina html, devi inserirlo all'interno del tag <style></style> che si trova all'interno del tag <head></head>

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    37
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    sulla pagina html dovresti avere <link rel="stylesheet" href="style.css"> apri il tuo foglio di stile, in questo esempio si chieama style.css e aggiungi :
    codice:
    .nav-tabs {text-decoration: none!important}
    se invece lavori con gli style all'interno della pagina html, devi inserirlo all'interno del tag <style></style> che si trova all'interno del tag <head></head>
    Dunque diciamo che io non gestisco tutto il sito, ma solo una pagina che fa parte di un sito molto più grande. Quindi non credo di poter modificare il foglio di stile, posso operare solo nell'html di questa specifica pagina. Sto provando con la seconda opzione ma comunque non ho ben capito come fare...
    Ultima modifica di mtguido; 01-06-2020 a 19:32

  6. #6
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    questo è un esempio, dove ho scritto "tuo contenuto" ci andrà il codice che mi hai postato insieme al resto del tuo codice.

    codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="Description" content="esempio sito" />
        <title>pagina d'esempio</title>
        <style>
            .nav-tabs {
                text-decoration: none !important
            }
        </style>
    </head>
    
    <body>
        <!-- tuo contenuto -->
    </body>
    
    </html>

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    37
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    questo è un esempio, dove ho scritto "tuo contenuto" ci andrà il codice che mi hai postato insieme al resto del tuo codice.

    codice HTML:
    <!DOCTYPE html>
    <html lang="it">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="Description" content="esempio sito" />
        <title>pagina d'esempio</title>
        <style>
            .nav-tabs {
                text-decoration: none !important
            }
        </style>
    </head>
    
    <body>
        <!-- tuo contenuto -->
    </body>
    
    </html>
    Ok immaginavo ma c'è un problema, io non posso operare su tutto l'html. Io inserisco il codice all'interno di un pannello dove solitamente si scrive direttamente il testo e che immagino sia solo il body.
    Questo riquadro di testo posso scriverlo anche in html però appunto non credo di poter lavorare su tutto l'head.

  8. #8
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    in questo caso prova la modifica dello stile in linea.
    codice:
    <ul class="nav nav-tabs mb-3" role="tablist" style="text-decoration: none!important">

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2006
    Messaggi
    37
    Niente, sempre uguale, questo è il codice che ho messo:

    codice:
    
    
    
    
    
    
    <div class="tabbable">	<ul class="nav nav-tabs mb-3" role="tablist" style="text-decoration: none!important">
    
    		<li class="nav-item">
    			<a href="#tab-1" data-toggle="tab" class="nav-link active" role="tab" aria-controls="pills-home" aria-selected="true">Prova 1</a>
    		</li>
    
    		<li class="nav-item">
    			<a href="#tab-2" data-toggle="tab" class="nav-link" role="tab" aria-controls="pills-home" aria-selected="false">Prova 2</a>
    		</li>
    
    		<li class="nav-item">
    			<a href="#tab-3" data-toggle="tab" class="nav-link" role="tab" aria-controls="pills-home" aria-selected="false">Prova 3</a>
    		</li>
    
    		<li class="nav-item">
    			<a href="#tab-4" data-toggle="tab" class="nav-link" role="tab" aria-controls="pills-home" aria-selected="false">Prova 4</a>
    		</li>
    
    	</ul>
    	<div class="tab-content">	
    
    		<div class="tab-pane active" id="tab-1"><p></p>
    <p>Prova prova</p>
    <p></p></div> 
    
    		<div class="tab-pane" id="tab-2"><p></p>
    <p>Prova prova prova</p>
    <p></p></div> 
    
    		<div class="tab-pane" id="tab-3"><p></p>
    <p>Prova prova prova prova</p>
    <p></p></div> 
    
    		<div class="tab-pane" id="tab-4"><p></p>
    <p>Prova prova prova prova prova</p>
    <p></p></div> 
    
    	</div>
    </div>

  10. #10
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    scusa era il list-style da inserire
    codice:
     <ul class="nav nav-tabs mb-3" role="tablist" style="list-style: none!important">

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