Вкладки CSS без полей с использованием изображений
На пользовательских страницах Stack Overflow, где находятся вкладки (Статистика, Недавние, Ответы и т. д.), Создается иллюзия, что вкладки являются продолжением строки, на которой они находятся. Stack Overflow создает этот эффект, определяя чистые границы CSS. Я хочу добиться того же эффекта, но у меня есть изображения как для вкладок, так и для строки, на которой они сидят.
У меня есть коробка со скругленными углами (белый фон, серый контур). Вкладки сверху, того же цвета. У вкладок закругленные верхние углы и нет нижней границы. Вкладки находятся в блоке div перед блоком блока.
Я полагаю, что для достижения вышеупомянутого эффекта язычок должен будет опуститься и покрыть ту часть границы бокса, где они встречаются. Я сделал это в Firefox, но в IE вы все еще можете видеть линию границы поля.
Как вы можете настроить это для работы в обоих браузерах?
Вот мой пример, который работает в FF, но не в IE: http://www.mcrackan.com/recipes/csstest-loggedin.htm
[Фиксированный URL Редактировать:]
Ответы 4
Может быть техника раздвижных дверей может пригодиться
Этот пример работает в Firefox и IE
Ранее я делал нечто подобное, задавая «активному» классу вкладок отрицательное нижнее положение, перемещая его таким образом, чтобы он располагался поверх границы фрейма. Может быть, решение? Например:
<style>
ul.tabs {
border-bottom: 1px solid blue;
height: 20px;
margin: 0;
padding: 0;
list-style-type: none;
}
ul.tabs li {
float: left;
position: relative;
bottom: 5px;
margin: 0;
padding: 0;
}
ul.tabs li img {
float: left;
height: 20px;
width: 50px;
border: none;
}
ul.tabs li.selected {
bottom: -1px;
}
</style>
<ul class = "tabs">
<li><a href = ""><img src = "tab1.gif" /></a></li>
<li class = "selected"><a href = ""><img src = "tab2.gif" /></a></li>
<li><a href = ""><img src = "tab3.gif" /></a></li>
</ul>
Хотя с тех пор я начал кататься самостоятельно, один из примеров, который мне больше всего помог, когда я впервые разобрался с вкладками CSS, был следующий:
http://unraveled.com/projects/css_tabs/
Этот метод относительного позиционирования обычно лучше всего работает для меня.
Удачи!
Этот генератор вкладок может помочь.