Navi Problem ;)


  • system32
  • 826 Aufrufe 5 Antworten

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

  • Navi Problem ;)

    Hey,


    Ich brauche dringend Hilfe bei HTML bzw. CSS und zwar bruach ich die navi von hier, in der Seite drin.


    Es wär nett wenn mir das jemand machen könnte weil ich nicht grad sehr viel Plan hab von CSS.

    So hier mal der Code von den Seiten. main.htm und style.css gehören zusammen.

    style.css

    PHP-Quellcode

    1. /* Main menu */
    3. ul.page{
    4. list-style:none;
    5. margin-left: 210px;
    6. width:140px;
    7. }
    8. ul.page li{
    9. display:inline;
    10. line-height:1.2em;
    11. width:140px;
    12. }
    13. ul.page li a{
    14. background-color:#f4f4f4;
    15. border-left:4px solid #cccccc;
    16. color:#505050;
    17. float:left;
    18. font-weight:bold;
    19. margin-bottom:5px;
    20. padding:5px 1px 5px 5px;
    21. text-decoration:none;
    22. width:130px;
    23. }
    24. ul.page li a:hover, ul.page li.current_page_item a{
    25. background-color:#eaeaea;
    26. border-left:4px solid #286ea0;
    27. color:#505050;
    28. }
    29. content
    30. {
    31. margin-left:120;
    32. width: 400px;
    33. heigth: 300px;
    34. }
    Alles anzeigen


    main.htm

    PHP-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">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <link rel="stylesheet" type="text/css" href="style1.css" />
    6. <title>Navi</title>
    7. </head>
    8. <body>
    9. <div align="center"><img src="logo.jpg"/>
    10. </div>
    12. <ul class="page">
    13. <li class="page_item current_page_item"> <a href="http://www.sg-kandern.de">Home</a></li>
    14. <li class="page_item"><a href="#" target="#content" title="DSL">DSL</a></li>
    15. <li class="page_item"><a href="#" target="#content" title="Computer">Computer</a></li>
    16. <li class="page_item"><a href="#" target="#content" title="Reperaturen">Reperaturen</a></li>
    17. <li class="page_item"><a href="#" target="#content" title="Webhosting">Webhosting</a></li>
    18. <li class="page_item"><a href="#" target="#content" title="Netzwerke">Netzwerke</a></li>
    19. <li class="page_item"><a href="#" target="#content" title="Ueber Uns">Über Uns</a></li>
    20. </ul>
    21. </div>
    22. </body>
    23. </html>
    Alles anzeigen


    main2.htm

    PHP-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">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <style type="text/css"><!--
    6. body
    7. {
    8. font-family:Verdana;
    9. font-size:1px;
    10. background-color:#eeeeee;
    11. text-align:center;
    12. margin:0px;
    13. }
    16. code {font-size:16px;color:#000;}
    17. pre
    18. {
    19. font-size:14px;
    20. color:#0000ff;
    21. padding:5px;
    22. }
    23. a:link, a:visited, a:active, a:hover
    24. {
    25. text-decoration:underline;
    26. font-weight:normal;
    27. color:#ff0000;
    28. font-size:12px;
    29. }
    30. a:active, a:hover
    31. {
    32. background-color:#eeeeee;
    33. border-left:4px solid #cccccc;
    34. color:#505050;
    35. }
    36. a.menu {
    37. display:block;
    38. padding:5px 1px 5px 5px;
    39. border-left:4px solid #cccccc;
    40. font-weight:bold;
    41. background-color:#eeeeee;
    42. text-align:center;
    43. color:#eeeeee;
    44. text-decoration:none;
    45. }
    46. a.menu:link, a.menu:visited
    47. {
    48. color:#eeeeee;
    49. background-color:#737994;
    50. text-decoration:none; font-weight:bold;
    51. }
    52. a.menu:active, a.menu:hover
    53. {
    54. color:#737994; font-weight:bold;
    55. background-color:#eeeeee;
    56. }
    58. #title {
    59. height:140px;
    60. padding:5px;
    61. background-color:#eeeeee;
    62. border-bottom:1px solid #000;
    63. }
    64. #left {
    65. background-color:#bdbec6;
    66. width:128px;
    67. float:left;
    68. }
    69. .menutitle{
    70. font-weight:bold;
    71. text-align:center;
    72. margin:2px;
    73. }
    74. .menucontainer {
    75. background-color:#eeeeee;
    76. width:106px;
    77. margin:10px;
    78. }
    79. #content {
    80. border:1px solid #efeff7;
    81. background-color:#efeff7;
    82. width:610px;
    83. float:right;
    84. padding:0px 10px;
    85. }
    86. //--></style>
    87. <title>You2Net</title>
    88. </head>
    89. <body>
    90. <div style="width:770px;height:650px;margin:0px auto;text-align:left;background-color:#bdbec6;border:1px solid #000000;">
    91. <div id="title">
    92. <img src="logo.jpg" />
    93. </div>
    95. <div id="left">
    96. <div class="menucontainer">
    97. <a class="menu" href="http://www.profiseller.de/shop1/mega/index.php3?shop=10&amp;ps_id=P10063736" target="_blank">DSL</a>
    98. <a class="menu" href="computer.htm" target="content">Computer</a>
    99. <a class="menu" href="reperatur.htm" target="content">Reperaturen</a>
    100. <a class="menu" href="http://www.profiseller.de/shop1/mega/index.php3?ps_id=P10063736&shop=1" target="_blank">Webhosting</a>
    101. <a class="menu" href="netzwerk.htm" target="content">Netzwerke</a>
    102. <a class="menu" href="overus.htm" target="content">&Uuml;ber Uns</a>
    103. </div>
    110. </div>
    112. <div id="content">
    113. <iframe src="home.htm" width="100%" height="490" name="content" scrolling="no" frameborder="0">
    114. <p align="center">&nbsp;</p>
    115. <p align="center">&nbsp;</p>
    116. <h2 style="margin-top:10px;"></h2>
    117. <p style="margin-top:10px;"></p>
    118. <p style="margin-top:10px;"></p>
    119. <p style="margin-top:10px;"></p>
    120. <p style="margin-top:10px;"></p>
    121. <p style="margin-top:10px;"></p>
    122. <p style="margin-top:10px;"></p>
    123. <p style="margin-top:10px;"></p>
    124. </div>
    125. <p><br style="clear:both;" />
    126. </p>
    127. </div>
    128. </body>
    129. </html>
    Alles anzeigen



    mfg system32

  • Das ganze könnte man(wenn man nur rein html verwenden möchte) mit Frames machen!

    Das würde dann so aussehen:

    Du müsstest eine index.html erstellen mit Worpad, Editor;

    Dort schreibst du dann:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Den Name deiner Seite!
    4. </title>
    5. <frameset>
    6. <frame src="main.htm" Noresize>
    7. <frame src="main2.htm" Name="content">
    8. </frameset>
    9. </head>
    10. </html>


    Hoffe ich konnte dir weiterhelfen!:D

    edit: Das würdest du aber auch auf der Selfhtml Homepage finden!:D


    Mfg Tigga!

    User helfen Usern: die FSB-Tutoren! (Zum Chat) mit den Tutoren

  • Nein ich will keine Frames. Die Positionierung etc is ja schon fertig mit CSS ich will eben nur die Navi von main.htm in main2.htm drin haben. Ich hab leider dafür zu wenig Ahnung von CSS.

    Es ist eigentlich nur der mouseover effekt und halt farben udn grössen änderungnen.

    mfg cheatkiller

  • hi bennen deine style.css mal in style1.css um oder ändern in main.htm folgende Zeile:
    [alt] <link rel="stylesheet" type="text/css" href="style1.css" />
    [neu] <link rel="stylesheet" type="text/css" href="style.css" />

    ps.: Andre Style-Ideen klauen is nich grad die feine englische...

    ´gruß
    [size=1][FONT="Courier New"]###############_###_####_
    #_ __ #___ _ _| |_(_)__(_)__ _ _ _###############new uploads: [1] [2] [3] [4] [5] [6] [7] [8]
    |#'##\/ _ \ '_|##_| / _| / _` | ' \
    |_|_|_\___/_|##\__|_\__|_\__,_|_||_|###############Bis 28. Sept. weg[/FONT][/size]