XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bootstrap Lücke wegbekommen (http://xhtmlforum.de/showthread.php?t=72494)

rangman135 19.11.2015 14:04

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.

Handle3000 19.11.2015 14:25

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

Code:

.jumbotron {
                margin: -20px 0px 0px 0px;
        }


rangman135 19.11.2015 16:40

Hat leider nicht funktioniert:(

dazzle89 19.11.2015 16:50

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

Diesen Wert musst du auf 0 setzen.

rangman135 19.11.2015 16:56

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.

dazzle89 19.11.2015 17:01

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.

rangman135 20.11.2015 01:01

Mir ist ein dummer Fehler unterlaufen. Die CSS Datei wurde falsch hinzugefügt.


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020