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>

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    438
    Danke
    0
    Bekam 45 mal "Danke" in 45 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
  •