[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: селектор по значению артибута div[id="lselect"]
Форум PHP программистов > Дизайн и верстка
Степан
3.11.2009 - 10:22
Доброго всем времени суток. Помогите, пожалуйста, сделать меню для сайта. А точнее исправить ошибку. bg_menu1.png-фоновая картинка, изображающая рамку вокруг пунктов меню, bg_menu_separator.png- черта между пунктами меню, bg_menu_.png-верхушка рамки, bg_menu_over.png - подсветка выбранного пункта. CSS:
HTML
div[id="lselect"]>ul { background: url(bg_menu1.png) center bottom no-repeat; }

#lselect li {
font-size: 9px;
color: #8B8C8C;
padding: 8px 18px;
list-style-type: none;
}


div[id="lselect"]>ul>li {padding-top: 5px; background: url(bg_menu_separator.png) center no-repeat; }


div[id="lselect"]>ul>li:first-child { padding-top: 5px; background: url(bg_menu_.png) center no-repeat; }
#lselect li:hover { background: url(bg_menu_over.png) center no-repeat; }



После выполнения кода центруется только bg_menu1.png. Остальные картинки ведут отчет от левого края экрана. Почему так происходит? Где я сделал ошибку?




Спустя 2 дня, 57 минут, 11 секунд (5.11.2009 - 10:19) Степан написал(а):
unsure.gif

Спустя 17 минут, 23 секунды (5.11.2009 - 10:36) glock18 написал(а):
Степан
вааау, css3 селекторы. и где это уже работает?

div[id="lselect"] => div#lselect

> ul > li => ишак не знает этого >

url(bg_menu_separator.png) center no-repeat;
=>
url(bg_menu_separator.png) top left no-repeat;
+ margin-left: 0; padding-left: 0;

Спустя 36 минут, 40 секунд (5.11.2009 - 11:13) Степан написал(а):
+ margin-left: 0; padding-left: 0; никакого действия не оказывает; top left - сдвигает раделительные линии выше, но не по горизонтали

Спустя 7 минут, 12 секунд (5.11.2009 - 11:20) glock18 написал(а):
HTML
#lselect li {
font-size: 9px;
color: #8B8C8C;
padding: 8px 18px;
list-style-type: none;
}


а здесь паддинг левый кто убирать будет?

Спустя 27 минут, 11 секунд (5.11.2009 - 11:47) Степан написал(а):
убрал, не помогает

Спустя 7 минут, 28 секунд (5.11.2009 - 11:55) glock18 написал(а):
ну прям чудеса smile.gif
кинь сюда html и css разом. чтоб воткнуть в страницу и посмотреть.

Спустя 3 минуты, 51 секунда (5.11.2009 - 11:58) Степан написал(а):
всмысле файлы? или просто текст?

Спустя 1 минута, 6 секунд (5.11.2009 - 12:00) glock18 написал(а):
текстом. чтобы копипастнул просто и посмотрел

Спустя 55 секунд (5.11.2009 - 12:00) Степан написал(а):
CSS^
HTML
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(line.gif);
background-repeat: repeat-x;
}
p {
text-align: justify;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 11px;
line-height: 17px;
margin-top: 0;
color: #707070;
}
a {
font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, arial, verdana, sans-serif;
font-size: 12px;
list-style-type: circle;
color: #444;
}
a:visited {
font-size: 13px;
color: #444;
text-decoration: none;
font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, arial, verdana, sans-serif;
}
h6 {
}

h4 {
font-family: "Minion Pro";
font-size: 18px;
font-style: normal;
}
h5 {
font-family: "Times New Roman", Times, serif;
font-size: 10px;
font-style: italic;
text-align: center;
}

h6 {
font-size: 13px;
color: #444;
text-decoration: none;
font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, arial, verdana, sans-serif;
text-align: center;
}
.color {
color: #FF0000;
font-size: 10px;
}



a:hover {
color: #A51A0A;
font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, arial, verdana, sans-serif;
}
.reg {
text-align: right;
font-family: "Times New Roman", Times, serif;
font-size: 10px;
line-height: 17px;
margin-top: 0px;
color: #000000;
}
h3 {
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-style: italic;
}





/**/
div[id="lselect"]>ul { background: url(bg_menu1.png) center bottom no-repeat; }
/**/
#lselect li {
font-size: 9px;
color: #8B8C8C;

padding: 8px;
list-style-type: none;
}

/**/
div[id="lselect"]>ul>li {padding-top: 5px; background: url(bg_menu_separator.png) top left no-repeat; + margin-left: 0; padding-left: 0;}


div[id="lselect"]>ul>li:first-child { padding-top: 5px; background: url(bg_menu_.png) no-repeat; }
#lselect li:hover { background: url(bg_menu_over.png) no-repeat; }




/**/

#lselect a { display: block; }
#lselect a.c { display:inline; font-size: 9px; text-transform: lowercase; }

#linkList {
font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, arial, verdana, sans-serif;
font-size: 9px;
}
#linkList a,
#linkList a:link,
#linkList a:visited {
font-size: 12px;
color: #444;
}
#linkList a:hover {
color: #A51A0A;
}

#linkList a.c,
#linkList a.c:link,
#linkList a.c:visited {
color: #8B8C8C;
}
#linkList a.c:hover {
color: #A51A0A;
}
/**/
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
text-align: center;
}
.hallow {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}


Спустя 2 минуты, 58 секунд (5.11.2009 - 12:03) Степан написал(а):
html
HTML
<div id="lselect">
<h3 align="center" class="select"><span>Меню</span></h3>

<ul>
<li><a href="direct.php" title="menu1" accesskey="a">menu1</a> </li>
<li><a href="adv.php" title="menu2" accesskey="b">menu2</a> </li>
<li><a href="co.php" title="menu3" accesskey="c">menu3</a></li>

</ul>
</div>


Спустя 13 минут, 3 секунды (5.11.2009 - 12:16) glock18 написал(а):
давай архив smile.gif мне картинки нужны rolleyes.gif

Спустя 1 час, 12 минут, 25 секунд (5.11.2009 - 13:29) Степан написал(а):
Воть

Спустя 1 час, 7 минут, 46 секунд (5.11.2009 - 14:37) glock18 написал(а):
Посмотрю когда время будет. вечером сегодня наверно. не все кинул только, придется самому восстанавливать.

Спустя 15 минут, 50 секунд (5.11.2009 - 14:52) Степан написал(а):
что еще кинуть?

Спустя 2 часа, 32 минуты, 2 секунды (5.11.2009 - 17:25) SunSet написал(а):
Степан
Деньгами в него пуляй)))

Спустя 3 минуты, 48 секунд (5.11.2009 - 17:28) glock18 написал(а):
SunSet
за что?

Степан, ты кинул не весь хтмл. У меня в хроме все разъехалось, когда просто добавил html, head, body и прочее. То есть разметка не вся, плюс еще может doctype. Время будет посмотрю. Сансета не слушай.

Спустя 9 часов, 57 минут, 30 секунд (6.11.2009 - 03:26) glock18 написал(а):
Степан
1. нельзя одному тегу вешать два бекграунда, как делаешь ты.
2. css3 селекторы поддерживают не все браузеры. даже из новых.
3. непонятно зачем верхнюю часть фона вынес в отдельную картинку, а не слепил с другой частью рамки.
4. вообще все переделай, потому что нарезка и разметка крайне неудачные


вот что я набросал. отступы и размеры подрегулируешь.
/**/
div#lselect ul { background: url(bg_menu1.png) left bottom no-repeat; margin: 0; padding: 0 }
div#lselect {
     background: url(bg_menu_.png) no-repeat;
     padding-top: 4px;
}
/**/
#lselect li {
font-size: 9px;
color: #8B8C8C;
padding: 5px 8px;
margin: 0px;
list-style-type: none;
}

/**/
div#lselect ul li {background: url(bg_menu_separator.png) top left no-repeat;}

div#lselect li:hover { background: url(bg_menu_over.png) left top no-repeat; }


больше ни одного правила со списками быть не должно (их убрать).
<h3 align="center" class="select"><span>Меню</span></h3>
<div id="lselect" style="width: 300px;">
<ul>	
<li><a href="direct.php" title="menu1" accesskey="a">menu1</a> </li>
<li><a href="adv.php" title="menu2" accesskey="b">menu2</a> </li>
<li><a href="co.php" title="menu3" accesskey="c">menu3</a></li>

</ul>
</div>

Спустя 6 часов, 58 минут, 13 секунд (6.11.2009 - 10:24) Степан написал(а):
ок . Благодарю Тебя за помощь. Буду пробовать, и просвещаться дальше в чудесном мире вэб-дизайна

Спустя 8 минут, 24 секунды (6.11.2009 - 10:32) glock18 написал(а):
Степан
уже не надо. я же дал то, что у меня получилось. и сказал что следует еще сделать.

Спустя 12 минут, 55 секунд (6.11.2009 - 10:45) Степан написал(а):
ок . Благодарю Тебя за помощь. Буду пробовать, и просвещаться дальше в чудесном мире вэб-дизайна

Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.