zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Umbruch bei Tab Menü verhinden?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2007, 13:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 37
docki befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2007, 15:00
Benutzerbild von hans010
Neuer Benutzer
neuer user
 
Registriert seit: 12.04.2007
Ort: Kiel
Beiträge: 9
hans010 befindet sich auf einem aufstrebenden Ast
Standard

Hmmmm das mit der Scrollbar funzt leider nicht, aber mit
<ul style="min-width:400px;">

wird zumindestens kein Umbruch mehr erzeugt...

Bis denne
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.04.2007, 18:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 37
docki befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hans010 Beitrag anzeigen
Hmmmm das mit der Scrollbar funzt leider nicht, aber mit
<ul style="min-width:400px;">

wird zumindestens kein Umbruch mehr erzeugt...

Bis denne
hi, erstmal danke für die antwort.
aber dein tip erzeugt bei mir trotzdem noch den umbruch in allen browsern.

ist das gar nicht möglich hinzubekommen?
Mit Zitat antworten
  #4 (permalink)  
Alt 20.04.2007, 18:29
Benutzerbild von kampfgnom
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 22.11.2006
Ort: Radebeul
Beiträge: 1.808
kampfgnom befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 20.04.2007, 20:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 37
docki befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von kampfgnom Beitrag anzeigen
schonmal mit overflow:auto; probiert
hi, overflow ändert leider auch nichts
Mit Zitat antworten
  #6 (permalink)  
Alt 21.04.2007, 12:13
CSS Noob
neuer user
 
Registriert seit: 02.11.2006
Ort: Salzburg/Österreich
Beiträge: 55
Cluster befindet sich auf einem aufstrebenden Ast
Standard Mouseover-Effekt?

Bitte löschen

Geändert von Cluster (21.04.2007 um 12:18 Uhr) Grund: vertan
Mit Zitat antworten
  #7 (permalink)  
Alt 13.05.2007, 03:06
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 37
docki befindet sich auf einem aufstrebenden Ast
Standard

hat jmd. noch ne idee?
Mit Zitat antworten
  #8 (permalink)  
Alt 13.05.2007, 16:42
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.04.2007
Beiträge: 100
Marlin befindet sich auf einem aufstrebenden Ast
Standard

Code:
#tabsB ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
        width: 90%;
      }
Du mußt eine Zahl kleiner 100% (90 nur mal als Beispiel) setzen, da #tabsB die Breite 100% hat und in #tabsB ul, #tabsB a usw. padding gesetzt wird. Das ergibt eine Gesamtbreite größer 100%. Deswegen kriegst Du auch leider den horizontalen Scrollbalken nicht weg, egal wie breit das Browserfenster ist. Der Code ist ziemlich verquer ...
Mit Zitat antworten
  #9 (permalink)  
Alt 13.05.2007, 20:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.04.2006
Beiträge: 37
docki befindet sich auf einem aufstrebenden Ast
Standard

mh, aber den zeilenumbruch macht er trotzdem auch wenn ich die weite kleiner setze.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 14.05.2007, 01:38
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.04.2007
Beiträge: 100
Marlin befindet sich auf einem aufstrebenden Ast
Standard

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;
      }
Jetzt ist es eine feste Angabe. Wird sie unterschritten, kommt eine Scrollbar. In Opera funzt es perfekt, Firefox stellt sie aber nicht richtig dar.

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:13 Uhr.