Ankündigung

Einklappen
Keine Ankündigung bisher.

Navbar mittig zentrieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Navbar mittig zentrieren

    Hallo liebe Community,

    da ich noch ein absoluter Programmieranfänger bin, habe ich mal eine Frage zu einem simplen Problem. Für die meisten unter euch wird das Problem wahrscheinlich aus dem stegreif zu lösen sein.

    Ich habe eine navbar in meine CSS-Datei implementiert und nun möchte ich, dass die Navbar mittig angezeigt wird und nicht dauerhaft links. Meiner Vermutung nach liegt es an dem float bei:
    Code:
    #navbar ul li {
      text-align: center;
      float: left;
      list-style: none;
    }
    Bitte klärt mich über den dummen Fehler auf!

    Code:
    #navbar,
    #navbar ul,
    #navbar ul li,
    #navbar ul li a {
      padding: 0;
      margin: 0;
      line-height: 1;
      font-family: 'Capriola', sans-serif;
    }
    #navbar:before,
    #navbar:after,
    #navbar > ul:before,
    #navbar > ul:after {
      content: '';
      display: table;
    }
    #navbar:after,
    #navbar > ul:after {
      clear: both;
    }
    #navbar ul {
      background: url(images/color.png) repeat-x 0px 4px;
      height: 69px;
    }
    #navbar ul li {
      text-align: center;
      float: left;
      list-style: none;
    }
    #navbar ul li a {
      display: block;
      height: 37px;
      padding: 22px 30px 0;
      margin: 4px 2px 0;
      border-radius: 2px 2px 0 0;
      text-decoration: none;
      font-size: 15px;
      color: white;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
      font-weight: 400;
      opacity: .9;
    }
    #navbar ul li:first-child a {
      margin: 4px 2px 0 0;
    }
    #navbar ul li a:hover,
    #navbar ul li.active a {
      background: url(images/color.png) center bottom;
      display: block;
      height: 37px;
      margin-top: 0px;
      padding-top: 26px;
      color: #004f7c;
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
      opacity: 1;
    }
    Grüße,
    Josc


  • #2
    Wenn du die komplette Seite zu Verfügung stellen kannst, schau ich mir das gerne an, aber mit den von dir geposteten Code-Ausschnitten ist mir das zu ungenau und zu viel Arbeit

    Kommentar


    • #3
      vorweg: das ist KEIN programmieren.

      kannste mal nen Screenshot schicken und genau erklären, was du vorhast?

      Ich verstehe das jetzt so - bitte korriegieren, wenns falsch ist - dass du die ganze Navbar in der Mitte haben willst.
      Das könnte man über margin: auto lösen

      Pseudocode:
      Code:
      .center-block {
          margin-left: auto;
          margin-right: auto; 
          width: 1000px;
      }
      LG
      https://github.com/Ma27
      Javascript Logic is funny:
      [] + [] => "", [] + {} => object, {} + [] => 0, {} + {} => NaN

      Kommentar


      • #4
        Hallo,

        erstmal danke für die Antworten.

        Ich verstehe das jetzt so - bitte korriegieren, wenns falsch ist - dass du die ganze Navbar in der Mitte haben willst.
        Ganz genau!

        Also das ist der ganze CSS-Code:

        Code:
        body { font-family: Arial, Helvetica; margin: 0px; text-align: justify;}
        #header {background-repeat: no-repeat; background-color: black; padding-top: 2px; margin: 0px; 
        		height: 331px; width: 1870px;}
        #navbar,
        #navbar ul,
        #navbar ul li,
        #navbar ul li a {
          padding: 0;
          margin: 0;
          line-height: 1;
          font-family: 'Capriola', sans-serif;
        }
        #navbar:before,
        #navbar:after,
        #navbar > ul:before,
        #navbar > ul:after {
          content: '';
          display: table;
        }
        #navbar:after,
        #navbar > ul:after {
          clear: both;
        }
        #navbar ul {
          background: url(images/color.png) repeat-x 0px 4px;
          height: 69px;
        }
        #navbar ul li {
          float: left;
          list-style: none;
        }
        #navbar ul li a {
          display: block;
          height: 37px;
          padding: 22px 30px 0;
          margin: 4px 2px 0;
          border-radius: 2px 2px 0 0;
          text-decoration: none;
          font-size: 15px;
          color: white;
          text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
          font-weight: 400;
          opacity: .9;
        }
        #navbar ul li:first-child a {
          margin: 4px 2px 0 0;
        }
        #navbar ul li a:hover,
        #navbar ul li.active a {
          background: url(images/color.png) center bottom;
          display: block;
          height: 37px;
          margin-top: 0px;
          padding-top: 26px;
          color: #004f7c;
          text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
          opacity: 1;
        }
        #inhalt {text-align: center; padding-left: 20%; padding-right: 20%; text-align: justify; background-color: white;}

        Kommentar

        Lädt...
        X