CSS-Menü zentrieren

      CSS-Menü zentrieren

      Hallo zusammen.

      Ich habe mir gerade ein kleines CSS-Menü gebastelt. Es gelingt mir aber ums Verrecken nicht, das Menü auf der Seite auf der es angezeigt werden soll zu zentrieren.

      Hier mal der CSS-Teil:

      Quellcode

      1. #navcontainer {
      2. margin: 10px 0 0 30px;
      3. padding: 0;
      4. height: 20px;
      5. text-align: center;
      6. }
      7. #navcontainer ul {
      8. border: 0;
      9. margin: 0 auto;
      10. padding: 0;
      11. list-style-type: none;
      12. text-align: center;
      13. }
      14. #navcontainer ul li {
      15. display: block;
      16. float: left;
      17. text-align: center;
      18. padding: 0;
      19. margin: 0;
      20. }
      21. #navcontainer ul li a {
      22. background: #fff;
      23. width: 100px;
      24. height: 20px;
      25. border-top: 1px solid #0845A9;
      26. border-left: 1px solid #0845A9;
      27. border-bottom: 1px solid #0845A9;
      28. border-right: 1px solid #0845A9;
      29. padding: 0;
      30. margin: 0 0 10px 0;
      31. color: #0845A9;
      32. text-decoration: none;
      33. display: block;
      34. text-align: center;
      35. font: normal 10px/18px Arial, Helvetica, sans-serif;
      36. }
      37. #navcontainer ul li a:hover {
      38. color: #FFFFFF;
      39. background: #0845A9;
      40. }
      41. #navcontainer a:active {
      42. color: #0845A9;
      43. background: #DFEEFF;
      44. }
      45. #navcontainer li#active a {
      46. color: #FFFFFF;
      47. background: #0845A9;
      48. border: 1px solid #0845A9;
      49. }


      Und hier der HTML-Teil:

      Quellcode

      1. <div id="navcontainer">
      2. <ul id="navlist">
      3. <li><a href="#">Link1</a></li>
      4. <li><a href="#">Link2</a></li>
      5. <li id="active"><a id="current" href="#">Link3</a></li>
      6. </ul>
      7. </div>
      Quis custodiet ipsos custodes?
    • CSS-Menü zentrieren

      Hallo DigitalAssasin,

      schau Dir mal Diesen Ratgeber an. Dort wirst du bestimmt fündig!
      hy


      versuchsmal so :

      .html

      <link rel="stylesheet" href="test2.css">

      <div id="navcontainer">
      <ul id="navlist">
      <li><a href="#">Link1</a></li>
      <li><a href="#">Link2</a></li>
      <li id="active"><a id="current" href="#">Link3</a></li>
      </ul>
      </div>


      .css


      #navcontainer ul li {
      display: block;
      float: center;
      text-align: center;
      padding: 0;
      margin: 0;


      aaaber hat noch einen kleinen fehler
      gieb mir noch ein bisschen zeit dann habe ich dass auch

      gruss
      habs.

      also du musst noch im css das aendern


      #navcontainer ul li a {
      background: #fff;
      width: 100px;
      height: 20px;
      border-top: 1px solid #0845A9;
      border-left: 1px solid #0845A9;
      border-bottom: 1px solid #0845A9;
      border-right: 1px solid #0845A9;
      padding: 0;
      margin: 10px 0;
      color: #0845A9;
      text-decoration: none;
      display: block;
      text-align: center;
      font: normal 10px/18px Arial, Helvetica, sans-serif;

      }



      gruss
      Der Tip hat leider net wirklich funktioniert. Macht aber nüscht, es hat sich mittlerweile ne andere Lösung gefunden.

      Danke trotzdem für die prompte Hilfe.
      Quis custodiet ipsos custodes?