Problem mit Navigation Menü per .css

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Problem mit Navigation Menü per .css

      Hallo Com,

      Ich arbeite derzeit an einer kleinen Homepage, leider bin ich kein HTML experte bzw
      ich kenne mich nicht so aus ich bin eher ein VB suchty :D.

      Nun zu meinem Problem!:

      Ich habe eine Navigation die per .css Datei eingestellt ist also mit Mousover Effekt oder
      so wie man das nennt aber ich bekomme die Navigation nicht "zentriert" naja es geht
      aber es sieht schrecklich aus.

      Screen 1:
      myimg.de - screen1f476a.gif

      Die HP war vorher "linksbündig" nun wollte ich diese "zentrieren" ich habe es
      geschafft mit der "Box" und auch mit dem menü aber das hat sich wie soll man
      das sagen hmm verzogen oder so!

      Screen 2:
      myimg.de - screen273c1d.jpg

      Also die Buttons sind irgendwie im eimer wie kann ich das beheben ?

      Hier noch der Inhalt aus der style.css:

      Quellcode

      1. html body {
      2. font-size: 8pt;
      3. font-family: verdana, arial, sans-serif;
      4. color: #00AEFF;
      5. background-color: #232323;
      6. }
      8. .title {
      9. font-weight: bold;
      10. color: #16577E;
      11. border-bottom: 1px dotted #16577E;
      12. }
      14. .status_red {
      15. color: #C71C00;
      16. }
      18. .status_yellow {
      19. color: #EFE700
      20. }
      22. .status_green {
      23. color: #5AEF00
      24. }
      26. .tableinborder {
      27. background-color: #16577E;
      28. }
      30. .tablea {
      31. background-color: #232323;
      32. }
      33. .tableb {
      34. background-color: #131313;
      35. }
      37. input, textarea {
      38. color: #16577E;
      39. background-color: #131313;
      40. border: 1px dotted #16577E;
      41. }
      43. A:link, A:visited {
      44. color: #00DEFF;
      45. text-decoration: none;
      46. }
      48. A:hover, A:active {
      49. color: #16577E;
      50. text-decoration: none;
      51. border-bottom: 1px dotted #16577E;
      52. }
      54. #alert {
      55. padding: 10px;
      56. border: 1px solid #16577E;
      57. background-color: #131313;
      58. text-align: center;
      59. margin: 10px;
      60. font-weight: bold;
      61. }
      63. #news {
      64. border: 1px solid #00AEFF;
      65. color: #00DEFF;
      66. padding: 5px;
      67. }
      69. #header {
      70. }
      72. #navconatainer ul{
      73. list-style-type: none;
      74. display: inline;
      75. margin: 0.4em; padding: 0;
      76. }
      78. #navcontainer li {
      79. display: inline;
      80. margin: 20px;
      81. }
      83. #navcontainer li a {
      84. display: center;
      85. float: center;
      86. background-image: url('images/button.jpg');
      87. padding: 4px 0 0 0;
      88. margin: 0 10px 0 0;
      89. width: 81px;
      90. height: 19px;
      91. color: #00AEFF;
      92. text-decoration: none;
      93. text-align: center;
      94. }
      96. #navcontainer li a:hover {
      97. background-image: url('images/button_hover.jpg');
      98. color: #000000;
      99. text-decoration: none;
      100. border: 0px;
      101. }
      103. #spacer {
      104. clear: both;
      105. }
      107. #content {
      108. position: relative;
      109. background-image: url('images/content.jpg');
      110. background-repeat: no-repeat;
      111. padding: 10px 0 5px 0;
      112. height: 500px;
      113. width: 530px;
      114. left: 30px;
      115. }
      117. #comment {
      118. background-color: #000000;
      119. border: 1px solid #A3A3A3;
      120. margin: 10px;
      121. padding: 2px;
      122. }
      Alles anzeigen


      Könnte bitte einer diesen Code ausbessern bzw so einstellen das es klappt
      oder mir erklären was ich ändern muss ich komme damit nicht so wirklich kla.

      Mfg Cifres

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Wie ich bereits geschrieben habe, habe ich kp von HTML bzw .CSS oder sonstwas,

      Hier die Codes

      Index.php

      HTML-Quellcode

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de" xml:lang="de">
      3. <head>
      4. <title>VB-Projekte</title>
      5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
      6. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
      7. <!--[if lte IE 7]>
      8. <link href="style_fix.css" rel="stylesheet" type="text/css" media="screen" />
      9. <![endif]-->
      10. <script language="JavaScript" type="text/javascript">
      11. <!--
      12. function divToggle(obj) {
      13. var objDiv = document.getElementById(obj).style;
      15. if(objDiv.display == "inline")
      16. objDiv.display = "none";
      17. else
      18. objDiv.display = "inline";
      19. }
      20. //-->
      21. </script>
      23. </head>
      25. <body>
      26. <div id="header"><img src="images/header_new.jpg" /></div>
      28. <div id="navcontainer">
      29. <ul id="navi">
      30. <li><a href="index.php">Home</a></li>
      31. <li><a href="project.php">Project</a></li>
      32. <li><a href="features.php">Features</a></li>
      33. <li><a href="status.php">Status</a></li>
      34. <li><a href="media.php">Media</a></li>
      35. <li><a href="guestbook.php">Gästebuch</a></li>
      36. </ul>
      37. </div>
      39. <div id="spacer"></div>
      41. <div id="content">
      42. <h2>.: Willkommen</h2>
      44. <p>Auf dieser Seite findest du alle Informationen zu meinem neuen Projekt.<br />
      45. Unter Project ist eine Beschreibung, was ich mir bisher so überlegt habe.<br />
      47. <div id="news"><b>News:</b><br />
      48. <!-- News Bereich--></div>
      49. </div>
      51. </body>
      52. </html>
      Alles anzeigen


      Style.css

      Quellcode

      1. html body {
      2. font-size: 8pt;
      3. font-family: verdana, arial, sans-serif;
      4. color: #00AEFF;
      5. background-color: #232323;
      6. }
      8. .title {
      9. font-weight: bold;
      10. color: #16577E;
      11. border-bottom: 1px dotted #16577E;
      12. }
      14. .status_red {
      15. color: #C71C00;
      16. }
      18. .status_yellow {
      19. color: #EFE700
      20. }
      22. .status_green {
      23. color: #5AEF00
      24. }
      26. .tableinborder {
      27. background-color: #16577E;
      28. }
      30. .tablea {
      31. background-color: #232323;
      32. }
      33. .tableb {
      34. background-color: #131313;
      35. }
      37. input, textarea {
      38. color: #16577E;
      39. background-color: #131313;
      40. border: 1px dotted #16577E;
      41. }
      43. A:link, A:visited {
      44. color: #00DEFF;
      45. text-decoration: none;
      46. }
      48. A:hover, A:active {
      49. color: #16577E;
      50. text-decoration: none;
      51. border-bottom: 1px dotted #16577E;
      52. }
      54. #alert {
      55. padding: 10px;
      56. border: 1px solid #16577E;
      57. background-color: #131313;
      58. text-align: center;
      59. margin: 10px;
      60. font-weight: bold;
      61. }
      63. #news {
      64. border: 1px solid #00AEFF;
      65. color: #00DEFF;
      66. padding: 5px;
      67. }
      69. #header {
      70. }
      72. #navconatainer ul{
      73. list-style-type: none;
      74. display: inline;
      75. margin: 0.4em; padding: 0;
      76. }
      78. #navcontainer li {
      79. display: inline;
      80. margin: 20px;
      81. }
      83. #navcontainer li a {
      84. display: center;
      85. float: center;
      86. background-image: url('images/button.jpg');
      87. padding: 4px 0 0 0;
      88. margin: 0 10px 0 0;
      89. width: 81px;
      90. height: 19px;
      91. color: #00AEFF;
      92. text-decoration: none;
      93. text-align: center;
      94. }
      96. #navcontainer li a:hover {
      97. background-image: url('images/button_hover.jpg');
      98. color: #000000;
      99. text-decoration: none;
      100. border: 0px;
      101. }
      103. #spacer {
      104. clear: both;
      105. }
      107. #content {
      108. position: relative;
      109. background-image: url('images/content.jpg');
      110. background-repeat: no-repeat;
      111. padding: 10px 0 5px 0;
      112. height: 500px;
      113. width: 530px;
      114. left: 30px;
      115. }
      117. #comment {
      118. background-color: #000000;
      119. border: 1px solid #A3A3A3;
      120. margin: 10px;
      121. padding: 2px;
      122. }
      Alles anzeigen


      Könnte einer die Inhalte so anpassen das es funktioniert ?

    • Quellcode

      1. html body {
      2. font-size: 8pt;
      3. font-family: verdana, arial, sans-serif;
      4. color: #00AEFF;
      5. background-color: #232323;
      6. }
      8. .title {
      9. font-weight: bold;
      10. color: #16577E;
      11. border-bottom: 1px dotted #16577E;
      12. }
      14. .status_red {
      15. color: #C71C00;
      16. }
      18. .status_yellow {
      19. color: #EFE700
      20. }
      22. .status_green {
      23. color: #5AEF00
      24. }
      26. .tableinborder {
      27. background-color: #16577E;
      28. }
      30. .tablea {
      31. background-color: #232323;
      32. }
      33. .tableb {
      34. background-color: #131313;
      35. }
      37. input, textarea {
      38. color: #16577E;
      39. background-color: #131313;
      40. border: 1px dotted #16577E;
      41. }
      43. A:link, A:visited {
      44. color: #00DEFF;
      45. text-decoration: none;
      46. }
      48. A:hover, A:active {
      49. color: #16577E;
      50. text-decoration: none;
      51. border-bottom: 1px dotted #16577E;
      52. }
      54. #alert {
      55. padding: 10px;
      56. border: 1px solid #16577E;
      57. background-color: #131313;
      58. text-align: center;
      59. margin: 10px;
      60. font-weight: bold;
      61. }
      63. #news {
      64. border: 1px solid #00AEFF;
      65. color: #00DEFF;
      66. padding: 5px;
      67. }
      69. #header {
      70. }
      72. #navi {
      73. float: center;
      74. }
      76. #navconatainer ul{
      77. list-style-type: none;
      78. display: inline;
      79. margin: 0.4em; padding: 0;
      80. }
      82. #navcontainer li {
      83. display: inline;
      84. margin: 20px;
      85. }
      87. #navcontainer li a {
      88. display: center;
      89. float: center;
      90. background-image: url('images/button.jpg');
      91. padding: 4px 0 0 0;
      92. margin: 0 10px 0 0;
      93. width: 81px;
      94. height: 19px;
      95. color: #00AEFF;
      96. text-decoration: none;
      97. text-align: center;
      98. }
      100. #navcontainer li a:hover {
      101. background-image: url('images/button_hover.jpg');
      102. color: #000000;
      103. text-decoration: none;
      104. border: 0px;
      105. }
      107. #spacer {
      108. clear: both;
      109. }
      111. #content {
      112. position: relative;
      113. background-image: url('images/content.jpg');
      114. background-repeat: no-repeat;
      115. padding: 10px 0 5px 0;
      116. height: 500px;
      117. width: 530px;
      118. left: 30px;
      119. }
      121. #comment {
      122. background-color: #000000;
      123. border: 1px solid #A3A3A3;
      124. margin: 10px;
      125. padding: 2px;
      126. }
      Alles anzeigen


      So sollte es gehen.

    • html body {
      font-size: 8pt;
      font-family: verdana, arial, sans-serif;
      color: #00AEFF;
      background-color: #232323;
      }

      .title {
      font-weight: bold;
      color: #16577E;
      border-bottom: 1px dotted #16577E;
      }

      .status_red {
      color: #C71C00;
      }

      .status_yellow {
      color: #EFE700
      }

      .status_green {
      color: #5AEF00
      }

      .tableinborder {
      background-color: #16577E;
      }

      .tablea {
      background-color: #232323;
      }
      .tableb {
      background-color: #131313;
      }

      input, textarea {
      color: #16577E;
      background-color: #131313;
      border: 1px dotted #16577E;
      }

      A:link, A:visited {
      color: #00DEFF;
      text-decoration: none;
      }

      A:hover, A:active {
      color: #16577E;
      text-decoration: none;
      border-bottom: 1px dotted #16577E;
      }

      #alert {
      padding: 10px;
      border: 1px solid #16577E;
      background-color: #131313;
      text-align: center;
      margin: 10px;
      font-weight: bold;
      }

      #news {
      border: 1px solid #00AEFF;
      color: #00DEFF;
      padding: 5px;
      }

      #header {
      }

      #navi {
      margin: auto;
      }

      #navconatainer ul{
      list-style-type: none;
      display: inline;
      margin: 0.4em; padding: 0;
      }

      #navcontainer li {
      display: inline;
      margin: 20px;
      }

      #navcontainer li a {
      display: center;
      float: center;
      background-image: url('images/button.jpg');
      padding: 4px 0 0 0;
      margin: 0 10px 0 0;
      width: 81px;
      height: 19px;
      color: #00AEFF;
      text-decoration: none;
      text-align: center;
      }

      #navcontainer li a:hover {
      background-image: url('images/button_hover.jpg');
      color: #000000;
      text-decoration: none;
      border: 0px;
      }

      #spacer {
      clear: both;
      }

      #content {
      position: relative;
      background-image: url('images/content.jpg');
      background-repeat: no-repeat;
      padding: 10px 0 5px 0;
      height: 500px;
      width: 530px;
      left: 30px;
      }

      #comment {
      background-color: #000000;
      border: 1px solid #A3A3A3;
      margin: 10px;
      padding: 2px;
      }


      html body {
      font-size: 8pt;
      font-family: verdana, arial, sans-serif;
      color: #00AEFF;
      background-color: #232323;
      }

      .title {
      font-weight: bold;
      color: #16577E;
      border-bottom: 1px dotted #16577E;
      }

      .status_red {
      color: #C71C00;
      }

      .status_yellow {
      color: #EFE700
      }

      .status_green {
      color: #5AEF00
      }

      .tableinborder {
      background-color: #16577E;
      }

      .tablea {
      background-color: #232323;
      }
      .tableb {
      background-color: #131313;
      }

      input, textarea {
      color: #16577E;
      background-color: #131313;
      border: 1px dotted #16577E;
      }

      A:link, A:visited {
      color: #00DEFF;
      text-decoration: none;
      }

      A:hover, A:active {
      color: #16577E;
      text-decoration: none;
      border-bottom: 1px dotted #16577E;
      }

      #alert {
      padding: 10px;
      border: 1px solid #16577E;
      background-color: #131313;
      text-align: center;
      margin: 10px;
      font-weight: bold;
      }

      #news {
      border: 1px solid #00AEFF;
      color: #00DEFF;
      padding: 5px;
      }

      #header {
      }

      #navi {
      text-align: center;
      }

      #navconatainer ul{
      list-style-type: none;
      display: inline;
      margin: 0.4em; padding: 0;
      }

      #navcontainer li {
      display: inline;
      margin: 20px;
      }

      #navcontainer li a {
      display: center;
      float: center;
      background-image: url('images/button.jpg');
      padding: 4px 0 0 0;
      margin: 0 10px 0 0;
      width: 81px;
      height: 19px;
      color: #00AEFF;
      text-decoration: none;
      text-align: center;
      }

      #navcontainer li a:hover {
      background-image: url('images/button_hover.jpg');
      color: #000000;
      text-decoration: none;
      border: 0px;
      }

      #spacer {
      clear: both;
      }

      #content {
      position: relative;
      background-image: url('images/content.jpg');
      background-repeat: no-repeat;
      padding: 10px 0 5px 0;
      height: 500px;
      width: 530px;
      left: 30px;
      }

      #comment {
      background-color: #000000;
      border: 1px solid #A3A3A3;
      margin: 10px;
      padding: 2px;
      }


      Von den eins? Ich bin selber noch kein Profi.

    • So und wenn du immer noch behauptest das es nicht geht, dann solltest du echt mal deine Kompetenz überprüfen.
      Dies war eine Arbeit von nicht einmal 5 Minuten.

      Desweiteren solltest du dich dringend mit CSS und (x)HTML befassen. float: center; ist mir neu und ich denke der restlichen CSS Welt ebenso.

      Aber um nicht weiter zu quatschen hier der fertige Code schön serviert auf dem Silbertablett navi_problem.rar. Und nun lass uns damit bitte in Ruhe.

    • ulle;227773 schrieb:

      So und wenn du immer noch behauptest das es nicht geht, dann solltest du echt mal deine Kompetenz überprüfen.
      Dies war eine Arbeit von nicht einmal 5 Minuten.

      Desweiteren solltest du dich dringend mit CSS und (x)HTML befassen. float: center; ist mir neu und ich denke der restlichen CSS Welt ebenso.

      Aber um nicht weiter zu quatschen hier der fertige Code schön serviert auf dem Silbertablett navi_problem.rar. Und nun lass uns damit bitte in Ruhe.


      Hugh der meister hat gesprochen :)
      Das float war mir zwar auch neu aber wollt nicht zuviel editieren das sein code bestehn bleibt usw^^

      Werd mir auchmal ansehn was die lösung ist (theor könnte man auch alles via einem wrapper div zentrieren?).

      @Te: Am besten du "codest" gerade am anfang NICHT mit Notepad! Webocton Scriply ist ein SEHR gutes anfängerprogramm :D (habe ich selbst genutzt)

      Greetings