Ergebnis 1 bis 5 von 5

Thema: CSS Menü mittig ausrichten

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

    Standard CSS Menü mittig ausrichten

    Als erstes möchte ich mal alle hier im Forum Herzlichst Grüssen!

    Zu meiner Fragestellung:

    Ich habe mir bei http://cssmenumaker.com/builder/481143 das Nav. Menü runtergeladen und auf meinen Webspace gepackt siehe hier >>>http://next1.at/458009/instructions.html.
    Nur würde ich gerne das die Menü-Buttons mittig ausgerichtet werden...und nicht so wie jetzt von links nach rechts.

    Ich habe in der CSS Datei schon versucht ein wenig herum zuspielen bekomme es aber nicht hin.

    Es wäre echt toll wenn Ihr mir helfen könnt!

    Hier der Auszug von der CSS Datei:
    Code:
    @charset 'UTF-8';/* Starter CSS for Menu */
    #cssmenu {
      padding: 0;
      margin: 0;
      border: 0; }
    
    
    #cssmenu ul, #cssmenu li {
      list-style: none;
      margin: 0;
      padding: 0; }
    
    
    #cssmenu ul {
      position: relative;
      z-index: 597; }
    
    
    #cssmenu ul li {
      float: left;
      min-height: 1px;
      vertical-align: middle; }
    
    
    #cssmenu ul li.hover,
    #cssmenu ul li:hover {
      position: relative;
      z-index: 599;
      cursor: default; }
    
    
    #cssmenu ul ul {
      visibility: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 598;
      width: 100%; }
    
    
    #cssmenu ul ul li {
      float: none; }
    
    
    #cssmenu ul ul ul {
      top: 0;
      left: 100%; }
    
    
    #cssmenu ul li:hover > ul {
      visibility: visible; }
    
    
    #cssmenu ul ul {
      margin-top: 0; }
    
    
    #cssmenu a {
      display: block;
      line-height: 1em;
      text-decoration: none; }
    
    
    #cssmenu ul li.last ul {
      left: auto;
      right: 0; }
    
    
    #cssmenu ul li.last ul ul {
      left: auto;
      right: 99.5%; }
    
    
    #cssmenu:after, #cssmenu ul:after {
      content: '';
      display: block;
      clear: both; }
    
    
    /* Custom CSS Styles */
    #cssmenu {
      font-family: Helvetica, Arial, sans-serif; }
      #cssmenu:before {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
        background-color: #606a77;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
        background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
        background-image: -moz-linear-gradient(top, #4f5864, #49515b);
        background-image: -o-linear-gradient(top, #4f5864, #49515b);
        background-image: linear-gradient(#4f5864, #49515b);
        -moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
        -webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
        box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
        content: '';
        display: block;
        height: 8px;
        width: 100%; }
      #cssmenu > ul {
        border-bottom: 1px solid #252A30;
        border-top: 1px solid #252A30;
        -moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
        background-color: #566171;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
        background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
        background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
        background-image: -o-linear-gradient(top, #6e7d8f, #404854);
        background-image: linear-gradient(#6e7d8f, #404854);
        height: 27px;
        padding: 15px 15px 15px 5px; }
        #cssmenu > ul > li {
          margin: 0 10px; }
        #cssmenu > ul > li.has-sub:hover > a {
          -moz-border-radius: 3px 3px 0 0;
          -webkit-border-radius: 3px 3px 0 0;
          border-radius: 3px 3px 0 0;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box; }
        #cssmenu > ul > li:hover > a {
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);
          background-color: #e2e2e2;
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(1, #c8c8c8));
          background-image: -webkit-linear-gradient(top, white, #c8c8c8);
          background-image: -moz-linear-gradient(top, white, #c8c8c8);
          background-image: -o-linear-gradient(top, white, #c8c8c8);
          background-image: linear-gradient(white, #c8c8c8); }
        #cssmenu > ul > li.active:hover > a {
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);
          background-color: #cb7b72;
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f49b8e), color-stop(1, #bd584d));
          background-image: -webkit-linear-gradient(top, #f49b8e, #bd584d);
          background-image: -moz-linear-gradient(top, #f49b8e, #bd584d);
          background-image: -o-linear-gradient(top, #f49b8e, #bd584d);
          background-image: linear-gradient(#f49b8e, #bd584d); }
      #cssmenu ul a {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);
        background-color: #c2c2c2;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
        background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
        background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
        background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
        background-image: linear-gradient(#f1f1f1, #a8a8a8);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
        color: #3c444d;
        font-size: 12px;
        line-height: 27px;
        padding: 0 20px;
        position: relative;
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
      #cssmenu ul ul {
        width: 170px; }
        #cssmenu ul ul a {
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          -moz-border-radius: 0;
          -webkit-border-radius: 0;
          border-radius: 0;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          line-height: 150%; }
      #cssmenu ul .active > a {
        color: #FFF;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);
        background-color: #c46a60;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef7260), color-stop(1, #b04c41));
        background-image: -webkit-linear-gradient(top, #ef7260, #b04c41);
        background-image: -moz-linear-gradient(top, #ef7260, #b04c41);
        background-image: -o-linear-gradient(top, #ef7260, #b04c41);
        background-image: linear-gradient(#ef7260, #b04c41); }
      #cssmenu ul .has-sub {
        position: relative; }
        #cssmenu ul .has-sub ul {
          -moz-border-radius: 0 3px 3px 3px;
          -webkit-border-radius: 0 3px 3px 3px;
          border-radius: 0 3px 3px 3px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          -moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
          -webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;
          background-color: #c3c3c3;
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #aaaaaa));
          background-image: -webkit-linear-gradient(top, #e9e9e9, #aaaaaa);
          background-image: -moz-linear-gradient(top, #e9e9e9, #aaaaaa);
          background-image: -o-linear-gradient(top, #e9e9e9, #aaaaaa);
          background-image: linear-gradient(#e9e9e9, #aaaaaa);
          padding: 3px 0; }
          #cssmenu ul .has-sub ul a {
            background: none;
            padding: 8px 8px 8px 16px;
            border-bottom: 1px solid transparent;
            text-align: left; }
          #cssmenu ul .has-sub ul .has-sub a:after {
            content: none; }
        #cssmenu ul .has-sub li:hover > a {
          border-bottom: 1px solid #1D2024;
          color: #FFF;
          background-color: #55616f;
          background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
          background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
          background-image: -moz-linear-gradient(top, #56606f, #3f4852);
          background-image: -o-linear-gradient(top, #56606f, #3f4852);
          background-image: linear-gradient(#56606f, #3f4852);
          -moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
          -webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
          box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
          position: relative;
          text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
          #cssmenu ul .has-sub li:hover > a:after {
            border-left: 0 none;
            background-color: #c35f54;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
            background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
            background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
            background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
            background-image: linear-gradient(#ea5f51, #a9463b);
            -moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
            -webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
            box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
            content: '';
            height: 100%;
            width: 6px;
            position: absolute;
            right: 0;
            top: 0; }
        #cssmenu ul .has-sub > a {
          padding-right: 0; }
        #cssmenu ul .has-sub > a:after {
          content: '▼';
          border-left: 1px solid rgba(100,100,100,0.2);
          color: #5D6A7A;
          -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
          -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
          box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
          display: inline-block;
          font-size: 9px;
          margin-left: 5px;
          text-align: center;
          height: 25px;
          width: 24px;
          text-shadow: 0 -1px 0 #101417; }
    #cssmenu ul .active > a:after { color: #FFF; }

    Ich würde mich echt freuen wenn wenn es klappt!

    lg
    donrijo
    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 !!!!!
    Geändert von donrijo (12.04.2013 um 11:07 Uhr)

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.900
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: CSS Menü mittig ausrichten

    gib #cssmenu ne feste breite (zum beispiel 50%) und dazu nen
    Code:
    margin: 0 auto;
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    HTML Newbie
    Themenstarter

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

    Standard AW: CSS Menü mittig ausrichten

    Danke für deine schnelle Hilfe!
    Ich würde gerne das der Hintergrund die Seite von links nach recht ausfühlt und der Inhalt (Link-Button) mittig ausgerichtet wird.
    Jetzt schaut es so aus http://next1.at/458009/instructions.html.



  4. #4
    Bandit
    Gast

    Standard AW: CSS Menü mittig ausrichten

    Packe um das div cssmenu noch ein div mit 100% Breite und verpasse diesem den Hintergrund vom cssmenu

  5. #5
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: CSS Menü mittig ausrichten

    @Bandit Das wird nicht gut aussehen, da dort Border und Boxshadow verwendet wird, sowie ein Linearer Verlauf für den Hintergrund.

    Hier mein Vorschlag.

    Div#cssmenu bekommt 100% Breite und alle Angaben zum Hintergrund und die Border von UL. Also von UL kopieren und bei Div#cssmenu einfügen. Danach Angaben in UL löschen.

    in UL width:50% schreiben und margin: 0 auto:

    Dann müsste es passen.

Stichworte

Berechtigungen

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