CSS Menü mittig ausrichten

donrijo

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; }

Alles anzeigen

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

lg
donrijo

synaptic

gib #cssmenu ne feste breite (zum beispiel 50%) und dazu nen

Code

margin: 0 auto;

donrijo

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.

Bandit

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

explanator

@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.

Tags