Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: CSS - Закладки (Tabs)
 
 автор: Andrej   (23.05.2005 в 18:24)   письмо автору
 
 

Здравствуйте!
Подскажите или помогите решить проблему, как сделать эти (http://reddik.biz.ly) закладки кросбраузерными, чтобы они правильно отображались в браузерах (IE 5+, Mozilla 1.6+, Opera 7+, firefox1+).
В Mozilla и Firefox закладки разрываются посередине (http://reddik.biz.ly\1.gif), а Opera 7 появляется space справа (http://reddik.biz.ly\2.gif). Или же подскажите, может кто-то видел подобное в инете.
Закладки должны быть сделаны средствами CSS, никакой графики.

   
 
 автор: glsv (Дизайнер)   (24.05.2005 в 04:51)   письмо автору
 
   для: Andrej   (23.05.2005 в 18:24)
 

А у меня в Opere (7.23) идеально. В Mozilla, действительно, однопиксельный пробел по середине, а в IE глюки. Картинку из IE прикладываю. IE 6.0, разрешение - 1024.

PS: протестировать не могу, т.к. у вас там стили, которые во внешнем файле подключаются.

   
 
 автор: Andrej   (24.05.2005 в 11:06)   письмо автору
 
   для: glsv (Дизайнер)   (24.05.2005 в 04:51)
 

Спасибо за то что ответили и пытаетесь помочь. Вот линк на стили http://reddik.biz.ly/inc/tabs.css А может Вы где-нибудь видели подобное меню с закладками на CSS?

   
 
 автор: glsv (Дизайнер)   (25.05.2005 в 04:31)   письмо автору
 
   для: Andrej   (24.05.2005 в 11:06)
 

Нельзя открыть. Лучше прикрепите файл со стилями в форум.

   
 
 автор: Andrej   (25.05.2005 в 11:02)   письмо автору
1.5 Кб
 
   для: glsv (Дизайнер)   (25.05.2005 в 04:31)
 

Вот пожалуйста.

   
 
 автор: glsv (Дизайнер)   (26.05.2005 в 04:22)   письмо автору
 
   для: Andrej   (25.05.2005 в 11:02)
 

Хм... очень занимательный глюк. Первый раз такое вижу.
Проблемы в блоке

body
{
color: #000000;
background-color: #FFFFFF;
margin-bottom: 20px;
margin-right: 21px;
margin-left: 21px;
}

вернее в величине отступов margin. Если величина отступа нечетная (21px), то появляются 1-пиксельные пробелы в Mozille и все разъезжается в IE. Если величину отступов сделать четную, то все ОК. Например так:

body
{
  color: #000000;
  background-color: #FFFFFF;
  margin: 22px
}

   
 
 автор: Andrej   (26.05.2005 в 13:06)   письмо автору
 
   для: glsv (Дизайнер)   (26.05.2005 в 04:22)
 

мдяяяя:))) я догадывался что это мелочь, но не смог ее найти. Большое спасибо!!!
и теперь буду осторожнее с непарными числами:)
а вот здесь http://www.webmascon.com/forum/viewtopic.php?p=4549#4549 "гуру" которые не смогли помочь или же просто не хотели!

   
 
 автор: Andrej   (26.05.2005 в 14:42)   письмо автору
 
   для: glsv (Дизайнер)   (26.05.2005 в 04:22)
 

хмммм....поставил 22 по краях и у меня все разьезжается в IE 6:((( и в Mozilla када делаю окно 800 на 600 появляеться 1 пиксель:(( и вообще заметил такую тендеци ю када окно браузера становиться нечетным по ширине то все сезжает:(( может посоветуете как еще можно сделать такие закладки на CSS?

   
 
 автор: glsv (Дизайнер)   (26.05.2005 в 15:11)   письмо автору
 
   для: Andrej   (26.05.2005 в 14:42)
 

>када окно браузера становиться нечетным по ширине то все сезжает
Да, видимо, это проявления одного и того же глюка.

>посоветуете как еще можно сделать такие закладки на CSS?
Попробую свестать к завтру.
А вас таблицы принципиально не устраивают? Ведь они здесь очень даже к месту будут. А если только на стилях делять - никаких гарантий, что опять не слетят.
Даже наоборот - обязательно слетят при уменьшении размеров окна, если названия закладок в ширину убираться не будут.

   
 
 автор: Andrej   (26.05.2005 в 18:59)   письмо автору
 
   для: glsv (Дизайнер)   (26.05.2005 в 15:11)
 

Мне нужен обязательно такой эффект как есть, чтобы при наведении мышки закладки и шрифт увеличивались, чтобы закладки были резиновыми, и линком была вся закладка а не только текст. И я старался сделать это не применяя графику и скрипты.
Большое спасибо за то, что помогаете решить проблему.

   
 
 автор: glsv (Дизайнер)   (27.05.2005 в 08:39)   письмо автору
 
   для: Andrej   (26.05.2005 в 18:59)
 

Попробуйте вот так

<html>
<head>
<title></title>
<style>
  body{
    color: #000000;
    background-color: #FFFFFF;
    margin: 22px}
    
  table.bookmark td{text-align: center; height: 50px; }
  table.bookmark td div{background-color: #B55440;}
  table.bookmark td div.style2 {background-color: #804040;}  
  
  table.bookmark td a{color: #FFFFFF; display: block; height: 30px; line-height: 30px;}
  table.bookmark td a:hover{height: 50px; font-size: 20px; line-height: 50px; }
</style>
</head>
<body>
<table width="100%" class="bookmark" border="0" cellpadding="0" cellspacing="0">
    <tr valign="bottom">
        <td width=25%><div><a href="#">page1</a></div></td>
        <td width=25%><div class=style2><a href="#">page2</a></div></td>
        <td width=25%><div><a href="#">page3</a></div></td>
        <td width=25%><div class=style2><a href="#">page4</a></div></td>
    </tr>
</table>

Единcтвенно, что не универсально - пришлось явно задавать ширину ячеек таблицы (width=25%).

   
 
 автор: Andrej   (27.05.2005 в 11:27)   письмо автору
 
   для: glsv (Дизайнер)   (27.05.2005 в 08:39)
 

Замечательно !!! работает идеально во всех браузерах и без глюков !!!
Большое спасибо!!!!!

>Единcтвенно, что не универсально - пришлось явно задавать ширину ячеек таблицы (width=25%).

это решается таким образом


table.bookmark td {text-align: center; height: 50px; width: 25%;} 

на таблицу это никак не повлияет так-как она у нас задана явно


<table width="100%" class="bookmark" border="0" cellpadding="0" cellspacing="0">

   
 
 автор: glsv (Дизайнер)   (28.05.2005 в 15:12)   письмо автору
 
   для: Andrej   (27.05.2005 в 11:27)
 

>это решается таким образом
Я имел ввиду, что это значение зависит от числа ячеек. Будет их 5 - ширина будет уже 20%.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования