MrMurphy1: Inhalt an Breite anpassen

Beitrag lesen

SELF-Forum

Inhalt an Breite anpassen

MrMurphy1
−1 Informationen zu den Bewertungsregeln

Hallo

Da mir deine Navigation nicht bekannt ist habe ich mal ein einfaches Beispiel erstellt:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Menü Abkürzung 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         width: 96%;
         margin: 1rem auto;
      }
      nav {
         position: relative;
         display: flex;
         justify-content: space-around;
      }
      nav a {
         background-color: black;
         color: white;
         text-decoration: none;
         text-transform: uppercase;
         outline: none;
      }
      nav a:hover {
         background-color: blue;
         color: white;
      }
      nav a span {
         overflow: hidden;
         position: absolute;
         left: -10000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
   }
   @media only screen and (min-width: 630px) {
      nav a {
         text-transform: none;
      }
      nav a span {
         position: static;
         left: 0;
         width: auto;
         height: auto;
      }
   }
   </style>
</head>
<body>
   <nav>
      <a href="#">V<span>olks</span>w<span>agen</span></a>
      <a href="#">R<span>olls-</span>R<span>oyce</span></a>
      <a href="#">M<span>ercedes </span>B<span>enz</span></a>
      <a href="#">A<span>ston </span>M<span>artin</span></a>
   </nav>
</body>
</html>

Gruss

MrMurphy

Beitrag melden
−1
Informationen zu den Bewertungsregeln