Mit jquery Tabs mit meinem Layout haben meine Tabs eine große Lücke, bevor sie starten

Ich habe derzeit eine 2-Spalten-Website-Layout, mit einer Fußzeile/Kopfzeile, eine feste Breite linke Spalte, die ein Menü enthält, und eine rechte Spalte, die dauert der Rest des verfügbaren Speicherplatzes. Meine linke Spalte enthält ein ausklappbares Menü, und wenn ich Tabs in der rechten Spalte habe, beginnt der Text in der ausgewählten Registerkarte erst, nachdem das Ende meines linken Menüs beendet ist.Mit jquery Tabs mit meinem Layout haben meine Tabs eine große Lücke, bevor sie starten

Ich habe versucht mit einem klaren: beide; bevor die Tabs beginnen, was dazu führt, dass sich die Tabs nach unten verschieben und beginnen, nachdem das Lefhand-Menü beendet ist. Hier

ist der Code, den ich zur Zeit bin mit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta name="generator" content="HTML Tidy for FreeBSD (vers 1st August 2003), see www.w3.org"> 
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 
    </script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js"> 
    </script> 
    <style type="text/css"> 
       body{ 
         margin: 0; 
         padding: 0; 
       } 
       #container{ 
         margin: 0; 
         background-color: #FFF; 
       } 
       #header{ 
         background-color: #666; 
         border-bottom: 1px solid #333; 
       } 
       #header h1{ 
         margin: 0; 
         padding: .5em; 
       } 
       #nav{ 
         float: left; 
         width: 160px; 
         margin-left: 10px; 
         padding-top: 1em; 
       } 
       #nav p { margin-top: 0; } 
       #content{ 
         padding: 0; 
         margin: 0 0 0 180px; 
       } 
       #footer{ 
         clear: both; 
         background-color: #666; 
         padding: 1em; 
         text-align: right; 
         border-top: 1px solid #333; 
       } 
       #header, #footer { 
         font-size: large; 
         text-align: center; 
         padding: 0.3em 0; 
       } 
    .menu { margin: 10px; height: 100px; font-size: 8pt; font-family: verdana; } 
    .menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 125px; } 
    .menu li { background-color: #cccc99; float: left; } 
    .menu li.sub { background-color: #cccc99; } 
    .menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; } 
    .menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 125px; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; } 
    .menu b { float: right; margin-right: 5px; } 
    * html .menu a, * html .menu a:visited { width: 125px; } 
    * html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } 
    .menu li:hover { position: relative; } 
    .menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } 
    .menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; } 
    .menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; } 
    .menu li:hover > ul { visibility: visible; } 
    .menu ul a:hover ul ul { visibility: hidden; } 
    .menu ul a:hover ul a:hover ul ul { visibility: hidden; } 
    .menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; } 
    .menu ul a:hover ul { visibility: visible; } 
    .menu ul a:hover ul a:hover ul { visibility: visible; } 
    .menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; } 
    .menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; } 
    .footer 
    { 
     text-align: center; 
     font-family: Arial, sans-serif; 
     font-size: 11px; 
     color: #CCCCCC; 
    } 
    .ui-wrapper { border: 1px solid #383838; } 
    .ui-wrapper input, .ui-wrapper textarea { border: 0; } 
    .ui-tabs-hide { 
     display: none !important; 
    } 
    .ui-tabs-nav, .ui-tabs-panel { 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
     color: #CCCCCC; 
     background-color: #242424; 
    } 
    .ui-tabs-panel a { 
     color: #FFD100; 
     cursor: pointer; 
     outline: none; 
    } 
    .ui-tabs-nav { 
    list-style: none; 
    margin: 0; 
    padding: 0 0 0 3px; 
    } 
    .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ 
    display: block; 
    clear: both; 
    content: " "; 
    } 
    .ui-tabs-nav li { 
    float: left; 
    margin: 0 0 0 2px; 
    } 
    .ui-tabs-nav a, .ui-tabs-nav a span { 
     color: #FFD100; 
    float: left; /* fixes dir=ltr problem and other quirks IE */ 
    padding: 0 12px; 
    } 
    .ui-tabs-nav a { 
    margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */ 
    padding-left: 0; 
    background-position: 100% 0; 
    text-decoration: none; 
    white-space: nowrap; /* @ IE 6 */ 
    outline: 0; /* @ Firefox, prevent dotted border after click */ 
    } 
    .ui-tabs-nav a:link, .ui-tabs-nav a:visited { 
    color: white; 
    } 
    .ui-tabs-nav .ui-tabs-selected a { 
    position: relative; 
    top: 1px; 
    z-index: 2; 
    margin-top: 0; 
    background-position: 100% -23px; 
    } 
    .ui-tabs-nav a span { 
    padding-top: 1px; 
    padding-right: 0; 
    height: 20px; 
    background-position: 0 0; 
    line-height: 20px; 
    } 
    .ui-tabs-nav .ui-tabs-selected a span { 
     color: white; 
    font-weight: bold; 
    padding-top: 0; 
    height: 27px; 
    background-position: 0 -23px; 
    line-height: 27px; 
    } 
    .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, 
    .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ 
    cursor: text; 
    } 
    .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, 
    .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */ 
    cursor: pointer; 
    } 
    .ui-tabs-disabled { 
    opacity: .4; 
    filter: alpha(opacity=40); 
    } 
    .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { 
    color: #000; 
    } 
    .ui-tabs-panel { 
    padding: 10px; 
    background: #242424; /* declare background color for container to avoid distorted fonts in IE while fading */ 
    } 

    </style> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("#tabs > ul").tabs();}); 
    </script> 

    <title></title> 
</head> 

<body> 
    <div id="container"> 
    <div id="header"> 
     Header 
    </div> 

    <div id="nav"> 
     <div class="menu"> 
     <ul> 
      <li><a href="#">Home</a></li> 

      <li><a href="#">Page1</a></li> 

      <li><a href="#">Page2</a></li> 

      <li><a href="#">Page3</a></li> 

      <li><a href="#">Page4</a></li> 

      <li><a href="#">Page5</a></li> 

      <li><a href="#">Page6</a></li> 

      <li><a href="#">Page7</a></li> 

      <li><a href="#">Page8</a></li> 

      <li><a href="#">Page9</a></li> 

      <li><a href="#">Page10</a></li> 

      <li><a href="#">Page11</a></li> 

      <li><a href="#">Page12</a></li> 
     </ul> 
     </div> 
    </div> 

    <div id="content"> 
     <div class="main"> 
     <h1>Main Body Here</h1><br> 

     <div id="tabs"> 
      <ul> 
      <li><a href="#one"><span>One</span></a></li> 

      <li><a href="#two"><span>Two</span></a></li> 

      <li><a href="#three"><span>Three</span></a></li> 
      </ul> 

      <div id="one"> 
      Tab One Here 
      </div> 

      <div id="two"> 
      Tab Two Here 
      </div> 

      <div id="three"> 
      Tab Three Here 
      </div> 

     </div> 
     </div> 
    </div> 

    <div id="footer" class="footer"> 
     Footer 
    </div> 
    </div> 
</body> 
</html>

Jede Hilfe apperciated würde. Vielen Dank.

Hinweis: JQuery 1.3, JQuery-ui 1,6

Quelle

2009-04-20 Rob

FYI, Padding ist bei der Berechnung der Breite eines Elements enthalten. Also, wenn Sie wollen, dass Ihr Element 600px ist und Sie wollen 2px der Polsterung auf der linken und rechten Seite, müssen Sie die width -Eigenschaft auf 596px anstelle von 600px setzen – Matt

Versuchen Sie folgendes:

.ui-tabs-nav { height:2em; }

Quelle

2009-04-20 20:50:02

Perfekt, das war genau das, was ich gesucht :) Danke! – Rob

Clearing, die standardmäßig ziemlich global gilt. Das ist der Grund für den Fehler, den Sie sehen - das #nav kommt vor den Tabs im Inhalt, also das clear: beide werden es löschen (Sie verwenden tatsächlich clear: sowohl bei .tabs :: after, aber demselben diff).

Um das Klartext zu "enthalten" und zu verhindern, dass es mit Elementen aus anderen Teilen der Seite interagiert, müssen Sie auch den Container schweben lassen. In diesem Fall wäre das der div.content. Fügen Sie einen Float hinzu: links daneben und eine Breite von 100%, um die Breite von div # main zu vergrößern, und Sie erhalten das gewünschte Verhalten - die Registerkarten befinden sich direkt unter den Tabs.

(Dies ist ein Grund, von der Art und Weise, dass die „Float Fast alles“ Strategie funktioniert und es funktioniert - es kann immer noch in einer vernünftigen Art und Weise trotz massiv überbeanspruchend float klar verwenden.)

Quelle

2009-04-20 21:35:10 Xanthir

Danke. Ich hatte ein ähnliches Problem und das Problem wurde genau gelöst. – Matt

Re:

EDIT Vor einiger Zeit, als ich begann die jQuery UI, die CSS, die mit kam der Download mein Kalandern verursacht wurde die Größe auf 150% zu machen, die ich erwartete sie. Durch ihre Website, musste ich die Schriftgrößen und Padding auf die CSS ändern und dann alles neu herunterladen. Wenn der Abstand aus ist, klingt es so, als ob irgendwo irgendwo padding-left angewendet werden könnte.

hatte ich, dass gleiche Problem zunächst, aber die Änderung der ui.tabs.css wie unten gearbeitet:

.ui-tabs {padding: .2em; Zoom: 1; Schriftgröße: 80%! Wichtig;}

Quelle

2009-07-17 20:57:56

Mit jquery Tabs mit meinem Layout haben meine Tabs eine große Lücke, bevor sie starten

Antwort

Verwandte Themen