posizione del logo nella barra di navigazione - html, css

**Chesci** · 20-02-2017, 20:07

Purtroppo non riesco a posizionare il logo sulla estrema sinistra della barra di navigazione.
Appare al centro. Qualcuno sa dirmi cosa ho sbagliato?

Grazie mille per il vostro aiuto.
Vi riporto il mio codice:

codice HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devise-width, initial-scale-1">
    <link href="Francesca.css" type="text/css" rel="stylesheet">
    <title>Museo - Sito Ufficiale</title>
  </head>
  <body>
    <nav>
      <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">Informazioni</a></li>
      <li class="dropdown">
        <a href="#" class="dropbtn">Le Sale</a>
        <div class="dropdown-content">
          <a href="#">Corridoio</a>
          <a href="#">Sala delle Icone</a>
          <a href="#">Sala dei Veneti</a>
          <a href="#">Sala dei Veneti</a>
          <a href="#">Sala della Pittura Napoletana</a>
          <a href="#">Sala 5</a>
          <a href="#">Sala 6</a>
          <a href="#">Laboratorio di Analisi e Restauro</a>
          <a href="#">Biblioteca</a>
        </div>
      <li><a href="#news">News</a></li>
      <li><a href="#news">Contatti</a></li>
      <div class="logo">
        <a href="#"><img id="logodiocesi" src="logodiocesi.png"/> </a>
      </div>
    </nav>
    </div>
  </body>
</html>

codice:

.logo {
  display: block;
  float: right;
  margin: 5px 0 0 20px;
  width: 60px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#logodiocesi {
  height: 35px;
  width: 35px;
  padding-right: 5px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-bottom: 1px solid white;
  display: flex;
  justify-content: center;
}

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Arial;
  letter-spacing: 1px;
  font-size: 14px;
}

nav li a:hover, .dropdown:hover .dropbtn {
  background-color: #892034;
}

nav li.dropdown {
  display: inline-block;
}

nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: #892034;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

nav .dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  text-transform: none;
}

nav .dropdown-content a:hover {
  text-decoration: underline;
}

nav .dropdown:hover .dropdown-content {
  display: block;
}

**KillerWorm** · 21-02-2017, 01:31

non riesco a posizionare il logo sulla estrema sinistra della barra di navigazione.
Appare al centro

Non capisco cosa intendi. Sul tuo codice, per .logo hai definito float:right che lo farebbe comunque disporre sulla destra.

Se devi posizionarlo alla sinistra della pagina prova a togliere quel float e assegnargli invece un posizionamento assoluto, in questo modo:

codice:

position: absolute;
left: 0;

Per maggiori informazioni sul posizionamento degli elementi ti invito a dare uno sguardo tra i link utili CSS (discussione in evidenza) al capitolo 2, sotto "Position".

[Mod]
Quando si posta del codice sul forum è opportuno utilizzare gli appositi tag di formattazione (vedi regolamento di sezione). Grazie.
Per questa volta ho provveduto io editando il tuo post.
Buon proseguimento.

**Chesci** · 21-02-2017, 01:45

sì, scusami ma le stavo tentando tutte ahah non funzionava nemmeno float right!

ho fatto come mi hai detto ed ho risolto! fantastico!
grazie!!

**Vincent.Zeno** · 21-02-2017, 02:31

controlla la marcatura: ci sono un paio di errori di sintassi

Discussione: posizione del logo nella barra di navigazione - html, css

Strumenti discussione

Ricerca discussione

Visualizza

posizione del logo nella barra di navigazione - html, css

Permessi di invio