Резиновое меню из картинок и текста

eg0zer0 · November 8, 2012

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

Подскажите, пожалуйста, как красиво реализовать подобное меню? При изменении ширины окна блоки из картинок+текста должны "скользить" по градиентной полоске.

Весь день мучаюсь, пытаюсь делать на div'ах, но резиново не выходит. Заранее спасибо!

logicface · November 9, 2012

Если я о том подумал, то сделай картинку шириной в 1 пиксель и высотой сколько надо из градиента и задай его как bg-img для пунктов меню и все

rikimaru2013 · November 9, 2012

http://cssdesk.com/wKHnU

<!doctype html>
<html lang="ru">
  <head>
		<meta charset="utf-8" />
		<title>test</title>
		</head>
<style>
body {
  margin:0; padding:0;
}

#poloska {
 width:100%;
 height:61px;
 background:url(http://img841.imageshack.us/img841/8370/86804422.png);
 margin-top:100px;
 }
#center {   
margin: 0 auto;
position:relative;
width:100%;
}
.float {height: 61px; width:180px;text-align:center; text-decoration:underline;position:absolute;top:10px;}
.float img {position:absolute; top:-18px; left:-70px;"}
</style>

<body>
<div id="poloska">
  <div id="center">
    <div class="float" style="left:17%;"><img src="http://img835.imageshack.us/img835/1702/79386248.png"
 width="60" height="80" >Посмотреть расписание ближайщих семинаров</div>
    <div class="float" style="left:47%;"><img src="http://img835.imageshack.us/img835/1702/79386248.png" 
width="60" height="80" >Скачать план семинаров на 2013 год</div>
    <div class="float" style="left:77%;"><img src="http://img835.imageshack.us/img835/1702/79386248.png" 
width="60" height="80" >Записаться на семинар</div>
  </div>
</div>

<script>

</script>
</body>
</html>

Вот быстренько сделал образец. Думаю смысл понял. Если понадобятся break-point'ы используй:

 @media only screen and (max-width){}

:blush:

eg0zer0 · November 9, 2012

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

Sensei · November 9, 2012

Так? http://jsfiddle.net/sensei/vA7gq/3/

подробное решение тут http://css-live.ru/articles-css/ravnomernoe-vyravnivanie-blokov-po-shirine.html

Edited November 9, 2012 by Sensei

eg0zer0 · November 9, 2012

Выглядит отлично. Большое спасибо, попробую!

eg0zer0 · November 19, 2012

Уважаемые rikimaru2013 и Sensei! ))

Спасибо огромное обоим - оба варианта 100% рабочие, даже не знаю, какой оставить )

Sign In

Резиновое меню из картинок и текста

Question

eg0zer0

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

logicface

Link to comment

Share on other sites

rikimaru2013

Link to comment

Share on other sites

eg0zer0

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

eg0zer0

Link to comment

Share on other sites

eg0zer0

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information