Помогите с вёрсткой менюшки плз

[Удален]

17 ноября 2009, 15:25

761

Здравстуйте1

Ну так вроде бы и не сложно тут, но я хочу выполнить грамотное решение..

В общем у меня есть менюшка оттакая:

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

Решил сделать как бы в 2 столбика - в первом сами менюшки, а во втором появляется сам цветочек.. нашёл от такое решение:

<ul class='navbar'>

	<li src="" alt="" onmouseover="document.getElementById('flower').src='images/flw.gif';"><a href='/'>МАССАЖ ГОЛОВЫ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower2').src='images/flw.gif';"><a href='/'>КЛАССИЧЕСКИЙ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower3').src='images/flw.gif';"><a href='/'>ОБЩИЙ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower4').src='images/flw.gif';"><a href='/'>ТОЧЕЧНЫЙ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower5').src='images/flw.gif';"><a href='/'>АНТИЦЕЛЛЮЛИТНЫЙ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower6').src='images/flw.gif';"><a href='/'>СПОРТИВНЫЙ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower7').src='images/flw.gif';"><a href='/'>БРА-ПРОЦЕДУРЫ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower8').src='images/flw.gif';"><a href='/'>ЭРОТИЧЕСКИЙ</a></li>

	<li src="" alt="" onmouseover="document.getElementById('flower9').src='images/flw.gif';"><a href='/'>ТАЙСКИЙ</a></li>

</ul>

</div>

<div id='flw'>

	<div style='height:23px; margin:-3px 0 0 0'><img id="flower" alt="" title=""/></div>

	<div style='height:23px; margin:4px 0 0 0'><img id="flower2" alt="" title=""/></div>

	<div style='height:23px; margin:4px 0 0 0'><img id="flower3" alt="" title=""/></div>

	<div style='height:23px; margin:4px 0 0 0'><img id="flower4" alt="" title=""/></div>

	<div style='height:23px; margin:4px 0 0 0'><img id="flower5" alt="" title=""/></div>

	<div style='height:23px; margin:4px 0 0 0'><img id="flower6" alt="" title=""/></div>

	<div style='height:23px; margin:4px 0 0 0'><img id="flower7" alt="" title=""/></div>

</div>

воот, коряво всё конечно - пока для меня результат важен.. так вот вторая часть рисунка появляется, но не исчезает (оно и понятно - с чего бы это)..

Вот так вот коряво:

Подскажите пожалста ,чего подправить, дописать или переделать вовсе здесь можно?

78

Кофейник

17 ноября 2009, 15:53

#1

Тааак... ну MrBernz, спасибо тебе, подогнал интересную задачку, почаще бы так. :)

Вот пока только так решить смог: http://kg-am.com/test.html

Вообще после работы ещё обязательно подумаю как бы по красивее такое наверстать. :)

Вот код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<style type="text/css">
ul{width:400px;list-style:none;}
a{color:#8b8b8b;text-decoration:none;}
li{padding:2px 15px;margin:30px;
position:relative;}
li:hover{background:#fd97a4;}
li:hover a{color:#fff;}
li div{background:url(flower.png) no-repeat;
height:52px;width:0px;
position:absolute;right:0;top:-12px;}
li:hover div{width:55px;}
</style>
</head>
<body>
<ul>
<li><a href="#">List item 1</a><div></div></li>
<li><a href="#">List item 2</a><div></div></li>
<li><a href="#">List item 3</a><div></div></li>
</ul>
</body>
</html>

Кофейник добавил 17.11.2009 в 18:55

Выложи если не трудно этот цветочек в .png с прозрачным фоном. ;)

http://immater1um.livejournal.com/ (http://immater1um.livejournal.com/)

[Удален]

17 ноября 2009, 16:02

#2

Интересно весьма, но здесь - сами видете - расстояние всего 23пх, а цветок раза в 2 больше..

цветок в пнг вложил

png flwpng.png

78

Кофейник

17 ноября 2009, 16:36

#3

Ну вот камрад: http://kg-am.com/test.html

Тут всё должно как надо работать. :)

Для ИЕ6 сам костыли поставишь или помочь? ;)

Код на всякий:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Тест</title>
<style type="text/css">
ul{width:400px;list-style:none;}
li{
height:23px;
margin:15px 0 15px 0;
position:relative;}
a{color:#b8b8b8;text-decoration:none;
margin-left:15px;}

div{background:url(flower.png) no-repeat;
width:0;height:63px;
position:absolute;
top:-21px;right:0;}

li:hover{background:#fc97a3;}

li:hover div{width:67px;}

li:hover a{color:#fff;}
</style>
</head>
<body>
<ul>
<li><a href="#">List item 1</a><div></div></li>
<li><a href="#">List item 2</a><div></div></li>
<li><a href="#">List item 3</a><div></div></li>
<li><a href="#">List item 4</a><div></div></li>
<li><a href="#">List item 5</a><div></div></li>
<li><a href="#">List item 6</a><div></div></li>
</ul>
</body>
</html>

[Удален]

17 ноября 2009, 17:27

#4

Кофейник:
Ну вот камрад: http://kg-am.com/test.html
Для ИЕ6 сам костыли поставишь или помочь? ;)

гмм, даж не знаю пока, у уж если не разберусь, то отпишусь вам!

Пасибо за помощь! засяду за експерименты в скором..

[Удален]

17 ноября 2009, 17:55

#5

Кофейник, интересно если этот хтмл воткнуть в реальный макет, то сколько всего поедет? :)

[Удален]

17 ноября 2009, 18:05

#6

bearman, тык я ж слизывать и не собираюсь - мне идея нужна была, а дальше w; попытаюсь воткнуть, мож получитса

15

ein

17 ноября 2009, 18:17

#7

MrBernz, попробуй сделать так:

li {padding:0px;margin:0px;position:relative;}

li span {padding:0px;margin:0px;position:absolute; left:100px; top:10px;background-image url(сцылка на цветочек);width:ширина;height:высота;}

Пример:

<li>сцылка<span></span></li>

Пробуй c hover'ом

... метод 100%...

Лучший развлекательный конверт (http://bodyclick.net/?r=12264)

78

Кофейник

17 ноября 2009, 18:36

#8

bearman:
Кофейник, интересно если этот хтмл воткнуть в реальный макет, то сколько всего поедет? :)

Воткните и посмотрите. Я этот код для примера написал, а дальше под себя подгоняйте.

При вёрстке реального макета я бы лучше с крыши прыгнул чем ul ширину задавать.

[Удален]

18 ноября 2009, 02:31

#9

Всем большое спасибо за помощь!

Вот так сделал в итоге:

это в шаблоне

<ul class='navbar'>

	<li><a href='/'>МАССАЖ ГОЛОВЫ</a><span></span></li>

	<li><a href='/'>КЛАССИЧЕСКИЙ</a><span></span></li>

	<li><a href='/'>ОБЩИЙ</a><span></span></li>

	<li><a href='/'>ТОЧЕЧНЫЙ</a><span></span></li>

	<li><a href='/'>АНТИЦЕЛЛЮЛИТНЫЙ</a><span></span></li>

	<li><a href='/'>СПОРТИВНЫЙ</a><span></span></li>

	<li><a href='/'>БРА-ПРОЦЕДУРЫ</a><span></span></li>

	<li><a href='/'>ЭРОТИЧЕСКИЙ</a><span></span></li>

	<li><a href='/'>ТАЙСКИЙ</a><span></span></li>

</ul>

это в css

	.navbar { width: 260px; margin:10px 0 2px 0; height:240px; border-bottom:2px solid #ececec}

	.navbar li a{

		text-align:left;

		width: 180px;

		height: 23px;

		padding: 4px 0 0 20px;

		margin: 0;

		color: #555;

		font-size: 12px;

		color:#8d8d8d;

		display: inline-block;

		background: url(../images/menubg.gif) no-repeat;

		position:relative; 

	}

	.navbar li a:hover { background: url(../images/menubg-on.gif) no-repeat; color:#fff }

	.navbar li:hover span { width:63px; margin-top:-13px}

	.navbar span{padding:0px; margin:0px;  background:url(../images/flw.gif) no-repeat; width:0; height:63px; position:absolute}

Если ошибки есть - ткните пожалста? =)

Вот скрин:

Для ИЕ6 сам костыли поставишь или помочь?

Всё ж можно помочь, ие вообще на всё забил..

168

dma84

18 ноября 2009, 06:37

#10

А <span></span> тут нафиг не нужен.

В 2023 году Google заблокировал более 170 млн фальшивых отзывов на Картах

Все что нужно знать о DDоS-атаках грамотному менеджеру