Форум Сайтостроение Веб-строительство

Нужна помощь в верстке

chemax
На сайте с 07.01.2009
Offline
206
chemax
545

Добрый день, уважаемые.

Нужно сверстать менюшку как тут

http://www.barklinch.ru/menu/

Все вроде бы легко и просто, пока не появляется ОН, фоновой рисунок=)

Концепция той менюшки такова, фоновым рисунком идут точки, и просто слои с названием и ценой заливаются цветом под стать фону=) С фоновым так просто не отделаешься, вот и сижу туплю=(

Если все таки малой кровью не обойтись, накидайте плиз менюшек красиво оформленных=)

Качественный хостинг, VPS и сервера. (http://ihc.ru/?ref=569)
S5
На сайте с 04.01.2010
Offline
77
sg552
#1

z-index позволяет определить порядок отображения элементов(слоев) на странице, сделайте всему з-индекс 1, этого будет достаточно

chemax
На сайте с 07.01.2009
Offline
206
chemax
#2
sg552:
z-index позволяет определить порядок отображения элементов(слоев) на странице, сделайте всему з-индекс 1, этого будет достаточно

не то, или не совсем понял.


<div class="line_dots">
     <div class="name_food">Закуска «Посейдон»<span class="ingridients">{рулетики из баклажан с начинкой из «Фета», креветок и кедрового ореха} 200/10</span></div>
     <div class="price">210 руб.</div>
    <div style="clear:both;"></div>
</div>


.line_dots{
	background:transparent url(images/dot.png) repeat-x scroll 0% 2px;
	height:17px;
	margin-top:20px;
	width:100%;
}
.name_food{
	background:#fff;
	color:#5f5f5f;
	font-style:italic;
	font-size:12px;
	float:left;
	position:relative;
	padding-right:3px;
	margin-top:-5px;
	height:12px;
}
.price{
	background:#fff;
	color:#5f5f5f;
	font-style:italic;
	font-size:12px;
	float:right;
	position:relative;
	margin-top:-5px;
	height:12px;
	padding-left:3px;
}
.ingridients{
	color:#b1b1b1;
	display:block;
	position:absolute;
	left:0px;
	top:14px;
	width:644px;
}

основной слой точками, а цена и название заполнены цветом, который перекрывает точки. а если у нас подложкой сайта является картинка, то перекрывание становятся пятнами. убираем цвет и под ценой и названием появляются точки=)

пока пришла идея сделать резину и запихнуть это все в скрипты=)

В Конструкторе Яндекс.Карт появилась Google представил бесплатную версию В конструкторе Директа появилась
S5
На сайте с 04.01.2010
Offline
77
sg552
#3

Я понял о чем Вы. Чесно говоря в голову приходит только js =(

---------- Добавлено 17.04.2012 в 19:28 ----------

Появилась мысль, думаю суть уловите

<html>
<head>
<style type="text/css">
.line_dots{
background:transparent url("http://www.barklinch.ru/wp-content/themes/klynch/images/dot.png") repeat-x scroll 0% 2px;
height:17px;
margin-top:20px;
width:100%;
}
.name_food{
background:#fff;
color:#5f5f5f;
font-style:italic;
font-size:12px;
float:left;
position:relative;
padding-right:3px;
margin-top:-5px;
height:12px;
}
.price{
background:#fff;
color:#5f5f5f;
font-style:italic;
font-size:12px;
float:right;
position:relative;
margin-top:-5px;
height:12px;
padding-left:3px;
}
.ingridients{
color:#b1b1b1;
display:block;
position:absolute;
left:0px;
top:14px;
width:644px;
}
</style>
</head>

<body style="background: gray;">
<table width="100%"><tbody><tr>
<td style="float:left; white-space:nowrap;"><div>ТаблЫца 1</div></td>
<td style="width:100%;">ТаблЫца 1</td>
<td style="float:right; white-space:nowrap;">Стоимость 100500 рэ</td>
</tr></tbody></table>
</body>
</html>
chemax
На сайте с 07.01.2009
Offline
206
chemax
#4
sg552:
Я понял о чем Вы. Чесно говоря в голову приходит только js =(

---------- Добавлено 17.04.2012 в 19:28 ----------

Появилась мысль, думаю суть уловите

Спасибо, завтра с утра попробую) У меня почему то на таблицах не заработало как надо)

S5
На сайте с 04.01.2010
Offline
77
sg552
#5

white-space:nowrap;

дабы не переносились строки, и все будет в ажуре

chemax
На сайте с 07.01.2009
Offline
206
chemax
#6
sg552:
white-space:nowrap;
дабы не переносились строки, и все будет в ажуре

Работает все хорошо=) Спасибо большое=)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий