zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bootstrap Lücke wegbekommen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2015, 14:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 4
rangman135 befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Bootstrap Lücke wegbekommen

Hallo liebe Community,
ich war heute dabei eine Website zu schreiben und habe das Bootstrap Framework dazu benutzt. Nun, ich habe ein Bild mit der Höhe 417 Pixel eingefügt und darüber eine Navbar.
Jetzt ist da eine hässliche Lücke dazwischen und meine Frage wäre wie ich diese beheben kann.

Hier ist der Code:

HTML-Code:
<!DOCTYPE html>
  <head>
  <title>Website</title> 
  <meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet"  href="style.css"> 
</head>
  
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="pull-right">
      <ul class="nav navbar-nav">
        <li><a href="#">Log In</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
        
        <div class="pull-left">
        <ul class="nav navbar-nav">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
          </ul>
        </div>
        
      </div>
    </nav>
    
    <header>
      <div class="jumbotron">
        <div class="container">
    <img src="#">
        </div>
      </div>
    </header>
   
  </body>

</html>
Das Bild habe ich durch ein "#" ersetzt, war ein GitHub Logo mit der Höhe 417px.

Ich hoffe, dass ihr mir helfen könnt.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.11.2015, 14:25
Neuer Benutzer
neuer user
 
Registriert seit: 05.11.2015
Beiträge: 22
Handle3000 befindet sich auf einem aufstrebenden Ast
Standard

Eine Mögliche Lösung wäre folgenden CSS Code zu ergänzen:

Code:
.jumbotron {
		margin: -20px 0px 0px 0px;
	}
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.11.2015, 16:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 4
rangman135 befindet sich auf einem aufstrebenden Ast
Standard

Hat leider nicht funktioniert
Mit Zitat antworten
  #4 (permalink)  
Alt 19.11.2015, 16:50
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Laut deinem Code hat .navbar margin-bottom: 20px

Diesen Wert musst du auf 0 setzen.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.11.2015, 16:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 4
rangman135 befindet sich auf einem aufstrebenden Ast
Standard

Funktioniert auch nicht. Die Lösung war die Navigation Bar fixiert zu machen, mit
HTML-Code:
navbar-fixed-top
. Für alle die das gleiche Problem haben oder hatten, ich hoffe ich konnte hier nicht nur mir, auch euch helfen.

Geändert von rangman135 (19.11.2015 um 17:00 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 19.11.2015, 17:01
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Dann brauchen wir mehr Code. Bei deinem geposteten klappt es nämlich definitiv.

Vielleicht musst du mal in deinem Fall ein !important dazu schreiben oder anderweitig die Spezifität erhöhen.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.11.2015, 01:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.11.2015
Beiträge: 4
rangman135 befindet sich auf einem aufstrebenden Ast
Standard

Mir ist ein dummer Fehler unterlaufen. Die CSS Datei wurde falsch hinzugefügt.
Mit Zitat antworten
Antwort

Stichwörter
bild, bootstrap, css, hmtl, navbar

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bootstrap und Navigation ChOpSueY! CSS 0 27.01.2015 13:54
Bootstrap LESS bei gehostetem Projekt kompilieren dst89 CSS 2 30.12.2014 12:57
Unerklärliche Lücke über DIV Tony-S CSS 6 12.04.2012 18:38
Lücke zwischen zwei <div>'s und strecken des <div>-Container's Surras CSS 2 13.03.2012 19:25
unerklärliche 10 Pixel Lücke im IE FlavorFlav CSS 2 14.12.2007 19:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:59 Uhr.