Ergebnis 1 bis 3 von 3

Thema: Menü mittig stellen

  1. #1
    HTML Newbie
    Registriert seit
    18.03.2017
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Frage Menü mittig stellen

    Hallo,

    ich habe folgendes Problem ich würde gerne ein Menü mittig stellen jedoch klappt es nicht da es immer Links- oder Rechtsbündig gemacht wird.
    Vvl könnt ihr mir helfen!

    Unbenannt.jpg


    CSS - Code:

    Code:
    /* CSS Document */body {
      background: grey;
    }
    
    
    * {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      box-sizing: border-box;
    }
    
    
    nav {
      float: left;
      width: 100%;
      background: red;
      font-size: 16px;
    }
    
    
    nav ul {
      margin: 0;
      padding: 0;
    }
    
    
    nav a {
      display: block;
      color: #fff;
      text-decoration: none;
    }
    
    
    nav ul li {
      position: relative;
      float: left;
      list-style: none;
      color: #fff;
      transition: 0.5s;
    }
    
    
    nav ul li a {
      padding: 20px;
    }
    
    
    nav ul > li.submenu > a:after {
      position: relative;
      float: right;
      content: '';
      margin-left: 10px;
      margin-top: 5px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #fff;
      border-bottom: 5px solid transparent;
    }
    
    
    nav ul ul li.submenu > a:after {
      margin-left: auto;
      margin-right: -10px;
      border-left: 5px solid #fff;
      border-right: 5px solid transparent;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
    
    
    nav ul li:hover {
      background: #4096ee;
    }
    
    
    nav ul ul {
      position: absolute;
      top: -9999px;
      left: -9999px;
      background: #333;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    
    
    nav ul ul li {
      float: none;
      width: 200px;
      border-bottom: 1px solid #555;
    }
    
    
    nav ul ul li a {
      padding: 10px 20px;
    }
    
    
    nav ul ul li:last-child {
      border-bottom: none;
    }
    
    
    nav ul li:hover > ul {
      top: 100%;
      left: 0;
    }
    
    
    nav ul ul li:hover > ul {
      top: 0;
      left: 200px;
    }
    HTML Code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <link rel="stylesheet" type="text/css" href="/menu/Style.css" />
      <title></title>
      </head>
      <body>
      <nav>
      <ul>
        <li><a href="#" title="Nach Hause">Punkt1</a></li>
        <li class="submenu"><a href="#" title="Punkt2">Punkt2</a>
          <ul>
            <li class="submenu"><a href="#" title="Punkt2.1">Punkt2.1</a>
              <ul>
                <li><a href="#" title="Punkt2.1.1">Punkt2.1.1</a></li>
                <li><a href="#" title="Punkt2.1.2">Punkt2.1.2</a></li>
                <li><a href="#" title="Punkt2.1.3">Punkt2.1.3</a></li>
                <li><a href="#" title="Punkt2.1.4">Punkt2.1.4</a></li>
              </ul>
            </li>
            <li class="submenu"><a href="#" title="Punkt2.2">Punkt2.2</a>
              <ul>
                <li><a href="#" title="Punkt2.2.1">Punkt2.2.1</a></li>
                <li><a href="#" title="Punkt2.2.2">Punkt2.2.2</a></li>
                <li class="submenu"><a href="#" title="Punkt2.2.3">Punkt2.2.3</a>
                  <ul>
                    <li class="submenu"><a href="#" title="Punkt2.2.3.1">Punkt2.2.3.1</a>
                      <ul>
                        <li><a href="#" title="Punkt2.2.3.1.1">Punkt2.2.3.1.1</a></li>
                        <li><a href="#" title="Punkt2.2.3.1.2">Punkt2.2.3.1.2</a></li>
                      </ul>
                    </li>
                    <li><a href="#" title="Punkt2.2.3.2">Punkt2.2.3.2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" title="Punkt3">Punkt3</a></li>
        <li><a href="#" title="Punkt4">Punkt4</a></li>
        <li><a href="#" title="Punkt5">Punkt5</a></li>
      </ul>
    </nav>
    
    
      </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    454
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Menü mittig stellen

    Code:
    nav {
     width:100%;
           display:inline-block;
           text-align:center;
     background: red;
     font-size: 16px;
    }
    
    nav ul li {
      position: relative;
              display:inline-block;
      list-style: none;
      color: #fff;
      transition: 0.5s;
    }
    Das was eingerückt ist, sind die Änderungen. Das war's. Bedenke aber, das mobile Geräte kein HOVER kennen.

  3. Folgende User finden die Antwort von djheke gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    18.03.2017
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Menü mittig stellen

    Wie wuerde es dann für mobile Geräte aussehen?

Ähnliche Themen

  1. CSS Menü mittig ausrichten
    Von donrijo im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 12.04.2013, 23:23
  2. Menü mittig setzten
    Von ludgerf321 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 28.11.2007, 21:41
  3. Film von DVD ins Web stellen
    Von Loewenzahn im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 03.05.2007, 11:35
  4. HP online stellen
    Von kathili im Forum Flash Forum
    Antworten: 4
    Letzter Beitrag: 05.12.2006, 07:51
  5. Wie krieg ich die Stellen rot?
    Von Blizzi im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 30.08.2006, 10:49

Stichworte

Berechtigungen

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