Beiträge von web123

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?

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.

web123

Hallo,
bei schmaleren Fenster soll der rechte Text und das Bild weiter nach links verschoben werden.
Die Schriftgröße wird auch kleiner.
Wird das Fenster weiterhin verkleinert, dann soll der rechte Text verschwinden.
Wird das Fenster weiterhin verkleinert, dann soll das Bild in die Menüleiste und es steht nur noch der linke Text.

Kannst du mir erklären, wie man mit Flexbox Elemente positioniert?
Das responsive Verhalten brauchst du nicht erklären.

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

Hallo,
ich habe Schwierigkeiten Elemente in CSS anzuordnen.
Es sollte, so wie im Anhang aussehen.
Sollte man Flexbox oder ein CSS Grid verwenden?
Wie positioniert man Elemente?
Der rote Kasten sollte ein Bild sein.

Vielen Dank

Beiträge von web123

Navigationsbar bearbeiten

Navigationsbar bearbeiten

Positionierung von Elementen

Navigationsbar bearbeiten

Positionierung von Elementen