Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 14

Thema: Navigationsbar bearbeiten

  1. #1
    Youngster
    Registriert seit
    09.01.2018
    Beiträge
    11
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard Navigationsbar bearbeiten

    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-Code:
    <!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>

    HTML-Code:
    /* === 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)=== */
    
    

  2. #2
    Youngster
    Themenstarter

    Registriert seit
    09.01.2018
    Beiträge
    11
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigationsbar bearbeiten

    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.

  3. #3
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    585
    Danke
    0
    Bekam 69 mal "Danke" in 67 Postings

    Standard AW: Navigationsbar bearbeiten

    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

    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
    Geändert von MrMurphy (10.01.2018 um 08:33 Uhr)

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    09.01.2018
    Beiträge
    11
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigationsbar bearbeiten

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

  5. #5
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.274
    Danke
    22
    Bekam 123 mal "Danke" in 122 Postings

    Standard AW: Navigationsbar bearbeiten

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

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    09.01.2018
    Beiträge
    11
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigationsbar bearbeiten

    Zitat Zitat von Arne Drews Beitrag anzeigen
    In allen Fällen musst Du HTML und CSS lernen. Dir fehlen Grundlagen.
    @Arne Drews woran merkst du das?
    Was mache ich alles falsch?

  7. #7
    Meister(in)
    Registriert seit
    24.10.2016
    Beiträge
    378
    Danke
    0
    Bekam 34 mal "Danke" in 33 Postings

    Standard AW: Navigationsbar bearbeiten

    Zitat Zitat von web123 Beitrag anzeigen
    Was mache ich alles falsch?
    Das steht doch da
    Dir fehlen Grundlagen.

  8. #8
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.274
    Danke
    22
    Bekam 123 mal "Danke" in 122 Postings

    Standard AW: Navigationsbar bearbeiten

    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:
    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.

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    09.01.2018
    Beiträge
    11
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Navigationsbar bearbeiten

    Zitat Zitat von MrMurphy Beitrag anzeigen

    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?

  10. #10
    Meister(in)
    Registriert seit
    24.10.2016
    Beiträge
    378
    Danke
    0
    Bekam 34 mal "Danke" in 33 Postings

    Standard AW: Navigationsbar bearbeiten

    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.

Ähnliche Themen

  1. Header bearbeiten
    Von dreadkopp im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 29.03.2015, 15:05
  2. Videos Bearbeiten
    Von Aschuram im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 10.04.2009, 12:54
  3. videos bearbeiten
    Von pewe101 im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 10.09.2007, 01:32
  4. PHP Dateien bearbeiten
    Von cookies im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 12.03.2006, 02:20
  5. Logo bearbeiten
    Von xnoelx im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 9
    Letzter Beitrag: 21.01.2006, 17:27

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •