Границы label'а (вкладок) не совпадают со ссылкой на них

голоса: 0

Не могу понять, в чём причина:

Если на вкладку навести курсор мыши и сместить чуток в сторону, то несмотря на то, что курсор будет ещё находиться на этой вкладке, "ховером" становится уже соседняя с ней вкладка. Как исправить? Думал, конфликт JS, но ничего не нашёл...

Адрес сайта http://mkou7.ucoz.org/
| Автор: | Категория: Дизайн сайта

Ответов: 2

Голоса: +1
 
Лучший ответ

Смотрите:

Структура вкладок такова, что <input>, котрые являются кнопками переключения, имеют фиксированную ширину, которая в общем случае не совпадает с шириной <label> - контейнера, на котором написан текст. Отсюда идет сдвиг и чем дальше, тем больше.

Одним из решений может быть установить на ваш браузер интсруемнт разработчика (на Хроме он встроенный, а в FF - это Firebug) и "на лету" подобрать нужную ширину каждого инпута, потом записать это все в css

| Автор:
Выбор ответа лучшим | | Автор: МКОУ Таежнинская СОШ № 7 Богуч
Голоса: +1

Что-то у вас там намудрено... Значит смотрите, вам надо внести правки в таблицу стилей. Нужно зайти в файловый менеджер в папку CSS и открыть на редактирование файл стилей style2.css

Далее ищем такой код:

.tabs input#tab-2{
	left: 120px;
}
.tabs input#tab-3{
	left: 240px;
}
.tabs input#tab-4{
	left: 360px;
}

и меняем его на

.tabs input#tab-1 {
    width: 135px;
}
.tabs input#tab-2 {
    left: 135px;
    width: 160px;
}
.tabs input#tab-3 {
    left: 295px;
    width: 160px;
}
.tabs input#tab-4 {
    left: 455px;
}

Сохранить.

| Автор:
...