Erledigt: CSS Navi frage

Webentwicklung XHTML / CSS
 
Editiert: 15.01.08, 21:23 Uhr
moin,
ich versuche gerade eine Navi zusammen zu basteln und hänge gerade daran, dass ich gerne hätte, das die hoverlinks nicht drunter erscheinen, sondern rechts.

ne idee???


EDIT:


link vorschau


  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  6. <title></title>
  7. <style type="text/css">
  8.  
  9. a {
  10. font-family: Arial, Helvetica, sans-serif;
  11. font-size: 12px;
  12. }
  13.  
  14.  
  15. a:link {
  16. text-decoration: none;
  17. color: #D4D23B;
  18. }
  19.  
  20. a:visited {
  21. text-decoration: none;
  22. color: #D4D23B;
  23. }
  24.  
  25. a:hover {
  26. text-decoration: none;
  27. color: #CCCCCC;
  28. }
  29.  
  30. a:active {
  31. text-decoration: none;
  32. color: #D4D23B;
  33. }
  34.  
  35.  
  36.  
  37. ul#Navigation {
  38. margin: 0;
  39. padding: 0;
  40. text-align: left;
  41. }
  42.  
  43. ul#Navigation li {
  44. list-style: none;
  45. float: inherit; /* ohne width - nach CSS 2.1 erlaubt */
  46. position: relative;
  47. margin: 0.4em;
  48. padding: 0;
  49. }
  50. * html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
  51. margin-bottom: -0.4em;
  52. }
  53. *:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
  54. margin-bottom: -0.1em;
  55. }
  56.  
  57. ul#Navigation li ul {
  58. margin: 0; padding: 0;
  59. position: absolute;
  60. top: 1.6em; left: -0.4em;
  61. display: none; /* Unternavigation ausblenden */
  62. }
  63. * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
  64. left: -1.5em;
  65. lef\t: -0.4em;
  66. }
  67. *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
  68. padding-bottom:0.4em;
  69. }
  70. ul#Navigation li:hover ul {
  71. display: inline; /* Unternavigation in modernen Browsern einblenden */
  72. }
  73. ul#Navigation li ul li {
  74. float: none;
  75. display: inline;
  76. margin-bottom: 0.2em;
  77. }
  78.  
  79. ul#Navigation a, ul#Navigation span {
  80. display: inline;
  81. width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
  82. text-decoration: none;
  83. font-weight: bold;
  84.  
  85. }
  86. * html ul#Navigation a, * html ul#Navigation span {
  87. width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
  88. w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  89. }
  90.  
  91.  
  92.  
  93. </style>
  94. </head>
  95. <body>
  96. <h1 id="Beispiel"></h1>
  97.  
  98. <div id="Rahmen"><ul id="Navigation">
  99. <li><a href="#Beispiel">Seite 1</a></li>
  100.  
  101. <li><a href="#Beispiel">Seite 2</a>
  102. <ul>
  103. <li><a href="#Beispiel">Seite 2a</a></li>
  104. <li><a href="#Beispiel">Seite 2b</a></li>
  105. </ul>
  106. </li>
  107.  
  108. <li><a href="#Beispiel">Seite 3</a></li>
  109.  
  110. <li><a href="#Beispiel">Seite 4</a>
  111. <ul>
  112. <li><a href="#Beispiel">Seite 4a</a></li>
  113. <li><a href="#Beispiel">Seite 4c</a></li>
  114. </ul>
  115. </li>
  116.  
  117. <li><a href="#Beispiel">Seite 5</a></li>
  118. </ul><div></div></div>
  119.  
  120.  
  121. </body>
  122. </html>
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
Kannst du mal kurz einen Screenshot posten, und versuch doch mal statt Zitat den „code“ Button (<>)
Ansonsten ist das Stichwort: float: left bzw bei Listen: display:inline

five
Link zu diesem Beitrag in die Zwischenablage kopieren
danke Phloo -),

habs oben kurz editiert, das man nicht ewig lange listen hat.
Link zu diesem Beitrag in die Zwischenablage kopieren
jian schrieb am 14.01.08, 14:39 Uhr:


  1. ul#Navigation li:hover ul {
  2. display: inline; /* Unternavigation in modernen Browsern einblenden */
  3. }
Quelltext in Zwischenablage kopieren
Also Du machst im Endeffekt das Div bei Hover Inhaltsgroß und nachher wieder versteckt. Und willst die Unterlinks aber rechts stehen haben. Kannst Du denn da nicht einfach auch einen float dann einbauen? So dass die dann hochzockeln und daneben stehen. Und bei Mouseout dann float wieder weg.
Kanns nicht testen und ausprobieren. Ist nur ein Gedanke.
Link zu diesem Beitrag in die Zwischenablage kopieren
ich bin in CSS ungefähr so bewandert wie mein Auto beim Stricken. Kannst Du das etwas genauer ausdrücken??? brain
Link zu diesem Beitrag in die Zwischenablage kopieren
  1. ul#Navigation li ul {
  2. margin: 0; padding: 0;
  3. position: absolute;
  4. top: 1.6em; left: -0.4em;
  5. display: none; /* Unternavigation ausblenden */
  6. float: none;
  7. }
  8. ...
  9. ul#Navigation li:hover ul {
  10. display: inline; /* Unternavigation in modernen Browsern einblenden */
  11. float: right;
  12. }
Quelltext in Zwischenablage kopieren

Sowas dachte ich, aber wie gesagt, obs klappt kann ich gerade nicht nachprüfen.
Die floats jeweils unten habe ich dazu gesetzt.
Link zu diesem Beitrag in die Zwischenablage kopieren
ie6 kann keine hovers für nicht links werber
Link zu diesem Beitrag in die Zwischenablage kopieren
dann doch mit java... ohh grausssss

mit ner horizontalen habe ich es damals gebacken bekommen (nach langen Nächten vollen rumprobieren und rumkopieren), jetzt wollte ich einfach mal etwas für mich selbst in vertikal basteln....
Link zu diesem Beitrag in die Zwischenablage kopieren
das geht sicher auch in „ohne javascript“ ... wenn hier bis nachher niemand was schreibt schau ich mal. jetzt MUSS ich erstmal keynote schauen )
Link zu diesem Beitrag in die Zwischenablage kopieren
was die ist jetzt schon, na nichts wie hin... jump
Link zu diesem Beitrag in die Zwischenablage kopieren
da musst du erstmal mit einem der live-ticker vorlieb nehmen ;-)

http://live.macnotes.de/ ()
Link zu diesem Beitrag in die Zwischenablage kopieren
hab bisher noch nix ohne javascript gefunden (
aber schau dir mal das an: http://www.stefashwell.com/tutorials/entry/7/ ist glaube ich ein guter kompromiss.
Link zu diesem Beitrag in die Zwischenablage kopieren
vielen danke, ich versuche es mal, vielleicht schaffe ich es ja die popuplinks horizontal nebeneinander zu bekommen.
Link zu diesem Beitrag in die Zwischenablage kopieren
)

das problem ist eigentlich nur das „hover“ (aber eben mit JS zu lösen) - wenn du die untermenü-links horizontal haben willst dürfte das nicht so schwer sein.

ggf. noch mal melden wenn du soweit bist und es nicht klappt ... )
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 15.01.08, 22:11 Uhr
mist aber auch, ich bekomms nich hin brain ... is bestimmt was soooo einfaches... pee

das mit dem JS kann man mit dem htc umgehen aber ich bekomme die sachen nicht horizontal...


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>CSS Pop Up Menu - Example 4</title>
  5.  
  6. <style type="text/css">
  7.  
  8.  
  9. * {
  10. padding: 0;
  11. margin: 0;
  12. font-family: Arial, sans-serif;
  13. }
  14.  
  15. body {
  16. margin: 20px;
  17. font-size: 12px;
  18. }
  19.  
  20. body {
  21. behavior: url(csshover2.htc); /* so könnte es im Explorer gehen */
  22. }
  23.  
  24. ul {
  25. list-style: none;
  26. width: 65px;
  27. }
  28.  
  29. ul a {
  30. color: #666666;
  31. text-decoration: none;
  32. display: block;
  33. padding: 5px 5px 5px 10px;
  34. width: 65px;
  35. }
  36.  
  37. ul a:hover {
  38. color: #4BD8FF;
  39. text-decoration: none;
  40. }
  41.  
  42. ul li {
  43. margin-bottom: 1px;
  44. float: left;
  45. position: relative;
  46. }
  47.  
  48. ul li ul {
  49. list-style: none;
  50. position: absolute;
  51. left: 70px;
  52. top: 0;
  53. display: none;
  54. width: 125px;
  55.  
  56. }
  57.  
  58. ul li:hover ul {
  59. display: inline;
  60. float: right:
  61. }
  62.  
  63.  
  64.  
  65. </style>
  66.  
  67. </head>
  68. <body>
  69.  
  70. <ul>
  71. <li><a href="index.html">Home</a></li>
  72. <li><a href="about.html">About</a></li>
  73. <li><a href="gallery.html">Gallery</a>
  74. <ul>
  75. <li><a href="gallery1.html">Gallery 1</a></li>
  76. <li><a href="gallery2.html">Gallery 2</a></li>
  77. <li><a href="gallery3.html">Gallery 3</a></li>
  78. <li><a href="gallery4.html">Gallery 4</a></li>
  79. </ul>
  80. </li>
  81. <li><a href="products.html">Products</a></li>
  82. </ul>
  83.  
  84. </body>
  85. </html>
Quelltext in Zwischenablage kopieren
Link zu diesem Beitrag in die Zwischenablage kopieren
das untermenü?
Link zu diesem Beitrag in die Zwischenablage kopieren
hat sich erledigt, war wie erwartet pillepalle einfach


  1. ul li ul {
  2. list-style: none;
  3. position: absolute;
  4. left: 70px;
  5. top: 0;
  6. display: none;
  7. width: 600px;
  8. }
Quelltext in Zwischenablage kopieren

einfach auf 600px widht gesetzt und schon gabs kein Umbruch mehr... maaaaan, worauf man alles kommen muß ...
Link zu diesem Beitrag in die Zwischenablage kopieren
Da komme ich gerade wieder richtig vorbei ;-) Sehr schön.
Bin gerade auf kaltem Internet-Entzug. scream
Aber eines wollte ich schon noch loswerden: jian Dein Icon macht mich ganz kirre - Ich denke immer der Monitor hat ne Pixel-Störung. brain (Note to self: Make my icon quickly)
Link zu diesem Beitrag in die Zwischenablage kopieren
Editiert: 16.01.08, 19:29 Uhr
tja leider klappt es doch nich wie gewünscht mit dem „csshover.htc“ ... im IE funktionierts nich... es geht zwar auf (alles wie soll) aber sobald ich auf den link will verschwindet die popupnavi... schandeeeeeeeee


EDIT: endlich kann ich damit () auf dem mac diese Krankheit IE testen
EDIT VOM EDIT: na das Explorer ding taugt doch nix...
Link zu diesem Beitrag in die Zwischenablage kopieren
#