VDS за 300р от нашего партнера SpaceWeb
[1]
07 Мар 2013, 20:39

Цветовое выделения пункта меню выходит за пределы талицы.

Помогите сделать так чтобы выделение пункта при наведение не выходило за пределы таблицы.

Комментарии (18)
telescop 07.03.2013 20:45

Очень сложно судить о проблеме без кода.

По всей видимости элемент списка шире своего родителя. Нужно либо элемент подогнать, либо родительскому блоку разрешить поглощать всё что в него не влезает.

Например CSS: overflow: hidden
+2
Carter 07.03.2013 20:51

#me {
text-decoration: none;
color: #000000;
position: center;
display: inline-block;
padding-left: 77px;
padding-right: 77px;
padding-bottom: 6px;
padding-top: 6px;
white-space: nowrap;
overflow: inherit;
}
#me:hover {
color: #F0F0F0;
background-color: #B0B0B0;
white-space: nowrap;
overflow: inherit;
}
+3
Carter 07.03.2013 20:54

Вот код, как я понимаю последний пункт должен централизоваться.
+2
telescop 07.03.2013 20:58

Так padding это отступ от краем внутри элемента и он влияет на его размер в зависимости от содержимого.

padding-right: 77px; удалите и display: block; сделайте, что бы растянуть за 100% родителя.
+3
Carter 07.03.2013 21:03

Вроде все решилось, я добавил
width: 77px;
к тому коду что я выложил, только не централизуется, что делать?
+2
telescop 07.03.2013 21:08

position: center; нет такого, есть text-align: center;

Не советую задавать размер элементам меню, они должны сами растягиваться, либо размер должен быть задан точно, с учетом отступов, рамок и т.д.
+3
Carter 07.03.2013 21:12

Все равно даже с text-align: center; не централизуется, текст как бы накладывается на padding-right: 77px;.

Иначе пока что не получается..
+3
zzoll 07.03.2013 21:24

Учите HTML и CSS, это элементарная задача, а у вас с самого начала не правильный подход.
0
Carter 07.03.2013 21:29

Именно сейчас нужно выкрутиться иэ ЭТОЙ ситуации.
+3
zzoll 07.03.2013 21:38

HTML код покажите. Не весь, а контейнера с элементами списка.
+3
Carter 07.03.2013 21:42

<td id="leftcol" height="550"><center>
<a href="http://google.com" id="me">Категория 01</a><br>
<a href="http://google.com" id="me">Категория 02</a><br>
<a href="http://google.com" id="me">Категория 03, text</a><br>
</center></td>
+2
zzoll 07.03.2013 21:51

<td id="leftcol" height="550">
<a href="http://google.com" class="me">Категория 01</a><br>
<a href="http://google.com" class="me">Категория 02</a><br>
<a href="http://google.com" class="me">Категория 03, text</a><br>
</td>

.me {
text-decoration: none;
color: #000000;
display: block;
padding: 6px 0px 6px 77px ;
white-space: nowrap;
}

.me:hover {
color: #F0F0F0;
background: #B0B0B0;
white-space: nowrap;
}

Ценный совет, не использовать табличную верстку и стили задаются class'ами а не id.

ID на страницы должен быть только один!
+2
Carter 07.03.2013 22:05

Это ясно. Но проблема с центрированием все еще актуальна.
+3
zzoll 07.03.2013 22:12

Не понятно, что вам нужно. Понятно же, что элемент меньше чем его содержимое. Это задано вашей же разметкой. Зачем тогда падинги были сделаны? Ну тогда так... но это не кашерно всё.

.me {
text-decoration: none;
text-align: center;
color: #000000;
display: block;
padding: 6px 0px 6px 0px ;
}

.me:hover {
color: #F0F0F0;
background: #B0B0B0;
}
+2
Carter 07.03.2013 22:19

Оп, это уже хорошо! Только отступы вылики, как их уменьшить?
+3
Carter 07.03.2013 22:20

Отсутпы между пунктами.
+3
Carter 07.03.2013 22:26

Разобрался, убрал <br>. Большое спасибо!
+1
grom 07.03.2013 22:27

Убрать теги <br> у пунктов. И юзать padding: 6px 0px 6px 0px; увеливая или уменьшая пиксели.
0

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 14673]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 10310]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 9664]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 9185]
[125]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 7482]
[315]
11 Авг 2011, 00:21
Спецификация HTML5 от W3C
[просмотров 7371]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 5366]

Вести с Хабра