Utiliser les onglets jquery avec ma mise en page mes onglets ont un grand écart avant de commencer

J'ai actuellement une disposition de site à 2 colonnes, avec un pied de page/en-tête, une colonne de gauche à largeur fixe qui contient un menu et une colonne de droite le reste de l'espace disponible. Ma colonne de gauche contient un menu déroulant, et il semble que lorsque j'ai des onglets dans la colonne de droite, le texte dans l'onglet sélectionné commence seulement après la fin de mon menu lefhand se termine.Utiliser les onglets jquery avec ma mise en page mes onglets ont un grand écart avant de commencer

J'ai essayé d'utiliser un clear: both; avant le début des onglets, les onglets entiers se déplacent vers le bas et commencent après la fin du menu.

Voici le code que je suis actuellement en utilisant:

<!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>

Toute aide serait apperciated. Merci.

Note: Jquery 1.3, Jquery-ui 1,6

Source

2009-04-20 Rob

FYI, le remplissage est inclus lors du calcul de la largeur d'un élément. Donc, si vous voulez que votre élément soit 600px et que vous voulez 2px de remplissage à gauche et à droite, vous devez définir la propriété width à 596px au lieu de 600px – Matt

Essayez ceci:

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

Source

2009-04-20 20:50:02

Parfait, c'était exactement ce que je cherchais :) Merci! – Rob

de compensation, par défaut, applique assez globalement. C'est ce qui provoque l'erreur que vous voyez - le #nav vient avant les onglets dans le contenu, donc le clair: les deux l'effacera (vous utilisez réellement clear: à la fois sur .tabs :: after, mais même diff). Afin de «contenir» le clair et l'empêcher d'interagir avec des éléments d'ailleurs dans la page, vous devez également faire flotter le conteneur. Dans ce cas, ce serait le div.content. Ajoutez un flottant: gauche à cela, et une largeur: 100% pour le faire étirer la largeur de div # main, et vous obtiendrez le comportement désiré - les cartes à onglets seront immédiatement au-dessous des onglets eux-mêmes.

(Ceci est une raison, par ailleurs, que le « Float Presque tout » fonctionne stratégie et comme elle le fait - il peut utiliser encore clairement d'une manière saine d'esprit malgré float massivement un usage excessif.)

Source

2009-04-20 21:35:10 Xanthir

Merci. J'avais un problème similaire et cela a réglé le problème exactement. – Matt

Re:

EDIT Un peu en arrière quand je commencé à utiliser l'interface utilisateur jQuery, le CSS qui est venu avec le téléchargement était à l'origine de mes calandres rendre à 150% de la taille que je les attendais. Grâce à leur site, je devais changer les tailles de police et rembourrage à la CSS, puis re-télécharger tout cela. Si l'espacement est off, il semble qu'il y ait un rembourrage-gauche appliqué quelque part.

J'ai eu ce même problème au début, mais en changeant la ui.tabs.css comme ci-dessous travaillé:

.ui-onglets {padding: .2em; zoom: 1; taille de police: 80%! Important;}

Source

2009-07-17 20:57:56

Utiliser les onglets jquery avec ma mise en page mes onglets ont un grand écart avant de commencer

Répondre

Questions connexes