Панель вкладок HTML + CSS

Question

Как очистить горизонтальную панель вкладок HTML + CSS, чтобы на панели вкладок была строка внизу, скрытая или подавленная для активной вкладки?

Другими словами, я пытаюсь сделать то же самое, что StackOverflow делает для своих тегов:

Моя панель вкладок устанавливается как упорядоченный список с

ul 
{ 
    list-style: none; 
} 
li 
{ 
    float: left; 
} 

Update: Я уже ткнул сайты с Firebug, чтобы посмотреть, как они это делают, но я чувствую, что быстро увяз в деталях. Например, версия StackOverflow имеет границу для нижней части всего div (что имеет смысл) и белую рамку для нижней части активной вкладки (что имеет смысл), но затем она делает границу активной вкладки перекрывающей границу div (и я не очень понимаю, как это происходит). Похоже, Twitter Bootstrap делает что-то подобное. Я пытаюсь понять общую концепцию того, как перекрытие части границы контейнера с работами на границе контента вместо копирования и обработки CSS, пока я не получу что-то, что работает.

Answer 1

Все, что вам нужно сделать, это установить нижнюю границу на <ul> (чтобы она растянулась), а затем дать выбранный класс <li> и сделать его высотой более 1 пикселя.

Вот очень простой пример: http://jsfiddle.net/V6gzS/

Answer 2

нормально направить вас в правильном направлении использования Firebug или chromes элемента инспектора и просто выбрать биты вам нужно, так что на этом сайте, например, что вы ищете, называются вкладки и они оформлены как так

#tabs a.youarehere { 
background: #fff; 
border: 1px solid #ccc; 
border-bottom-color: #ffffff; 
color: black; 
font-size: 120%; 
height: 30px; 
line-height: 28px; 
margin-top: 3px; 
padding: 0px 11px 0px 11px; 
} 

это только часть его, но вы можете многое узнать, глядя на код

Answer 3

Как я понимаю, вы способны сделать кнопки самостоятельно, с горизонтальной нижней строке.

Если это так, то убедитесь, что эта горизонтальная линия сделана как свойство border-bottom: solid 1px #CCC на каждой кнопке (цвет может отличаться). На каждой странице вы добавляете id id="current" к той одной кнопке, которая является активной страницей. В CSS вы пишете:

#current { 
    border: solid 1px #CCC; 
    border-bottom: 1px solid white; 
} 

Если у вас есть какие-либо проблемы, это может быть решена путем добавления !important как это:

border-bottom: 1px solid white !important; 

Таким образом, это всего лишь четыре дополнительных строк кода в CSS и один дополнительный HTML атрибут в каждом из файлов.

Если динамическое меню

Если у вас есть меню, которое не статично на каждой странице, но, может быть динамически или помещены в включаемого файла, то выше, будет невозможно. Потому что тогда вы не можете легко добавить новый идентификатор на каждой отдельной странице.

В этом случае вы можете выполнить динамическое добавление атрибута. Если используется серверный язык, например, PHP, тогда вы можете легко настроить команду if{...}, которая проверяет URL-адрес или запрос GET или аналогичный. Кроме того, вы можете использовать некоторые javascript для проверки каждой кнопки и добавления атрибута id, если текст кнопки равен некоторому заголовку на странице.

Надеюсь, вы понимаете. Удачи.

Answer 4

Я сделал это так:

ul { 
    list-style-type:none; 
} 
li{ 
    float: left; 
    border-bottom: 1px solid #CCC; 
} 
li:hover{ 
    float: left; 
    border: solid 1px #CCC; 
    border-bottom:none; 
}