|
|||
Navigation Horizontal bei Zoom "Zeilenumbruch"
Hey
Ich hab jetzt schon eine halbe ewigkeit gesucht und bin leider nicht fündig geworden, deshalb frag ich jetzt mal nach. Also die Sache sieht so aus: Ich habe mir einige Code-schnippsel für eine Browserbar auf dieser Seite hier: CSS DropDown Menu Tutorial Page 2 zusammengesucht, da ich das Problem mit dem Zeilenumbruch beim Zoomen schon bei meiner Eigenentwicklung vorher hatte, nun hab ich da aber das gleiche Problem wie die Dame bei diesem Beispiel: Horizontal CSS Menu Tutorial ~ Example Page 7 Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta> <title>Horizontal CSS Menu Tutorial ~ Example Page 7</title> <meta name="description" content="Example 7 - CSS Horizontal DropDown & Popout Menu Tutorial"></meta> <link rel="shortcut icon" href="../../../favicon.ico" /> <link href="tanfa.css" rel="stylesheet" type="text/css"> <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> </head> <body id="www-tanfa-co-uk"> <div id="pagetop"> <a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a> <h1>CSS Drop Down Menu Tutorial Code</h1> <h2>Page 7 - Full Working Example</h2> <h3>« <a href="tutorial-h.html#hs7">return to tutorial</a> :: Stages [<a href="hs1.html" title="Horizontal Example 1">1</a>] [<a href="hs2.html" title="Horizontal Example 2">2</a>] [<a href="hs3.html" title="Horizontal Example 3">3</a>] [<a href="hs4.html" title="Horizontal Example 4">4</a>] [<a href="hs5.html" title="Horizontal Example 5">5</a>] [<a href="hs6.html" title="Horizontal Example 6">6</a>] [7] </h3> </div> <!-- start menu HTML --> <div id="menu"> <ul> <li><h2>CSS Drop Down Menus</h2> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>Vertical CSS Pop-Out Menu</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li> <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a> <ul> <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li> <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li> <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li> <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li> <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li> <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>Horizontal Drop & Pop Menu</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li> <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample --> <ul> <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li> <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li> <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li> <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li> <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li> <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div> <div class="adbreak" style="text-align: center; margin: 100px 60px; 0"> <h5>"A word from our sponsors...."</h5> <script type="text/javascript"><!-- ch_client = "Suzy"; ch_width = 468; ch_height = 180; ch_non_contextual = 1; //var ch_queries = new Array("digital cameras", "ipod mini", "sony playstation", "dell laptop"); var ch_queries = new Array("css"); var ch_selected=Math.floor((Math.random()*ch_queries.length)); ch_query = ch_queries[ch_selected]; //--></script> <script src="http://scripts.chitika.net/eminimalls/mm.js" type="text/javascript"> </script> </div> </body> </html> Es wäre einfach genial, wenn mir irgendjemand helfen könnte. Mfg Aslof |
Sponsored Links |
Sponsored Links |
|
||||
. .
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
||||
Dann hast Du etwas falsch gemacht. Poste mal einen Link auf eine Testseite.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
So bitte schön, hab bei jedem css ein width eingefügt
Horizontal CSS Menu Tutorial ~ Example Page 7 Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta> <title>Horizontal CSS Menu Tutorial ~ Example Page 7</title> <meta name="description" content="Example 7 - CSS Horizontal DropDown & Popout Menu Tutorial"></meta> <link rel="shortcut icon" href="../../../favicon.ico" /> <link href="tanfa.css" rel="stylesheet" type="text/css"> <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { width: 200px; list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { width: 200px; font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { width: 200px; color: #000; background: #efefef; text-decoration: none; } #menu a:hover { width: 200px; color: #a00; background: #fff; } #menu li { width: 200px; position: relative;} #menu ul ul { width: 200px; position: absolute; z-index: 500; } #menu ul ul ul { width: 200px; position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { width: 200px; display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul { width: 200px; display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> </head> <body> <!-- start menu HTML --> <div id="menu"> <ul> <li><h2>CSS Drop Down Menus</h2> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>Vertical CSS Pop-Out Menu</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li> <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a> <ul> <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li> <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li> <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li> <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li> <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li> <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>Horizontal Drop & Pop Menu</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li> <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample --> <ul> <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li> <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li> <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li> <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li> <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li> <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html> |
|
||||
Ideal wäre hier min-width für body.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
WOW Einfach Toll so eine einfache Lösung für das Problem ich dachte schon, das ich im falschen Film bin. Wieviele Semester Informatik muss man den für so geniale Tipps studiert haben ?
Vielen Dank für die Schnelle hilfe thx |
Sponsored Links |
|
||||
Keines
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Stichwörter |
css, navigation, navigationsmenü, navigationsproblem, zeilenumbruch, zeilenumbruchsfehler |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 11:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 16:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 15:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 18:18 |