Navigation wirklich 100%?

html.de-Forum HTML, XHTML & CSS
1

Hallo liebe Leute,

ich versuch mich derweil in CSS so richtig reinzuarbeiten, und meine Webseite perfekt Mobile responsive zu machen.

Ich habe eine zentrierte 1050px Breite, in der sich alles abspielen soll. Die hab ich im CSS gelöst mit:

#navigation {
width: 1050px;
max-width: 100%;
height: 220px;
max-height: 220px;
margin: 0 auto;
}

In dem Bereich #navigation befinden sich die Klassen LOGO und NAVIGATIONSTEXT. Also befinden sich oben ingesamt sechs DIV’s - also ein Logo und fünf Menüpunkte. Mit „float: left;“ habe ich alle in einer Reihe positioniert, und mit mit „display: flex;“ sage ich den sechs Bereichen, sie sollen unbedingt in einer Linie bleiben.

Das klappt auch soweit ganz gut. Schaue ich mir die Seite nur jetzt auf einem Handy an wird ein kleiner Teil rechts „abgeschnitten“, und auch wenn ich sie auf meinem Browser verkleinere, cuttet er die „Übergröße“ einfach. Also die „max-width: 100%;“ aus dem #navigation greift nicht. Aber wieso?

Ich habe so vieles ausprobiert, und diverse Möglichkeiten gecheckt. Aber ich komm nicht weiter.

Zum Verständis noch alle Bereiche die ich im CSS bearbeitet habe und möglicherweise relevant für mein Problem sein könnten…

#header {
width: 100%;
height: 220px;
background-color: black;
}

.logo {
margin-top: 150px;
margin-right: 20px;

float: left;

}

#navigation {
width: 1050px;
max-width: 100%;
height: 220px;
max-height: 220px;
margin: 0 auto;
display: flex;
}

.navigationstext {

font-family: 'Baloo', cursive;
color: aqua;
font-size: 36px;
line-height: 30px;
float: left;
margin-top: 183px;
margin-left: 15px;

}

2

Hallo

Ich vermisse den Link zu der Seite.

möglicherweise relevant für mein Problem

Nein, relevant ist das Zusammenspiel des gesamten Quelltextes.

Mit deinen Quellcodeschnipseln können wir recht wenig anfangen außer dich auf einige grundsätzliche Probleme hinzuweisen.

Eine Breite von 1050px und Responsive Design passen nicht zusammen. Wenn auf großen Bildschirmen fast die Hälfte leer bleibt nervt das einfach nur.

float dient dazu, wenn Text Elemente umfließen soll. Das ist hier nicht der Fall und damit ist float unsinnig.

Die height-Angaben sind komplett überflüssig. Grade bei einem Responsive Design wird die Höhe von Elementen durch deren Inhalt bestimmt.

line-height hat beim Navigationstext nichts verloren. Mit line-height wird der Abstand von Zeilen innerhalb von Absätzen bestimmt.

Gruss

MrMurphy

3

Hallo,

erstmal danke für deine ausführliche Info.
Es handelt sich hierbei um: http://www.yeezmag.com/

4

Also erstens mal hast du die CSS 2x eingebunden…
Zweitens, statt der width/max-width Kombination reicht ein max-width:1050px;

Und ein overflow:hidden oder flex-wrap:wrap auf #navigation würde dein Problem „lösen“. Keine Ahnung was du vor hast - viel sieht man ja nicht.

5

Hallo

Im Quelltext ist noch mehr doppelt oder unsinnig.

Zu einer funktionierenden Website gehört zunächst ein sauberer, den aktuellen Regeln entsprechender, HTML-Quelltext.

Für deine Site könnte der zum Beispiel folgendermaßen aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>header-Layout mit Logo und Navi 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <header class="pageheader">
      <div class="pageheader-inhalt">
         <a class="logo" href="/index.php">
            <img src="/logo.png" alt="Logo">
         </a>
         <nav id="navigation">
            <a href="">News</a>
            <a href="">Test 1</a>
            <a href="">Test 2</a>
            <a href="">Test 3</a>
            <a href="">Test 4</a>
         </nav>
      </div>
   </header>
</body>
</html>

Den weiteren Inhalt lass ich weg, da Webseiten ohne Inhalt zum lernen und erst recht in der Praxis unsinnig sind.

Dazu das CSS:

      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         min-width: 0;
      }
      body {
         padding: 0;
         margin: 0;
      }
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .pageheader {
         background-color: black;
      }
      .pageheader-inhalt {
         max-width: 1050px;
         padding-top: 80px;
         margin: 0 auto;
         display: flex;
      }
      .logo {
         display: block;
         padding-bottom: 8px;
         margin-right: 30px;
      }
      #navigation {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
      #navigation a {
         color: aqua;
         font-family: serif;
         font-size: 30px;
         text-transform: uppercase;
         white-space: nowrap;
         padding-bottom: 0;
      }

Gruss

MrMurphy

6

Hey scbawik, vielen Dank - dein Tipp hat fast komplett geholfen; also auf Handy zeigt er es richtig an - wenn ich den Browser aber verkleinere, rutschen die Menüpunkte nach unten. Gibts noch einen Befehl, der alles im Header schrumpfen lässt? Anstatt dass er irgendwann eine Zeile runter geht?

Und MrMurphy, danke dass du dir die unfassbare Mühe gemacht hast mit dem Code. Und zugegeben, es sieht alles viel viel profesioneller aus, als ich es mache :smiley: …Habe header.php und style.css mit deinem Code erneuert - schau dir aber bei www.yeezmag.com das mal an: Er übernimmt die Hintergrundfarbe z.B. nicht, usw.

7

Hallo

Du musst noch den Link zum CSS setzen. Den habe ich weggelassen weil ich zum Testen Inside-CSS verwende. Ähnliches gilt für andere Pfad- und Dateinamen.

Mein Test-Beispiel sieht komplett so aus:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>header-Layout mit Logo und Navi 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
      }
      body {
         padding: 0;
         margin: 0;
      }
   }

   /*Grafiken*/
   @media all {
      img {
         min-width: 0;
         display: block;
         max-width: 100%;
         border: 0;
      }
   }

   /*.pageheader*/
   @media all {
      .pageheader {
         background-color: black;
      }
      .pageheader-inhalt {
         max-width: 1050px;
         padding-top: 80px;
         margin: 0 auto;
         display: flex;
      }
      .logo {
         display: block;
         padding-bottom: 0.5rem;
         margin-right: 2rem;
      }
      #navigation {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         flex-grow: 1;
         flex-shrink: 1;
         flex-basis: auto;
      }
      #navigation a {
         color: aqua;
         font-family: serif;
         font-size: 1.7rem;
         text-transform: uppercase;
         white-space: nowrap;
         padding-bottom: 0;
      }
   }
   </style>
</head>
<body>
   <header class="pageheader">
      <div class="pageheader-inhalt">
         <a class="logo" href="/index.php">
            <img src="index08_img_01.png" alt="Logo">
         </a>
         <nav id="navigation">
            <a href="">News</a>
            <a href="">Test 1</a>
            <a href="">Test 2</a>
            <a href="">Test 3</a>
            <a href="">Test 4</a>
         </nav>
      </div>
   </header>
   <footer class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/navigation-wirklich-100.57070/">https://www.html.de/</a></p>
   </footer>
</body>
</html>

In der Praxis benutze ich noch ein paar zusätzliche CSS-Grundangaben. Die irritieren Fragesteller aber häufig, so dass ich mich auf das beschriebene Problem beschränke. Nachfolgend temporär mein Test-Beispiel direkt zum Ausprobieren:

http://boratb.bplaced.net/index08.html

Nachtrag: Ich habe für ein Responsive Design noch zwei Media Queries hinzugefügt, auch in meinem Online-Beispiel:

   @media only screen and (max-width: 1000px) {
      .pageheader-inhalt {
         flex-direction: column;
      }
      #navigation {
         padding-left: 20px;
         align-items: flex-start;
      }
   }
   @media only screen and (max-width: 600px) {
      #navigation {
         flex-direction: column;
      }
   }

Gruss

MrMurphy

8

Mega cool, 1000 Dank. MrMurphy, wenn ich könnte würd ich mit Kaffee + Kuchen danken :slight_smile: Ich bin dir echt dankbar dass du dir die Zeit gemacht (y) Mega.

Jetzt hab ich nur noch eine kleine Frage: Die Menüpunkte werden unter dem Logo untereinenander angezeigt, wie kriege ich das hin, dass sie unter dem Logo nebeneinander sind? flex-direction: row; habe ich ausprobiert, funktioniert aber nicht.

9

Hallo

Deine Problembeschreibung ist leider recht oberflächlich. Ich kann nicht nachvollziehen wie sich die Navigation konkret verhalten soll.

Wenn der Platz nicht mehr reicht wird bei meinem Online-Testbeispiel zunächst das Logo in eine extra Zeile nach oben verschoben, die Links bleiben nebeneinander. Wenn der Platz für die Links nicht mehr ausreicht werden sie untereinander dargestellt, weil sonst seitlich gescrollt werden müsste. Das ist das ganz normale von den Besuchern auch so erwartete Verhalten.

Wenn die Links sich anders verhalten sollen müssen halt weitere Media Queries hinzugefügt werden. Zum Beispiel kann noch die Schriftgröße verkleinert werden, was aber nicht benutzerfreundlich ist. Oder zunächst werden nur ein, zwei oder drei Links in eine extra Zeile verschoben.

Gruss

MrMurphy