kostenloser Webspace werbefrei: lima-city

Menü header Mittig platzieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

after auto bestandteil blocken boxen code display element header hilfe http machen position problem radius schauen support test text url
  1. Autor dieses Themas

    senshi-network

    senshi-network hat kostenlosen Webspace.

    1:23, 3.11.2013
    Hallo, ich möchte dass mein Header Menü 'mittig' ist. Es wird links gefloat und wenn ich es zentrieren will, steht alles untereinander anstatt nebeneinander. Nun ist meine Frage wie bekomm ich es hin dass die Elemente mittig ist und statt untereinander, nebeneinander stehen.


    Hier der CSS code:
    @charset 'UTF-8';
#menu ul,
#menu li,
#menu span,
#menu a {
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
#menu {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  font-weight: 600;
  height: 52px;
  width: auto;
}
#menu:after,
#menu ul:after {
  content: '';
  display: block;
  clear: both;
}
#menu a {
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  color: #666666;
  display: inline-block;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 52px;
  padding: 0 28px;
  text-decoration: none;
}
#menu ul {
  list-style: none;
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
}
#menu > ul {
  float: left;
}
#menu > ul > li {
  float: left;
}
#menu > ul > li:first-child a {
  border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
}
#menu > ul > li.active a,
#menu > ul > li:hover > a {
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
  color: white;
  background: -moz-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5662), color-stop(100%, #606f7f));
  background: -webkit-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -o-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: -ms-linear-gradient(top, #4a5662 0%, #606f7f 100%);
  background: linear-gradient(to bottom, #4a5662 0%, #606f7f 100%);
}
#menu .has-sub {
  z-index: 1;
}
#menu .has-sub:hover > ul {
  display: block;
}
#menu .has-sub ul {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menu .has-sub ul li a {
  background: #606f7f;
  border-bottom: 1px solid #59636f;
  border-bottom: 1px solid #556371;
  box-shadow: inset 0 1px 0 #606f7f;
  -moz-box-shadow: inset 0 1px 0 #606f7f;
  -webkit-box-shadow: inset 0 1px 0 #606f7f;
  color: white;
  display: block;
  line-height: 160%;
  padding: 15px 10px;
  font-size: 12px;
}
#menu .has-sub ul li:hover a {
  background: #4a5662;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}
#menu .has-sub .has-sub:hover > ul {
  display: block;
}
#menu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menu .has-sub .has-sub ul li a {
  background: #606f7f;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
#menu .has-sub .has-sub ul li a:hover {
  background: #4a5662;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.15);
}



    Hier der HTML code:
    <div id='menu'>
<ul align='center'>
   <li><a href='index.php'><span>Startseite</span></a></li>
   <li><a href=''><span>Register</span></a></li>
   <li><a href='login.php'><span>Login</span></a></li>
   <li class='has-sub'><a><span>Hilfe</span></a>
      <ul>
         <li class='has-sub'><a><span>Hilfe & Support</span></a>
            <ul>
               <li><a href='footer.php?support'><span>Support</span></a></li>
               <li class='last'><a href='footer.php?faq'><span>FAQ</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a><span>Rechtlichehinweise</span></a>
            <ul>
               <li><a href='footer.php?gtc'><span>AGB</span></a></li>
			   <li><a href='footer.php?privacy'><span>Datenschutz</span></a></li>
               <li class='last'><a href='footer.php?imprint'><span>Impressum</span></a></li>
            </ul>
         </li>
		 <li class='has-sub'><a href='footer.php?lang_select'><span>Sprache</span></a>
            <ul>
			
		 <li class='has-sub'><a><span>Europa</span></a>
            <ul>
               <li><a href='/de'><span>Deutsch</span></a></li>
               <li><a href='/en'><span>Englisch</span></a></li>
               <li><a href='/es'><span>Spanisch</span></a></li>		   
			   <li class='last'><a href='/fr'><span>Französisch</span></a></li>
            </ul>
         </li>
		 
		 <li class='has-sub'><a><span>Asien</span></a>
            <ul>
               <li><a href='/ru'><span>Russisch</span></a></li>
               <li class='last'><a href='/jp'><span>Japanisch</span></a></li>
            </ul>
         </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. ecollage

    Kostenloser Webspace von ecollage

    ecollage hat kostenlosen Webspace.

    1:43, 3.11.2013
    hmmm ... probiere doch mal [i]<ul style="text-align:center;">[/i] ... oder schon bei [i]<div ...>[/i] ... klappt nicht

    also ich habe da mal was gefunden ... probiere mal

    <div id='menu' style="position: absolute; right: 50%; left: 50%; margin-left: -425px;">

    mußt mal bei margin-left 'n bissel spielen ... ich weiß ja nicht, wie breit die Navi insgesamt ist

    //edit: so geht 's auch ... <div id='menu' style="width:430px;margin:0px auto;">... hier bei width eventuell noch 'n bissel spielen ... mußt mal schauen

    Test => http://ecollage.lima-city.de/help/test3.html

    Beitrag zuletzt geändert: 3.11.2013 2:43:46 von ecollage
  4. Autor dieses Themas

    senshi-network

    senshi-network hat kostenlosen Webspace.

    6:55, 3.11.2013
    ecollage schrieb:
    hmmm ... probiere doch mal [i]<ul style="text-align:center;">[/i] ... oder schon bei [i]<div ...>[/i] ... klappt nicht

    also ich habe da mal was gefunden ... probiere mal

    <div id='menu' style="position: absolute; right: 50%; left: 50%; margin-left: -425px;">

    mußt mal bei margin-left 'n bissel spielen ... ich weiß ja nicht, wie breit die Navi insgesamt ist

    //edit: so geht 's auch ... <div id='menu' style="width:430px;margin:0px auto;">... hier bei width eventuell noch 'n bissel spielen ... mußt mal schauen

    Test => http://ecollage.lima-city.de/help/test3.html


    Ist ja schön und gut aber damit verkleinerst du nur den Hintergrund. Aber ich will ja nur dass die Elemente mittig sind.

    Aber trotzdem danke! :wink:

    Beitrag zuletzt geändert: 3.11.2013 6:56:23 von senshi-network

  5. pcw

    pcw hat kostenlosen Webspace.

    10:57, 3.11.2013
    Guten Morgen:

    #menu > ul > li {
    /* float: left; */
    display: inline;
}


    ???

  6. ecollage

    Kostenloser Webspace von ecollage

    ecollage hat kostenlosen Webspace.

    11:21, 3.11.2013
    pcw schrieb:
    Guten Morgen:

    #menu > ul > li {
    /* float: left; */
    display: inline;
}


    ???


    genau der selbe Effekt (wie bei mir) ... das Problem ist, daß er diese (unterlegte) menu-box selbst (welche sich über die ganze Seite zieht), zum menu-Bestandteil macht (ul, li) ... ich habe diese menu-box faktisch mal in sich selbst zentriert und dann funzt es

    http://ecollage.lima-city.de/help/test4.html

    habe dabei im css-style id #menu {...} gleichsam definiert als id #menue {...} (somit #menu-box in #menue-box)

    das heißt: er müßte das umschreiben ... die menu-box selbst muß frei zum Zentrieren sein (ich hoffe, man versteht, was ich meine :wink: )

    Beitrag zuletzt geändert: 3.11.2013 11:42:46 von ecollage

  7. daswing

    Moderator Kostenloser Webspace von daswing

    daswing hat kostenlosen Webspace.

    11:42, 3.11.2013
    Hallöchen,

    das Problem scheint ja noch nicht gelöst zu sein.

    #menu {
    background: linear-gradient(to bottom, #F2EDEA 0%, #C0BEBF 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 5px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    height: 52px;
    margin: auto;
    width: 400px;
}


    Dieser Code löst auf eine einfache Art und Weise das Problem, schnell richtig und vorallem Code sparend.

    margin: auto;
    width: 400px;


    Du solltest aber echt mal deinen Code genauer ansehen, der ist zu gemüllt mit Anweisungen die man einfach überhaupt nicht benötigt und zum Teil sogar total sinnfrei sind. Ich vermute aber eher das du das Menü irgendwo her geklaut hast.

    Sei es drum, oben steht eine machbare Lösung.

    MfG daswing

  8. myvotes

    myvotes hat kostenlosen Webspace.

    11:55, 3.11.2013
    du solltest auch das über-geordnete Element als "zentriert" setzen,
    geht auch mit body ... und ich würde 
    margin: 0 auto;
    machen. 

    body { 
    background: #FFFFFF;
    text-align:center; 
}

#menu {
    background: #F2EDEA;
    height: 52px;
    margin: 0 auto;
    width: 400px;
}


    anstatt body nimmt man dafür auch oft ein DIV mit id="wrapper" .... also dann

    #wrapper{ text-align:center; }


    also egal wie, einfach das umgebende (äüßere) HTML-Element mit text-align:center;

    <div id="wrapper>

  <div id="menu">
    ... Navigation hier ... 
  </div>

  <div id="content">
     ... Inhalt hier ... 
  </div>

</div>


    der "Trick" ist also das umgebende (aüßere) Element mit 
    text-align:center;

    und den zu zentrierenden Block dann mit 
    margin: 0 auto;

    und mit einer (festen) Breite 
    width: 400px;
    zu machen (geht auch in %)

  9. ecollage

    Kostenloser Webspace von ecollage

    ecollage hat kostenlosen Webspace.

    11:56, 3.11.2013
    @daswing ... er will die Elemente mittig, nicht diese graue menu-Box (stellt im Grunde 'nen Header dar) :wink:

    also diese Box soll über die gesamte Seitenbreite gestreckt verbleiben, aber das Problem ist (siehe mein Kommentar über Deinen Post) ... er müßte erst einmal nur den Header definieren (der bleibt über die gesamte Seitenbreite gestreckt und benötigt faktisch den Gestaltungs-Style der menu-box) ... dann in den Header die menu-box reinzentrieren (mit verändertem Gestaltungs-Style, zumindstens den Teil raus, welcher schon im Header definiert ist)

    ... ich habe das gleich mal so gemacht

    #header {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  height: 52px;
  width: auto;
}
#menu {
  font-weight: 600;


    http://ecollage.lima-city.de/help/test5.html

    Beitrag zuletzt geändert: 3.11.2013 12:18:58 von ecollage

  10. myvotes

    myvotes hat kostenlosen Webspace.

    12:18, 3.11.2013
    ecollage schrieb:
    @daswing ... er will die Elemente mittig, nicht diese graue menu-Box


    #menu {
  text-align:center;
  ...
}


    ganz einfach ... wenn das wirklich so gewollt ist ... ;)

  11. ecollage

    Kostenloser Webspace von ecollage

    ecollage hat kostenlosen Webspace.

    12:20, 3.11.2013
    myvotes schrieb:
    ecollage schrieb:
    @daswing ... er will die Elemente mittig, nicht diese graue menu-Box


    #menu {
  text-align:center;
  ...
}


    ganz einfach ... wenn das wirklich so gewollt ist ... ;)


    funzt nicht ... haben wir alles schon durch ... es funzt nicht, weil er diese Box / diesen Header zugleich auch zum menu-Bestandteil macht (ul, li)

    nein, ich hab 's schon ... gerade gepostet

    Beitrag zuletzt geändert: 3.11.2013 12:29:41 von ecollage

  12. myvotes

    myvotes hat kostenlosen Webspace.

    12:31, 3.11.2013
    warum soll text-align:center; nicht funktionieren ?

    Welche Elemente will er denn innerhalb #menu zentrieren ?
    sind für diese Elemente (ul / li / p / ...) auch CSS-Eigenschaften definiert
    ... wenn ja, welche

    wenn er z.B. eine <ul> Liste innerhaln des #menu DIV macht
    und irgendwo als CSS definiert hat: 
    ul { text-align:left; }

    dann sind die Elemente innerhalb <ul> dann wieder nicht zentriert ... logisch


    EDIT

    das Problem liegt hier: 
    #menu > ul {
  float: left;
}
#menu > ul > li {
  float: left;
}


    Das ist die Lösung; 
    #menu > ul {
  margin: 0 auto; 
  width:400px;
  text-align:center; 
}
#menu > ul > li {
  float: left; 
  text-align:center; 
}


    das ul im #menu braucht eine deffinierte Breite und margin: 0 auto;
    und kein float: left; in ul !!!



    Beitrag zuletzt geändert: 3.11.2013 12:43:07 von myvotes

  13. ecollage

    Kostenloser Webspace von ecollage

    ecollage hat kostenlosen Webspace.

    12:49, 3.11.2013
    myvotes schrieb:

    EDIT
    ...

    Das ist die Lösung; 
    #menu > ul {
  margin: 0 auto; 
  width:400px;
  text-align:center; 
}
#menu > ul > li {
  float: left; 
  text-align:center; 
}


    das ul im #menu braucht eine deffinierte Breite und margin: 0 auto;
    und kein float: left; in ul !!!



    hmmm ... tja, wo er den Code wohl auch her hat ! - Aber Du hast recht ... das funzt ! :wink: ... Ich hatte bei #menu > ul (mit text-align:center;) dieses float: left; mit drin belassen und das funzte halt nicht

    Beitrag zuletzt geändert: 3.11.2013 12:57:25 von ecollage
  14. Autor dieses Themas

    senshi-network

    senshi-network hat kostenlosen Webspace.

    20:28, 3.11.2013
    Ok vielen dank an allen besonders an ecollage!

    Und ja der Script ist nicht von mir, er ist von cssmenumaker.com und nach meinen Erkenntnisweisen ist der Script nicht geklaut da der Script kostenlos anboten wird. Aber naja was soll man dazu sagen...

  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!