Navigationsbar bearbeiten

web123

Hallo,
die Navigationsbar sollte von der Höhe kleiner sein. Ich habe versucht, die height vom nav oder dem container zu verändern aber die Höhe verändert sich nicht.
Außerdem habe ich bei den Menüpunkten unten ein padding-bottom, welches entfernt werden soll. Das liegt an dem großen Facebook und Twitter Symbol.
Die Größe der Symbole sollen aber nicht verkleinert werden.

Und warum brauche ich dieses !important, damit die CSS Regeln ausgeführt werden?

Außerdem wäre ich auch um weitere Tipps dankbar.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
 <title>Übung 1</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link href="src/css/styles.css" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


  <div class="container-fluid">


  <!-- ########################################################################## -->
  <!-- Navbar -->
  <!-- ########################################################################## -->


  <nav class="navbar navbar-default">
      <div class="container">
        <ul class="nav navbar-nav">

          <li class="active"><a href="#">Platzhalter</a></li>
 
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Platzhalter</a>
            <ul class="dropdown-menu">
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
            </ul>
            </li>

          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Platzhalter</a>
            <ul class="dropdown-menu">
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
            </ul>
            </li>



          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Platzhalter</a>
            <ul class="dropdown-menu">
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
            </ul>
            </li>



          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Platzhalter</a>
            <ul class="dropdown-menu">
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li> 
            </ul>
            </li>

          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Platzhalter</a>
            <ul class="dropdown-menu">
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
              <li class="divider"></li> 
              <li><a href="#">Platzhalter</a></li>
            </ul>
            </li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#"><i class="fa fa-facebook"></i>Facebook</a></li>
            <li><a href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
        </ul>

      </div>
  </nav>


  <!-- ########################################################################## -->
  <!-- Navbar (End)-->
  <!-- ########################################################################## -->


  </div>


</body>
</html>

Alles anzeigen

HTML

/* === FARBEN === */


/*
Blau:         #1F4EBC
Dunkel Grau:  #3D3F45
Hell Grau:    #E5E5E5
Rot:          #A62C21
#D6D4D5
*/




html,body{
height:100%;
margin:0;
}


/* === GLOBAL === */
body{
  font-family: 'Arial' sans-serif;
  font-size: 16px;
}


*{
  box-sizing:border-box;
}


/* === Navbar === */
.navbar > .container{
    padding-left:0;
    width:100%

}


.navbar{
    border-radius:0;
    border:none;

}


body > .container-fluid{
    margin-left:15%;
    margin-right:15%;

}


nav li, nav .dropdown-menu > li > a{
    font-weight:bold;
    font-size:16px;
}


i{
    letter-spacing:5px;
    font-size:16px !important;
}


.navbar-right i{
    font-size:24px !important;
}


a:link {
    text-decoration: none;
}


a:visited {
    text-decoration: none;
}


a:hover{
    color:white !important;
    background-color:gray !important;
}


.navbar-right a:hover{
    color:orange !important;
    background-color:transparent !important;
}


a:active {
    text-decoration: none;
}


.active > a{
    color:orange !important;
}


/* === Navbar (End)=== */

Alles anzeigen

web123

Das ist mein erstes Projekt und ich kenne niemanden persönlich den ich um Hilfe bitten kann.
Über Hilfe, wäre ich also sehr dankbar.

MrMurphy

Hallo

Hilfe für dich dürfte schwierig werden.

Du hast keine Ahnung von HTML und CSS, verwendest aber Bootstrap als Grundlage. Grade Anfänger sollten dann auch die Möglichkeiten, aber auch Einschränkungen, von Bootstrap verwenden. Dass dazu gehört die Regeln von Bootstrap zu lernen versteht sich von selbst.

Deshalb gehört es sich auch direkt in der Frage auf die Verwendung von Bootstrap oder andere Besonderheiten hinzuweisen.

Wer Bootstrap verwenden und Änderungen am CSS durchführen will sollte schon solide Grundkenntnisse in HTML und CSS haben. Sonst wird immer wieder das CSS von Bootstrap unerwartet dazwischenfunken.

Genau darauf deutet deine Frage

Zitat

Und warum brauche ich dieses !important, damit die CSS Regeln ausgeführt werden?

hin. Das brauchst du weil du ohne Hintergrundwissen das CSS von Bootstrap überschreiben willst. Hier fehlt dir das Wissen von dem Vorrang und die Spezifität von CSS-Regeln. Die füllen aber bereits ein dickes Kapitel in einem Buch. Important ist in der Regel überflüssig und sollte nicht verwendet werden.

In deinem Fall reicht die Spezifität deiner CSS-Angaben nicht aus um die von Bootstrap zu überschreiben. Richtig wäre, die gleiche Spezifität zu verwenden. Wobei grundsätzlich natürlich deine CSS-Regeln nach denen von Bootstrap im Quelltext stehen sollten.

Weiterhin können dir nur Leute helfen, die selbst Bootstrap verwenden, sich zusätzlich im CSS von Bootstrap auskennen und eine Testumgebung dafür haben. Das dürfte eine Minderheit sein. Wir gucken uns deinen Quelltext nicht an und erkennen das Problem, sondern müssen es in einer eigenen Testumgebung nachbauen, um das Problem und eine Lösung dafür zu finden.

Am besten wäre du würdest uns grundsätzlich Links zu deinen Testseiten bereitstellen. Wobei wir speziell für Lösungen zu Bootstrap doch eine eigene Testumgebung benötigen.

Wir helfen zwar gerne, aber wir tun das in unserer Freizeit. Unsere Zeit ist damit begrenzt. Für komplexe Probleme oder gar Schulungen ist ein Forum deshalb auch nicht gedacht oder geeignet.

Gruss

MrMurphy

web123

Wie soll ich die Navigationsbar also ambesten machen? Das Menü sollte auch Unterpunkte enthalten.
Mit Flexbox oder ein Grid System und auf Bootstrap verzichten?

Arne Drews

In allen Fällen musst Du HTML und CSS lernen. Dir fehlen Grundlagen.

web123

Zitat von Arne Drews

In allen Fällen musst Du HTML und CSS lernen. Dir fehlen Grundlagen.

Arne Drews woran merkst du das?
Was mache ich alles falsch?

Bandit

Zitat von web123

Was mache ich alles falsch?

Das steht doch da

Zitat

Dir fehlen Grundlagen.

Arne Drews

Hallo,

Nimm es bitte nicht persönlich, das war konstruktiv gemeint.
MrMurphy hat eigentlich alles sehr schön formuliert, dem ist soweit nichts mehr hinzuzufügen.
Anhand Deiner Fragestellungen erkennt man halt, dass die Grundlagen noch nicht so ganz sitzen. Das ist ja nichts verwerfliches, wir haben doch auch mal vor solchen Problemen gestanden am Anfang.
Aber das Erlernen der Grundlagen ist leider nun mal eine Sache, die Dir hier niemand abnehmen wird.

Auch das hat MrMurphy treffend formuliert:

Zitat

Wir helfen zwar gerne, aber wir tun das in unserer Freizeit. Unsere Zeit ist damit begrenzt. Für komplexe Probleme oder gar Schulungen ist ein Forum deshalb auch nicht gedacht oder geeignet.

web123

Zitat von MrMurphy

Am besten wäre du würdest uns grundsätzlich Links zu deinen Testseiten bereitstellen. Wobei wir speziell für Lösungen zu Bootstrap doch eine eigene Testumgebung benötigen.

Gruss

MrMurphy

Hallo,
gibt es eine kostenlose (oder günstige) Möglichkeit um Links übers Internet hochzuladen?

Bandit

Man kann keine Links hochladen.

Wenn du kostenlosen Webspace meinst, dann könnte bplaced.net für dich interessant sein.

MrMurphy meinte, dass du einen Link zu deiner Seite hier posten sollst.

web123

Zitat von Bandit

MrMurphy meinte, dass du einen Link zu deiner Seite hier posten sollst.

Verstehe ich nicht. Bzw. wie kann ich meine Links hochladen?

Arne Drews

https://www.example.com/deine-seite-halt.html

web123

Ich würde es gerne hinbekomen, ein responsives Dropdownmenü zu programmieren.
Es gibt dabei mehrere Möglichkeiten.

Flexbox, Grid, JavaScript, etc.

Welche Methode sollte ich verwenden?

Bandit

Zitat von web123

Verstehe ich nicht. Bzw. wie kann ich meine Links hochladen?

Lerne bitte erst mal die Grundlagen.

Ich bin raus!

Tags