Выход содержимого вкладки за нижнюю границу вкладки

Обсуждаются вопросы по надстройке jQuery UI - официальные виджеты и плагины для организации взаимодействия с элементами интерфейса.

Модераторы: EGORR, Gennady

Выход содержимого вкладки за нижнюю границу вкладки

Сообщение tzhe » 13 окт 2010, 21:19

Содержимое выходит за границу. В чем причина?
Код: выделить все
<!DOCTYPE html>
<html>
<head>
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    
   <style>
      #tabs {
         position:absolute;
         top:200px;
         width:400px;
         font-size:80%;
         height:340px;
      }
      #tabs .tab_menus {
         overflow-y:auto;
         min-height:295px;
         height:85%;
         margin-top:10px;
         margin-bottom:10px;
      }      
   </style>
   <script>
       $(document).ready(function() {
          $("#tabs").tabs();
       });
   </script>
</head>
<body>
   <div id="tabs">
       <ul>
           <li><a href="#fragment-1"><span>One</span></a></li>
           <li><a href="#fragment-2"><span>Two</span></a></li>
       </ul>
       <div id="fragment-1" class="tab_menus">
               Здесь много текста
       </div>
       <div id="fragment-2" class="tab_menus">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
       </div>
   </div>
</body>
</html>

Изображение
Онлайн: _http://tzhe.narod.ru/jquery/question1/jquery-tabs.html
tzhe
 
Сообщений: 3
Зарегистрирован: 13 окт 2010, 20:06

Re: Выход содержимого вкладки за нижнюю границу вкладки

Сообщение Gennady » 13 окт 2010, 22:35

tzhe, а Вам не кажется, что модератор Вас уже предупреждал о том, что если Вы обращаетесь к людям за помощью - надо бы быть несколько любезнее? И вопрос Ваш не имеет собственно ничего общего с UI jQuery, кроме того, что Вы используете виджет Tabs. :twisted:

А теперь посмотрите на код, который Вы используете. Я имею ввиду только CSS
Код: выделить все
#tabs {
         position:absolute;
         top:200px;
         width:400px;
         font-size:80%;
         height:340px;
}

явно задаете ширину и высоту блока, и при этом удивляетесь почему текст уехал вниз? Либо уберите height, либо определите свойство overflow, чтобы выглядело "цивильно".
Долог путь поучения, короток и успешен путь примеров (Сенека).
I'm a member of jQuery Meetups. jQuery users unite! Connect with other jQuery users... Присоединиться к jQuery Russia.
Аватар пользователя
Gennady
Администратор
 
Сообщений: 1886
Зарегистрирован: 14 янв 2010, 14:36
Откуда: Москва

Re: Выход содержимого вкладки за нижнюю границу вкладки

Сообщение tzhe » 15 окт 2010, 10:00

Спасибо за ответ. Действительно, height лишний.
tzhe
 
Сообщений: 3
Зарегистрирован: 13 окт 2010, 20:06


Вернуться в jQuery UI

Кто сейчас на форуме

Сейчас этот форум просматривают: Google [Bot] и гости: 1