Anzeige

Problem mit Navi

Problem mit Navi | PSD-Tutorials.de

Erstellt von mather, 28.08.2008.

  1. mather

    mather Noch nicht viel geschrieben

    Dabei seit:
    21.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Problem mit Navi
    Hallo,
    das ist mein Quellcoide:
    Code (Text):
    1. <html>
    2. <head>
    3. <title>hp1</title>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    5.  
    6. <style type="text/css">
    7.  
    8. body {
    9.     font-family: arial, helvetica, serif;
    10.     font-size: 80%;
    11.     background: black url(iages/ddbg3.gif) no-repeat 6000px 6000px;
    12.     padding-left: 10em;
    13.     padding-top: 4em;
    14.     margin: 0;
    15. }
    16.  
    17. #content {
    18.     width: 34em;
    19.     background-color: black;
    20.     padding: 3em 0;
    21.     border: 6px double white;
    22.     margin: auto;
    23.     voice-family: "\"}\"";
    24.     voice-family:inherit;
    25.     width: 32em;
    26. }
    27. html>body #content {
    28.     width: 32em;
    29. }
    30.  
    31. a {
    32.     text-decoration: none;
    33. }
    34.  
    35. a:link {
    36.     color: red;
    37. }
    38.  
    39. a:visited {
    40.     color: blue;
    41. }
    42.  
    43. a:active {
    44.     color: green;
    45. }
    46.  
    47. a:hover {
    48.     text-decoration: underline;
    49. }
    50.  
    51. h1 {
    52.     text-align: center;
    53.     padding: 0 0 0.25em 0;
    54.     margin: 0;
    55. }
    56.  
    57. ul {
    58.     list-style: none;
    59.     padding: 0;
    60.     margin: 0;
    61. }
    62.  
    63. #nav a {
    64.     font-weight: bold;
    65.     color: green;
    66. }
    67.  
    68. #nav a {
    69.     text-decoration: none;
    70. }
    71.  
    72. #nav li li a {
    73.     display: block;
    74.     font-weight: normal;
    75.     color: red;
    76.     padding: 0.2em 10px;
    77. }
    78.  
    79. #nav li li a:hover {
    80.     padding: 0.2em 5px;
    81.     border: 5px solid red;
    82.     border-width: 0 5px;
    83. }
    84.  
    85. li {
    86.     float: left;
    87.     position: relative;
    88.     width: 10em;
    89.     text-align: center;
    90.     cursor: default;
    91.     background-color: black;
    92.    
    93. }
    94.  
    95. li#first {
    96.     border-left-width: 3em;
    97. }
    98.  
    99. li#last {
    100.     border-right-width: 1em;
    101. }
    102.  
    103. li ul {
    104.     display: none;
    105.     position: center;
    106.     top: 100%;
    107.     left: 50;
    108.  
    109.     font-weight: normal;
    110.     background: url(images/ddbg3.gif) bottom left no-repeat;
    111.     padding: 0.5em 0 1em 0;
    112.     border-right: solid 1px green;
    113. }
    114.  
    115. li>ul {
    116.     top: auto;
    117.     left: auto;
    118. }
    119.  
    120. li li {
    121.     display: block;
    122.     float: none;
    123.     background-color: transparent;
    124.     border: 0;
    125. }
    126.  
    127. li:hover ul, li.over ul {
    128.     display: block;
    129. }
    130.  
    131. hr {
    132.     display: none;
    133. }
    134.  
    135. p {
    136.     clear: left;
    137.     background: url(images/remora.gif) center left no-repeat;
    138.     padding: 1em 1em 0 1em;
    139.     margin: 1;
    140. }
    141.  
    142. p.image {
    143.     float: right;
    144.     font-size: 0.8em;
    145.     text-align: center;
    146.     color: white;
    147.     padding: 1.25em 1.25em 0.25em 0.25em;
    148. }
    149.  
    150. p.image img {
    151.     display: block;
    152.     border: 1px solid white;
    153. }
    154.  
    155. </style>
    156.  
    157. <script type="text/javascript"><!--//--><![CDATA[//><!--
    158.  
    159. startList = function() {
    160.     if (document.all&&document.getElementById) {
    161.         navRoot = document.getElementById("nav");
    162.         for (i=0; i<navRoot.childNodes.length; i++) {
    163.             node = navRoot.childNodes[i];
    164.             if (node.nodeName=="LI") {
    165.                 node.onmouseover=function() {
    166.                     this.className+=" over";
    167.                 }
    168.                 node.onmouseout=function() {
    169.                     this.className=this.className.replace(" over", "");
    170.                 }
    171.             }
    172.         }
    173.     }
    174. }
    175. window.onload=startList;
    176.  
    177. //--><!]]></script>
    178.  
    179.  
    180. </head>
    181. <body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    182. <!-- ImageReady Slices (hp1.psd) -->
    183. <div align="center" valign="middle">
    184. <img src="Bilder/hp1.gif" width="900" height="444" alt="" align="center">
    185. <!-- End ImageReady Slices -->
    186. <br>
    187. </div>
    188.  
    189. <table margin-left="600px">
    190. <tr>
    191. <td margin-left="600px">
    192. <hr />
    193.  
    194. <ul id="nav">
    195.  
    196. <li>
    197.         <div><a href=""><img src="Bilder/hp_10.gif"></a></div>
    198. <ul>
    199.             <li><a href="">News</a></li>
    200.             <li><a href="">Termine</a></li>
    201.             <li><a href="">Blog</a></li>
    202.        
    203. </ul>
    204. </li>
    205. <li >
    206.  
    207.         <div align="middle"><a href=""><img src="Bilder/hp_12.gif"></a></div>
    208. <ul>
    209.             <li><a href="">Ceylonese remora</a></li>
    210.             <li><a href="">Remora remora</a></li>
    211.             <li><a href="">Sharksucker</a></li>
    212.             <li><a href="">Slender remora</a></li>
    213.             <li><a href="">Spearfish remora</a></li>
    214.             <li><a href="">Whitefin sharksucker</a></li>
    215. </ul>
    216. </li>
    217. <li >
    218.         <div><a href=""><img src="Bilder/hp_14.gif"></a></div>
    219. <ul>
    220.             <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    221.             <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    222.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    223.             <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    224.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    225.             <li><a href="http://www.nocomment-fanclub.de"</a></li>
    226.  
    227. </ul>
    228. </li>
    229. <li >
    230.         <div align="center"><a href=""><img src="Bilder/hp_16.gif"></a></div>
    231. <ul>
    232.             <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    233.             <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    234.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    235.             <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    236.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    237.             <li><a href="http://www.nocomment-fanclub.de"</a></li>
    238.  
    239. </ul>
    240. </li>
    241. <li >
    242.         <div align="center"><a href=""><img src="Bilder/hp_18.gif"></a></div>
    243.         <ul>
    244.             <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    245.             <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    246.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    247.             <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    248.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    249.             <li><a href="http://www.nocomment-fanclub.de"</a></li>
    250.  
    251.         </ul>
    252. </li>
    253.  
    254. <li>
    255.         <div align="center"><a href=""><img src="Bilder/hp_20.gif"></a></div>
    256. <ul>
    257.             <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    258.             <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    259.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    260.             <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    261.             <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    262.             <li><a href="http://www.nocomment-fanclub.de"</a></li>
    263.  
    264. </ul>
    265. </li>
    266.    
    267. </td></tr></table>
    268. <hr />
    269.  
    270. </body>
    271. </html>
    wo gebe ich jetzt bitte an, das die navi noch ein paar zentimeter nach rechts muss, so dass sie genau unter dem ersten bild wäre und wie bekomme ich die lücke zwiuschen Band und community weg?

    Die Seite

    Danke schonmal
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Problem mit Navi
    AW: Problem mit Navi

    Das ist nun ganz schweirig.
    Einerseits gibts eine Menge css, andererseits eine Tabellenkonstruktion, in der das gutgemeinte zu einer fragwürdigen Landung kommt.
    Code (Text):
    1.  
    2. <body bgcolor="black" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    3.  
    schon reichlich überholt und hat in einer seite, wo der body schon mit css formatiert ist gar nichts zu suchen.
    die Seite hat keinen Doctype. Ohne das lassen sich auch kaum Aussagen machen.

    Vorschlag: auf veraltetes Markup verzeichten, rein mit (X)HTML/css schreiben, Doctype angeben!

    dann kann man Aussagen machen, warum was wie aussieht (obwohl es dann vielleicht auch nicht mehr nötig ist, weil alles passt...)

    die Lücke zwischen Band und Community??
     
    #2      
  3. mather

    mather Noch nicht viel geschrieben

    Dabei seit:
    21.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    hmm...aber für das dropdown halt ein vorgefertiges benutzt, hatte hier ja nets gefunden und bei google auch net sanderes gutes
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    Ich habe mal versucht deinen Quelltext general zu überholen:

    • unnötige Style-Definitionen rausgenommen
    • unnötige HTML-Tags rausgenommen
    • Tabelle entfernt
    • Fehlerhaften Link zum BG-Image
    • Doctype eingefügt

    Ich hoffe jetzt kann man mit der Seite besser arbeiten:

    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <title>hp1</title>
    3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    4.  
    5. <style type="text/css">
    6.  
    7. body {
    8.     font-family: arial, helvetica, serif;
    9.     font-size: 80%;
    10.     background: black;
    11.     text-align: center;
    12. }
    13.  
    14. #mittig {
    15.     width: 900px;
    16.     margin-top: 80px;
    17.     margin-left: auto;
    18.     margin-right: auto;
    19.     align: center;
    20. }
    21.  
    22. a {
    23.     text-decoration: none;
    24. }
    25.  
    26. a:link {
    27.     color: red;
    28. }
    29.  
    30. a:visited {
    31.     color: blue;
    32. }
    33.  
    34. a:active {
    35.     color: green;
    36. }
    37.  
    38. a:hover {
    39.     text-decoration: underline;
    40. }
    41.  
    42. ul {
    43.     list-style: none;
    44.     padding: 0;
    45.     margin: 0;
    46. }
    47.  
    48. #nav {
    49.     margin-left: 30px;
    50. }
    51.  
    52. #nav a {
    53.     font-weight: bold;
    54.     color: green;
    55.     text-decoration: none;
    56. }
    57.  
    58. #nav li li a {
    59.     display: block;
    60.     font-weight: normal;
    61.     color: red;
    62.     padding: 0.2em 10px;
    63. }
    64.  
    65. #nav li li a:hover {
    66.     padding: 0.2em 5px;
    67.     border: 5px solid red;
    68.     border-width: 0 5px;
    69. }
    70.  
    71. li {
    72.     float: left;
    73.     position: relative;
    74.     width: 10em;
    75.     text-align: center;
    76.     cursor: default;
    77.     background-color: black;
    78. }
    79.  
    80. li#first {
    81.     border-left-width: 3em;
    82. }
    83.  
    84. li#last {
    85.     border-right-width: 1em;
    86. }
    87.  
    88. li ul {
    89.     display: none;
    90.     position: center;
    91.     top: 100%;
    92.     left: 50;
    93.     font-weight: normal;
    94.     background: url(images/ddbg3.gif) bottom left no-repeat;
    95.     padding: 0.5em 0 1em 0;
    96.     border-right: solid 1px green;
    97. }
    98.  
    99. li>ul {
    100.     top: auto;
    101.     left: auto;
    102. }
    103.  
    104. li li {
    105.     display: block;
    106.     float: none;
    107.     background-color: transparent;
    108.     border: 0;
    109. }
    110.  
    111. li:hover ul, li.over ul {
    112.     display: block;
    113. }
    114.  
    115.  
    116. <script type="text/javascript">
    117. <![CDATA[//><!--
    118.  
    119. startList = function() {
    120.    if (document.all&&document.getElementById) {
    121.        navRoot = document.getElementById("nav");
    122.        for (i=0; i<navRoot.childNodes.length; i++) {
    123.            node = navRoot.childNodes[i];
    124.            if (node.nodeName=="LI") {
    125.                node.onmouseover=function() {
    126.                    this.className+=" over";
    127.                }
    128.                node.onmouseout=function() {
    129.                    this.className=this.className.replace(" over", "");
    130.                }
    131.            }
    132.        }
    133.    }
    134. }
    135. window.onload=startList;
    136.  
    137. //--><!]]>
    138.  
    139. </head>
    140. <div id="mittig">
    141.     <img src="Bilder/hp1.gif" width="900" height="444" alt="">
    142.     <ul id="nav">
    143.         <li>
    144.             <div><a href=""><img src="Bilder/hp_10.gif"></a></div>
    145.             <ul>
    146.                 <li><a href="">News</a></li>
    147.                 <li><a href="">Termine</a></li>
    148.                 <li><a href="">Blog</a></li>
    149.             </ul>
    150.         </li>
    151.         <li>
    152.             <div><a href=""><img src="Bilder/hp_12.gif"></a></div>
    153.             <ul>
    154.                 <li><a href="">Ceylonese remora</a></li>
    155.                 <li><a href="">Remora remora</a></li>
    156.                 <li><a href="">Sharksucker</a></li>
    157.                 <li><a href="">Slender remora</a></li>
    158.                 <li><a href="">Spearfish remora</a></li>
    159.                 <li><a href="">Whitefin sharksucker</a></li>
    160.             </ul>
    161.         </li>
    162.         <li>
    163.             <div><a href=""><img src="Bilder/hp_14.gif"></a></div>
    164.             <ul>
    165.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    166.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    167.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    168.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    169.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    170.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    171.             </ul>
    172.         </li>
    173.         <li>
    174.             <div><a href=""><img src="Bilder/hp_16.gif"></a></div>
    175.             <ul>
    176.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    177.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    178.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    179.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    180.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    181.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    182.             </ul>
    183.         </li>
    184.         <li>
    185.             <div><a href=""><img src="Bilder/hp_18.gif"></a></div>
    186.             <ul>
    187.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    188.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    189.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    190.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    191.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    192.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    193.             </ul>
    194.         </li>
    195.         <li>
    196.             <div><a href=""><img src="Bilder/hp_20.gif"></a></div>
    197.             <ul>
    198.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    199.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    200.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    201.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    202.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    203.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    204.             </ul>
    205.         </li>
    206.     </ul>
    207. </div>
    208. </html>
    Ein Problem gibt es aber noch, der FF 2 schneidet einige der Menubuttons ab... Der IE 6 stellt es korrekt dar... Hab noch keine Ahnung woran das liegt, habe mich aber auch noch nicht durch die Navigations-CSS-Definition gekämpft...

    Und bitte, und damit möchte ich dich nicht beleidigen, arbeite dich erst tiefer in html und css bevor du weiter machts...
     
    Zuletzt bearbeitet: 30.08.2008
    #4      
  5. greg5891

    greg5891 Guest

    Problem mit Navi
    AW: Problem mit Navi

    dafür habe ich eine erklärung.
    die unterschiedliche Darstellung Menüpunkte liegt an den list- elementen.
    Da der IE, Oper und FF den Einzug der zugeordneten Texte unterschiedlich interpretieren.
    Ich habe für so etwas einfach noch ein zweites CSS- sheet erstellt und dann eben mit einer Browserweiche die Homepage den jeweiligen Browsern zugeteilt.

    mfg
    greg
     
    #5      
  6. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    Würdest du uns denn mal mitteilen was genau anders interperetiert wird?
     
    #6      
  7. mather

    mather Noch nicht viel geschrieben

    Dabei seit:
    21.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    danke schonmal,echt super von euch
    aber wie bekomme ich es hin, dass mein text auf der rechteh seite der mauer (des Bildes hp1) erscheind?
     
    #7      
  8. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    Indem du das Bild als Hintergrund eines <div> definierst und darin ein weiteres <div> mit fest definierter größe und dem gewünschten Inhalt anlegst...
     
    #8      
  9. mather

    mather Noch nicht viel geschrieben

    Dabei seit:
    21.07.2007
    Beiträge:
    35
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html>
    3. <head>
    4. <title>hp1</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    6.  
    7. <style type="text/css">
    8.  
    9. body {
    10.     font-family: arial, helvetica, serif;
    11.     font-size: 80%;
    12.     background: black;
    13.     text-align: center;
    14. }
    15.  
    16. #mittig {
    17.     width: 900px;
    18.     margin-top: 50px;
    19.     margin-left: auto;
    20.     margin-right: auto;
    21.     align: center;
    22. }
    23.  
    24. a {
    25.     text-decoration: none;
    26. }
    27.  
    28. a:link {
    29.     color: red;
    30. }
    31.  
    32. a:visited {
    33.     color: blue;
    34. }
    35.  
    36. a:active {
    37.     color: green;
    38. }
    39.  
    40. a:hover {
    41.     text-decoration: underline;
    42. }
    43.  
    44. ul {
    45.     list-style: none;
    46.     padding: 0;
    47.     margin: 0;
    48. }
    49.  
    50. #nav {
    51.     margin-left: 30px;
    52. }
    53.  
    54. #nav a {
    55.     font-weight: bold;
    56.     color: green;
    57.     text-decoration: none;
    58. }
    59.  
    60. #nav li li a {
    61.     display: block;
    62.     font-weight: normal;
    63.     color: red;
    64.     padding: 0.2em 10px;
    65. }
    66.  
    67. #nav li li a:hover {
    68.     padding: 0.2em 5px;
    69.     border: 5px solid red;
    70.     border-width: 0 5px;
    71. }
    72.  
    73. li {
    74.     float: left;
    75.     position: relative;
    76.     width: 10em;
    77.     text-align: center;
    78.     cursor: default;
    79.     background-color: black;
    80. }
    81.  
    82. li#first {
    83.     border-left-width: 3em;
    84. }
    85.  
    86. li#last {
    87.     border-right-width: 1em;
    88. }
    89.  
    90. li ul {
    91.     display: none;
    92.     position: center;
    93.     top: 100%;
    94.     left: 50;
    95.     font-weight: normal;
    96.     background: url(images/ddbg3.gif) bottom left no-repeat;
    97.     padding: 0.5em 0 1em 0;
    98.     border-right: solid 1px green;
    99. }
    100.  
    101. li>ul {
    102.     top: auto;
    103.     left: auto;
    104. }
    105.  
    106. li li {
    107.     display: block;
    108.     float: none;
    109.     background-color: transparent;
    110.     border: 0;
    111. }
    112.  
    113. li:hover ul, li.over ul {
    114.     display: block;
    115. }
    116.  
    117. div.bg {
    118. background-image: url(Bilder/hp1.gif);
    119. background-color:black;
    120. height:420px;
    121. border:0px solid black;
    122. }
    123.  
    124. box{
    125. position: relative; width: 100px
    126.  padding-left: 120px;
    127. }
    128. </style>
    129.  
    130. <script type="text/javascript">
    131. <![CDATA[//><!--
    132.  
    133. startList = function() {
    134.     if (document.all&&document.getElementById) {
    135.         navRoot = document.getElementById("nav");
    136.         for (i=0; i<navRoot.childNodes.length; i++) {
    137.             node = navRoot.childNodes[i];
    138.             if (node.nodeName=="LI") {
    139.                 node.onmouseover=function() {
    140.                     this.className+=" over";
    141.                 }
    142.                 node.onmouseout=function() {
    143.                     this.className=this.className.replace(" over", "");
    144.                 }
    145.             }
    146.         }
    147.     }
    148. }
    149. window.onload=startList;
    150.  
    151. //--><!]]>
    152. </script>
    153.  
    154. </head>
    155. <body>
    156. <div class="bg" id="mittig">
    157. <br>
    158. <br>
    159. <div class="box">Hi du sau du</div>
    160. <br>
    161. <br>
    162. <br>
    163. <br>
    164. <br>
    165. <br>
    166. <br>
    167. <br>
    168. <br>
    169. <br>
    170. <br>
    171. <br>
    172. <br>
    173. <br>
    174. <br>
    175. <br>
    176. <br>
    177. <br>
    178. <br>
    179. <br>
    180. <br>
    181.     <ul id="nav">
    182.         <li>
    183.             <div><a href=""><img src="Bilder/hp_10.gif"></a></div>
    184.             <ul>
    185.                 <li><a href="">News</a></li>
    186.                 <li><a href="">Termine</a></li>
    187.                 <li><a href="">Blog</a></li>
    188.             </ul>
    189.         </li>
    190.         <li>
    191.             <div><a href=""><img src="Bilder/hp_12.gif"></a></div>
    192.             <ul>
    193.                 <li><a href="">Ceylonese remora</a></li>
    194.                 <li><a href="">Remora remora</a></li>
    195.                 <li><a href="">Sharksucker</a></li>
    196.                 <li><a href="">Slender remora</a></li>
    197.                 <li><a href="">Spearfish remora</a></li>
    198.                 <li><a href="">Whitefin sharksucker</a></li>
    199.             </ul>
    200.         </li>
    201.         <li>
    202.             <div><a href=""><img src="Bilder/hp_14.gif"></a></div>
    203.             <ul>
    204.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    205.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    206.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    207.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    208.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    209.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    210.             </ul>
    211.         </li>
    212.         <li>
    213.             <div><a href=""><img src="Bilder/hp_16.gif"></a></div>
    214.             <ul>
    215.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    216.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    217.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    218.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    219.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    220.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    221.             </ul>
    222.         </li>
    223.         <li>
    224.             <div><a href=""><img src="Bilder/hp_18.gif"></a></div>
    225.             <ul>
    226.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    227.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    228.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    229.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    230.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    231.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    232.             </ul>
    233.         </li>
    234.         <li>
    235.             <div><a href=""><img src="Bilder/hp_20.gif"></a></div>
    236.             <ul>
    237.                 <li><a href="http://www.nocomment-fanclub.de">1</a></li>
    238.                 <li><a href="http://www.nocomment-fanclub.de">2</a></li>
    239.                 <li><a href="http://www.nocomment-fanclub.de">3</a></li>
    240.                 <li><img src="Bilder/hp_20.gif" width="100" height="35" alt="Remora" /></li>
    241.                 <li><a href="http://www.nocomment-fanclub.de">4</a></li>
    242.                 <li><a href="http://www.nocomment-fanclub.de">5</a></li>
    243.             </ul>
    244.         </li>
    245.     </ul>
    246. </div>
    247. </html>
    Wie bkomme ich hin, dass das Hallo du sau du*g* weiter rechts erscheint? Das Padding funktioniert nicht!
    http://nacktestars.na.funpic.de/hp.html
     
    Zuletzt bearbeitet: 30.08.2008
    #9      
  10. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Problem mit Navi
    AW: Problem mit Navi

    Als erstes entferne bitte alle <br> die sind total unnötig...

    Dann mache aus dem:
    HTML:
    1. box{
    2. position: relative; width: 100px
    3.  padding-left: 120px;
    4. }
    ein:
    HTML:
    1. .box{
    2. margin-top: 50px;
    3. margin-left: 300px;
    4. }
    Über diese beiden Werte definierst du dann die Position des Textes...

    Edit: Ich hab gesehen, wenn du das so machst, müsstest du die Navigation noch anpassen... Mir scheint es, als stündest du noch am Anfang von HTML und div-Layout daher hab ich mal ne kleine Anleitung für dich zusammen geschrieben:

    Schritt 0:
    Wir fangen mit einer leeren Standard-Seite an. Im CSS definieren wir lediglich Schriftart und -farbe und die Hintergrundfarbe.
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    2. <TITLE>hp1</TITLE>
    3. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    4. <STYLE type=text/css>
    5. BODY {
    6.         FONT-SIZE: 80%;
    7.         BACKGROUND: black;
    8.         FONT-FAMILY: arial, helvetica, serif;
    9.         TEXT-ALIGN: center;
    10. }
    11.  
    12. </HEAD>
    13.  
    14. </BODY>
    15. </HTML>
    Schritt 1:
    Nun überlegen wir uns, dass der Inhalt der Seite eine bestimmte Breite haben soll und immer zentriert dargestellt werden soll. Dies erreichen wir mit einem div-Container, dem wir im CSS eine feste Breite und den nach links und rechts einen automatischen Abstand zuweisen.
    Die Überlegung:
    [​IMG]

    Der Quelltext:
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    2. <TITLE>hp1</TITLE>
    3. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    4. <STYLE type=text/css>
    5. BODY {
    6.         FONT-SIZE: 80%;
    7.         BACKGROUND: black;
    8.         FONT-FAMILY: arial, helvetica, serif;
    9.         TEXT-ALIGN: center;
    10. }
    11. #mittig {
    12.         WIDTH: 900px;
    13.         MARGIN-LEFT: auto;
    14.         MARGIN-RIGHT: auto;
    15.         TEXT-ALIGN: center;
    16. }
    17.  
    18.  
    19. </HEAD>
    20. <DIV id=mittig>
    21.  
    22. </DIV>
    23. </BODY>
    24. </HTML>
    Schritt 2:
    Nun überlegen wir uns, dass in unserem zentriertem div-Container ein Hintergrundbild zu sehen sein soll. Da vor diesem Bild hinterher Text zu sehen sein soll, erstellen wir für dieses Bild ebenfalls ein div-Container mit der festen Höhe die der Höhe des Bildes entspricht.
    Um diesen Container ein wenig mittig auszurichten, geben wir einen Außenabstand nach Oben an.
    Die Überlegung:
    [​IMG]

    Der Quelltext:
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    2. <TITLE>hp1</TITLE>
    3. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    4. <STYLE type=text/css>
    5. BODY {
    6.         FONT-SIZE: 80%;
    7.         BACKGROUND: black;
    8.         FONT-FAMILY: arial, helvetica, serif;
    9.         TEXT-ALIGN: center;
    10. }
    11. #mittig {
    12.         WIDTH: 900px;
    13.         MARGIN-LEFT: auto;
    14.         MARGIN-RIGHT: auto;
    15.         TEXT-ALIGN: center;
    16. }
    17.  
    18. #hintergrund {
    19.         margin-top: 50px;
    20.         BORDER: 0px;
    21.         BACKGROUND-IMAGE: url(hp1-Dateien/hp1.gif);
    22.         HEIGHT: 444px;
    23. }
    24.  
    25.  
    26. </HEAD>
    27. <DIV id=mittig>
    28.  <DIV id=hintergrund>
    29.  
    30.  </DIV>
    31. </DIV>
    32. </BODY>
    33. </HTML>
    Schritt 3:
    Damit unter unserem Hintergrundbild die Navigationsleiste erscheint, fügen wir in unserem mittig-div unter dem hintergrund-div unsere Navigation hinzu.
    Die Überlegung:
    [​IMG]

    Der Quelltext: (mit CSS und Javascript)
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    2. <TITLE>hp1</TITLE>
    3. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    4. <STYLE type=text/css>
    5. BODY {
    6.         FONT-SIZE: 80%;
    7.         BACKGROUND: black;
    8.         FONT-FAMILY: arial, helvetica, serif;
    9.         TEXT-ALIGN: center;
    10. }
    11. #mittig {
    12.         WIDTH: 900px;
    13.         MARGIN-LEFT: auto;
    14.         MARGIN-RIGHT: auto;
    15.         TEXT-ALIGN: center;
    16. }
    17.  
    18. #hintergrund {
    19.         margin-top: 50px;
    20.         BORDER: 0px;
    21.         BACKGROUND-IMAGE: url(hp1-Dateien/hp1.gif);
    22.         HEIGHT: 444px;
    23. }
    24.  
    25. UL {
    26.         PADDING: 0px;
    27.         MARGIN: 0px;
    28.         LIST-STYLE-TYPE: none;
    29. }
    30. #nav {
    31.         MARGIN-LEFT: 30px;
    32. }
    33. #nav A {
    34.         FONT-WEIGHT: bold;
    35.         COLOR: green;
    36.         TEXT-DECORATION: none;
    37. }
    38. #nav LI LI A {
    39.         PADDING-RIGHT: 10px;
    40.         PADDING-LEFT: 10px;
    41.         PADDING-BOTTOM: 0.2em;
    42.         PADDING-TOP: 0.2em;
    43.         DISPLAY: block;
    44.         FONT-WEIGHT: normal;
    45.         COLOR: red;
    46. }
    47. #nav LI LI A:hover {
    48.         BORDER-RIGHT: red 5px solid;
    49.         BORDER-LEFT: red 5px solid;
    50.         BORDER-BOTTOM: 0px;
    51.         BORDER-TOP: 0px;
    52.         PADDING-LEFT: 5px;
    53.         PADDING-RIGHT: 5px;
    54.         PADDING-BOTTOM: 0.2em;
    55.         PADDING-TOP: 0.2em;
    56. }
    57. LI {
    58.         FLOAT: left;
    59.         WIDTH: 10em;
    60.         CURSOR: default;
    61.         POSITION: relative;
    62.         BACKGROUND-COLOR: black;
    63.         TEXT-ALIGN: center;
    64. }
    65. LI#first {
    66.         BORDER-LEFT-WIDTH: 3em;
    67. }
    68. LI#last {
    69.         BORDER-RIGHT-WIDTH: 1em;
    70. }
    71. LI UL {
    72.         BORDER-RIGHT: green 1px solid;
    73.         DISPLAY: none;
    74.         FONT-WEIGHT: normal;
    75.         PADDING-BOTTOM: 1em;
    76.         PADDING-TOP: 0.5em;
    77.         PADDING-LEFT: 0px;
    78.         PADDING-RIGHT: 0px;
    79.         TOP: 100%;
    80. }
    81. UNKNOWN {
    82.         LEFT: auto;
    83.         TOP: auto;
    84. }
    85. LI LI {
    86.         BORDER-TOP-WIDTH: 0px;
    87.         DISPLAY: block;
    88.         BORDER-LEFT-WIDTH: 0px;
    89.         FLOAT: none;
    90.         BORDER-BOTTOM-WIDTH: 0px;
    91.         BACKGROUND-COLOR: transparent;
    92.         BORDER-RIGHT-WIDTH: 0px;
    93. }
    94. LI:hover UL {
    95.         DISPLAY: block;
    96. }
    97. LI.over UL {
    98.         DISPLAY: block;
    99. }
    100.  
    101.  
    102. <SCRIPT type=text/javascript>
    103. <![CDATA[//><!--
    104.  
    105. startList = function() {
    106.    if (document.all&&document.getElementById) {
    107.        navRoot = document.getElementById("nav");
    108.        for (i=0; i<navRoot.childNodes.length; i++) {
    109.            node = navRoot.childNodes[i];
    110.            if (node.nodeName=="LI") {
    111.                node.onmouseover=function() {
    112.                    this.className+=" over";
    113.                }
    114.                node.onmouseout=function() {
    115.                    this.className=this.className.replace(" over", "");
    116.                }
    117.            }
    118.        }
    119.    }
    120. }
    121. window.onload=startList;
    122.  
    123. //--><!]]>
    124.  
    125. </HEAD>
    126. <DIV id=mittig>
    127.  <DIV id=hintergrund>
    128.  
    129.  </DIV>
    130.  <UL id=nav>
    131.    <LI>
    132.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_10.gif"></A></DIV>
    133.     <UL>
    134.       <LI><A href="http://nacktestars.na.funpic.de/">News</A></LI>
    135.       <LI><A href="http://nacktestars.na.funpic.de/">Termine</A></LI>
    136.       <LI><A href="http://nacktestars.na.funpic.de/">Blog</A></LI>
    137.     </UL>
    138.    </LI>
    139.    <LI>
    140.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_12.gif"></A></DIV>
    141.     <UL>
    142.       <LI><A href="http://nacktestars.na.funpic.de/">Ceylonese remora</A></LI>
    143.       <LI><A href="http://nacktestars.na.funpic.de/">Remora remora</A></LI>
    144.       <LI><A href="http://nacktestars.na.funpic.de/">Sharksucker</A></LI>
    145.       <LI><A href="http://nacktestars.na.funpic.de/">Slender remora</A></LI>
    146.       <LI><A href="http://nacktestars.na.funpic.de/">Spearfish remora</A></LI>
    147.       <LI><A href="http://nacktestars.na.funpic.de/">Whitefin sharksucker</A></LI>
    148.     </UL>
    149.    </LI>
    150.    <LI>
    151.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_14.gif"></A></DIV>
    152.     <UL>
    153.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    154.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    155.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    156.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    157.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    158.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    159.     </UL>
    160.    </LI>
    161.    <LI>
    162.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_16.gif"></A></DIV>
    163.     <UL>
    164.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    165.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    166.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    167.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    168.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    169.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    170.     </UL>
    171.    </LI>
    172.    <LI>
    173.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_18.gif"></A></DIV>
    174.     <UL>
    175.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    176.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    177.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    178.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    179.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    180.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    181.     </UL>
    182.    </LI>
    183.    <LI>
    184.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_20.gif"></A></DIV>
    185.     <UL>
    186.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    187.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    188.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    189.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    190.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    191.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    192.     </UL>
    193.    </LI>
    194.  </UL>
    195. </DIV>
    196. </BODY>
    197. </HTML>
    Schritt 4:
    Zuletzt müssen wir jetzt noch unseren Text vor unser Hintergrundbild an die richtige Stelle bekommen. Hierzu erstellen wir in unserem hintergrund-div ein weiteren div-Container. Dieser bekommt eine feste Breite, nach Oben und Rechts einen Außenabstand und mit dem float-Wert die Ausrichtung links zu stehen. So ausgerichtet, steht unser Inhalt genau an der richtigen Stelle. Damit allerdings bei einem zu langen Inhalt unser Hintergrundbild nicht gesprengt wird, müssen wir eine feste Höhe angeben und das div in vertikaler Ausrichtung scrollbar machen.
    Die Überlegung:
    [​IMG]

    Der Quelltext:
    HTML:
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    2. <TITLE>hp1</TITLE>
    3. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
    4. <STYLE type=text/css>
    5. BODY {
    6.         FONT-SIZE: 80%;
    7.         BACKGROUND: black;
    8.         FONT-FAMILY: arial, helvetica, serif;
    9.         TEXT-ALIGN: center;
    10. }
    11. #mittig {
    12.         WIDTH: 900px;
    13.         MARGIN-LEFT: auto;
    14.         MARGIN-RIGHT: auto;
    15.         TEXT-ALIGN: center;
    16. }
    17.  
    18. #hintergrund {
    19.         margin-top: 50px;
    20.         BORDER: 0px;
    21.         BACKGROUND-IMAGE: url(hp1-Dateien/hp1.gif);
    22.         HEIGHT: 444px;
    23. }
    24.  
    25. #inhalt {
    26.         width: 400px;
    27.         height: 370px;
    28.         overflow-y:scroll;
    29.         margin-top: 30px;
    30.         margin-right: 30px;
    31.         float: right;
    32.         color: #ffffff;
    33.         text-align: left;
    34. }
    35.  
    36. UL {
    37.         PADDING: 0px;
    38.         MARGIN: 0px;
    39.         LIST-STYLE-TYPE: none;
    40. }
    41. #nav {
    42.         MARGIN-LEFT: 30px;
    43. }
    44. #nav A {
    45.         FONT-WEIGHT: bold;
    46.         COLOR: green;
    47.         TEXT-DECORATION: none;
    48. }
    49. #nav LI LI A {
    50.         PADDING-RIGHT: 10px;
    51.         PADDING-LEFT: 10px;
    52.         PADDING-BOTTOM: 0.2em;
    53.         PADDING-TOP: 0.2em;
    54.         DISPLAY: block;
    55.         FONT-WEIGHT: normal;
    56.         COLOR: red;
    57. }
    58. #nav LI LI A:hover {
    59.         BORDER-RIGHT: red 5px solid;
    60.         BORDER-LEFT: red 5px solid;
    61.         BORDER-BOTTOM: 0px;
    62.         BORDER-TOP: 0px;
    63.         PADDING-LEFT: 5px;
    64.         PADDING-RIGHT: 5px;
    65.         PADDING-BOTTOM: 0.2em;
    66.         PADDING-TOP: 0.2em;
    67. }
    68. LI {
    69.         FLOAT: left;
    70.         WIDTH: 10em;
    71.         CURSOR: default;
    72.         POSITION: relative;
    73.         BACKGROUND-COLOR: black;
    74.         TEXT-ALIGN: center;
    75. }
    76. LI#first {
    77.         BORDER-LEFT-WIDTH: 3em;
    78. }
    79. LI#last {
    80.         BORDER-RIGHT-WIDTH: 1em;
    81. }
    82. LI UL {
    83.         BORDER-RIGHT: green 1px solid;
    84.         DISPLAY: none;
    85.         FONT-WEIGHT: normal;
    86.         PADDING-BOTTOM: 1em;
    87.         PADDING-TOP: 0.5em;
    88.         PADDING-LEFT: 0px;
    89.         PADDING-RIGHT: 0px;
    90.         TOP: 100%;
    91. }
    92. UNKNOWN {
    93.         LEFT: auto;
    94.         TOP: auto;
    95. }
    96. LI LI {
    97.         BORDER-TOP-WIDTH: 0px;
    98.         DISPLAY: block;
    99.         BORDER-LEFT-WIDTH: 0px;
    100.         FLOAT: none;
    101.         BORDER-BOTTOM-WIDTH: 0px;
    102.         BACKGROUND-COLOR: transparent;
    103.         BORDER-RIGHT-WIDTH: 0px;
    104. }
    105. LI:hover UL {
    106.         DISPLAY: block;
    107. }
    108. LI.over UL {
    109.         DISPLAY: block;
    110. }
    111.  
    112.  
    113. <SCRIPT type=text/javascript>
    114. <![CDATA[//><!--
    115.  
    116. startList = function() {
    117.    if (document.all&&document.getElementById) {
    118.        navRoot = document.getElementById("nav");
    119.        for (i=0; i<navRoot.childNodes.length; i++) {
    120.            node = navRoot.childNodes[i];
    121.            if (node.nodeName=="LI") {
    122.                node.onmouseover=function() {
    123.                    this.className+=" over";
    124.                }
    125.                node.onmouseout=function() {
    126.                    this.className=this.className.replace(" over", "");
    127.                }
    128.            }
    129.        }
    130.    }
    131. }
    132. window.onload=startList;
    133.  
    134. //--><!]]>
    135.  
    136. </HEAD>
    137. <DIV id=mittig>
    138.  <DIV id=hintergrund>
    139.   <DIV id=inhalt>
    140.    Hi du sau du<br>
    141.   </DIV>
    142.  </DIV>
    143.  <UL id=nav>
    144.    <LI>
    145.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_10.gif"></A></DIV>
    146.     <UL>
    147.       <LI><A href="http://nacktestars.na.funpic.de/">News</A></LI>
    148.       <LI><A href="http://nacktestars.na.funpic.de/">Termine</A></LI>
    149.       <LI><A href="http://nacktestars.na.funpic.de/">Blog</A></LI>
    150.     </UL>
    151.    </LI>
    152.    <LI>
    153.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_12.gif"></A></DIV>
    154.     <UL>
    155.       <LI><A href="http://nacktestars.na.funpic.de/">Ceylonese remora</A></LI>
    156.       <LI><A href="http://nacktestars.na.funpic.de/">Remora remora</A></LI>
    157.       <LI><A href="http://nacktestars.na.funpic.de/">Sharksucker</A></LI>
    158.       <LI><A href="http://nacktestars.na.funpic.de/">Slender remora</A></LI>
    159.       <LI><A href="http://nacktestars.na.funpic.de/">Spearfish remora</A></LI>
    160.       <LI><A href="http://nacktestars.na.funpic.de/">Whitefin sharksucker</A></LI>
    161.     </UL>
    162.    </LI>
    163.    <LI>
    164.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_14.gif"></A></DIV>
    165.     <UL>
    166.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    167.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    168.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    169.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    170.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    171.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    172.     </UL>
    173.    </LI>
    174.    <LI>
    175.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_16.gif"></A></DIV>
    176.     <UL>
    177.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    178.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    179.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    180.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    181.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    182.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    183.     </UL>
    184.    </LI>
    185.    <LI>
    186.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_18.gif"></A></DIV>
    187.     <UL>
    188.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    189.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    190.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    191.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    192.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    193.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    194.     </UL>
    195.    </LI>
    196.    <LI>
    197.     <DIV><A href="http://nacktestars.na.funpic.de/"><IMG src="hp1-Dateien/hp_20.gif"></A></DIV>
    198.     <UL>
    199.       <LI><A href="http://www.nocomment-fanclub.de/">1</A></LI>
    200.       <LI><A href="http://www.nocomment-fanclub.de/">2</A></LI>
    201.       <LI><A href="http://www.nocomment-fanclub.de/">3</A></LI>
    202.       <LI><IMG height=35 alt=Remora src="hp1-Dateien/hp_20.gif" width=100></LI>
    203.       <LI><A href="http://www.nocomment-fanclub.de/">4</A></LI>
    204.       <LI><A href="http://www.nocomment-fanclub.de/">5</A></LI>
    205.     </UL>
    206.    </LI>
    207.  </UL>
    208. </DIV>
    209. </BODY>
    210. </HTML>
    Mit diesem letzten Schritt ist unsere Seite fertig. Ich hoffe dir bringt die Anleitung etwas und kopierst nicht einfach nur das Endergebnis...
     
    Zuletzt bearbeitet: 31.08.2008
    #10      
x
×
×
teststefan