|
|||
Umbruch bei Tab Menü verhinden?
Hab mit ein Tab Menu mit dem Css Tab Designer erstellt.
Nun würde ich gerne erreichen, dass die Tabs nicht in der Zeile umbrechen wenn ich das Fenster verkleinere. sondern dass man einfach mit dem horzontalen scrollbalken scrollen muss. Wie jemand wie's geht. Hab Euch den Quellcode mal angefügt 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" /> <title>Free CSS Navigation Menu Designs 1 at exploding-boy.com</title> <style type="text/css"> <!-- body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } /*- Menu Tabs B--------------------------- */ #tabsB { float:left; width:100%; background:#F4F4F4; font-size:93%; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url("tableftB.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url("tabrightB.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } #tabsB #current a { background-position:0% -42px; } #tabsB #current a span { background-position:100% -42px; } --> </style> </head> <body> <h2>Tab Menu B</h2> <div id="tabsB"> <ul> <!-- CSS Tabs --> <li id="current"><a href="Home.html"><span>Home</span></a></li> <li><a href="Products.html"><span>Products</span></a></li> <li><a href="Services.html"><span>Services</span></a></li> <li><a href="Support.html"><span>Support</span></a></li> <li><a href="Order.html"><span>Order</span></a></li> <li><a href="News.html"><span>News</span></a></li> <li><a href="About.html"><span>About</span></a></li> </ul> </div> <br /><br /> </body> </html> |
Sponsored Links |
|
|||
Zitat:
aber dein tip erzeugt bei mir trotzdem noch den umbruch in allen browsern. ist das gar nicht möglich hinzubekommen? |
|
||||
schonmal mit overflow:auto; probiert
__________________
Meine Spielwiese: http://blog.kanedo.net Ich bei Flickr? Da: Flickr: Fotostream von kanedo-projekt Für open Source Liebhaber: open Com Auch ich Zwitschere als @kanedo |
|
|||
Code:
#tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; width: 90%; } |
|
|||
Ok, versuch mal folgendes: Vergiß das mit der Breite (also löschen) und setze
Code:
#tabsB { float:left; width:100%; min-width: 600px; background:#F4F4F4; font-size:93%; line-height:normal; } Für den IE ergänze um *html #tabsB ul { width: 600px; }. Die Pixelangaben nur als Beispiel. Mußt Du selber rausfinden, oder nimm em. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
Tab Menü Problem | BloodHunger | CSS | 6 | 22.12.2008 17:04 |
Tab Menü mit abgerundeten Ecken | alphanimal | CSS | 0 | 27.08.2008 14:13 |
horizontales tab menü - problem bei webkit basierten browsern | cpt.future | CSS | 1 | 21.08.2007 20:49 |
Umbruch in einem LI bei horizontalem Menü | M4rco | CSS | 12 | 13.10.2006 12:26 |