Elenchi puntati in navbar

**mtguido** · 01-06-2020, 17:02

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:

**ninja72** · 01-06-2020, 18:58

Nella classe nav-tabs aggiungi text-decoration: none; oppure list-style: none;

**mtguido** · 01-06-2020, 19:15

Dove dovrei inserirlo esattamente?
Considera che io ho inserito solo questo codice nella pagina, non ho creato una classe nav-tabs sopra ad esempio

**ninja72** · 01-06-2020, 19:23

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>

**mtguido** · 01-06-2020, 19:27

Originariamente inviata da ninja72

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...

**ninja72** · 01-06-2020, 19:33

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>

**mtguido** · 01-06-2020, 19:40

Originariamente inviata da ninja72

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.

**ninja72** · 01-06-2020, 19:55

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">

**mtguido** · 01-06-2020, 20:06

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>

**ninja72** · 02-06-2020, 09:47

scusa era il list-style da inserire

codice:

 <ul class="nav nav-tabs mb-3" role="tablist" style="list-style: none!important">

Discussione: Elenchi puntati in navbar

Strumenti discussione

Ricerca discussione

Visualizza

Elenchi puntati in navbar

Permessi di invio