Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML / CSS - [Twitter bootstrap]Aggiungere brand logo a una navbar
Forum - HTML / CSS - [Twitter bootstrap]Aggiungere brand logo a una navbar

Avatar
amreo (Normal User)
Pro


Messaggi: 93
Iscritto: 18/03/2013

Segnala al moderatore
Postato alle 21:19
Giovedì, 23/07/2015
Ciao
vorrei aggiungere un immagine svg (o png 320x320) che rappresenta il logo del sito a sinistra del mio brand testuale("amxeoite").
Aggiungo che il sito è stato generato a partire da html5boilerplate

Codice sorgente - presumibilmente HTML / CSS

  1. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  2.       <div class="container-fluid">
  3.         <div class="navbar-header">
  4.           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  5.             <span class="sr-only">Toggle navigation</span>
  6.             <span class="icon-bar"></span>
  7.             <span class="icon-bar"></span>
  8.             <span class="icon-bar"></span>
  9.           </button>
  10.           <a class="navbar-brand" href="#">
  11.                         Amxeoite
  12.           </a>
  13.         </div>
  14.         <div id="navbar" class="navbar-collapse collapse">
  15.        
  16.         </div><!--/.navbar-collapse -->
  17.       </div>
  18.     </nav>



invece nei CSS non c'è nulla di rilevante da postare

PM Quote
Avatar
TheDarkJuster (Member)
Guru^2


Messaggi: 1620
Iscritto: 27/09/2013

Segnala al moderatore
Postato alle 1:31
Venerdì, 24/07/2015
hai provato con il tag img?

PM Quote
Avatar
amreo (Normal User)
Pro


Messaggi: 93
Iscritto: 18/03/2013

Segnala al moderatore
Postato alle 13:51
Venerdì, 24/07/2015
intendi
<img src="img/logo.svg" />
oppure
<img src="img/logo.png" />

La prima è troppo piccola
La seconda è troppo grande
Inoltre entrambi vengono visualizzati in ordine sopra-sotto (come display:block)

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 21:22
Venerdì, 24/07/2015
Testo quotato

Postato originariamente da amreo:

invece nei CSS non c'è nulla di rilevante da postare


Testo quotato

Postato originariamente da amreo:Inoltre entrambi vengono visualizzati in ordine sopra-sotto (come display:block)



Se non posti la pagina per intero è impossibile aiutarti. La pagina è raggiungibile da remoto? Se è cosi posta il link ad essa.

PM Quote
Avatar
amreo (Normal User)
Pro


Messaggi: 93
Iscritto: 18/03/2013

Segnala al moderatore
Postato alle 21:27
Venerdì, 24/07/2015
La pagina si trova in amxeoite.homepc.it (un server in casa)

PM Quote
Avatar
amreo (Normal User)
Pro


Messaggi: 93
Iscritto: 18/03/2013

Segnala al moderatore
Postato alle 22:04
Venerdì, 24/07/2015
Ho scoperto che applicando l'attributo display:inline direttamente al tag img attraverso style il problema si risolve. Io vorrei esternalizzarlo in main.css (classe .brand) MA l'attributo non sovrascrive i CSS di bootstrap nonostante vengano linkati prima

PM Quote
Avatar
TheDarkJuster (Member)
Guru^2


Messaggi: 1620
Iscritto: 27/09/2013

Segnala al moderatore
Postato alle 23:37
Venerdì, 24/07/2015
Devi linkarlo dopo

PM Quote
Avatar
Roby94 (Member)
Guru


Messaggi: 1170
Iscritto: 28/12/2009

Segnala al moderatore
Postato alle 11:09
Sabato, 25/07/2015
Testo quotato

Postato originariamente da amreo:MA l'attributo non sovrascrive i CSS di bootstrap nonostante vengano linkati prima


L'interprete tiene conto dell'ultimo valore dato all'attributo, non del primo. In una corretta impaginazione prima vanno i fogli stile gia pronti e poi quelli specifici.
Nei casi più complessi è ammessa la keyword !important http://www.html.it/pag/18947/la-keyword-important/. Ma nel tuo caso la soluzione talmente semplice che io ne eviterei l'impiego, in quanto andando avanti con la complessità creano solo problemi.

Ultima modifica effettuata da Roby94 il 25/07/2015 alle 11:13
PM Quote
Avatar
amreo (Normal User)
Pro


Messaggi: 93
Iscritto: 18/03/2013

Segnala al moderatore
Postato alle 6:35
Domenica, 26/07/2015
:k:

PM Quote