Помогите с меню

GRstr · August 9, 2011

Добрый день. Помогите с меню пожалуйста, мне надо сделать такое меню (условно 200px), чтобы после того, как заканчивается текст шли точки и >>> (рисунком), это выложен фрагмент из псд файла. никак не могу сделать, получается либо все подчеркивается, либо только на сам текст, а мне надо как на рисунке. Заранее спасибо!

psywalker · August 9, 2011

Смотри. Сам текст засовываешь сначала в спан, а этот спан в див, этому диву нижний пунктирный бордер. Спану делаешь цвет основного фона и допустим релативом сдвигаешь его вниз, прям на бордер дива. Чуешь, куда ветер дует?

Softlink · August 9, 2011

а я бы в фон засунул все. Ибо там стрелка все равно рисованная. И также перекрыл бы все элементом с текстом.

psywalker · August 9, 2011

а я бы в фон засунул все. Ибо там стрелка все равно рисованная. И также перекрыл бы все элементом с текстом.

А если при этом текста будет больше, чем строка, тогда что скажешь?

Softlink · August 9, 2011

а я бы в фон засунул все. Ибо там стрелка все равно рисованная. И также перекрыл бы все элементом с текстом.
А если при этом текста будет больше, чем строка, тогда что скажешь?

фикс ширина и паддинг справа

rus · August 9, 2011

вот тут Макс как-то мне помог что-то подобное сделать: http://arthouse-2008.ru/uslugiceny/63.html

psywalker · August 9, 2011

Вот мой кросс вариант. На мой взгляд самый правильный и универсальный.

<!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">
    *{ margin: 0; padding: 0;}
	body { font: bold .625em Tahoma, Geneva, sans-serif; margin: 2em;}

	   ul{
		 width: 30em;
	     background: #eff2df; 
		 list-style: none; 
		 padding: 2em;
		 position: relative;
		 left: -.3em;
		 top: -.3em;
	}
	     li { zoom: 1; position: relative; border-bottom: .1em dotted #F00; padding-right: 10em;}
		   li b { padding-right: .5em; position: relative; bottom: -.5em; left: 0; background: #eff2df;}
		   li span { 
		         position: absolute; 
				 right: 0; 
				 bottom: -.5em;
				 background: #eff2df;
				 padding-left: .5em;
		}

		div { background: #809900; width: 34em;}
 </style>
</head>

<body>
<div>
 <ul>
    <li>

       <span>Цена длинная</span>
       <b>Хм, Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их </b>
    </li>
    <li>
       <span>Цена длинная</span>
       <b>Хм, ХмХм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их , посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без л и ш н их посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
    </li>

        <li>
       <span>Цена длинная</span>
       <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
    </li>
    <li>
       <span>Цена длинная</span>
       <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>

    </li>
        <li>
       <span>Цена  длинная</span>
       <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
    </li>
    <li>
       <span>Цена длинная</span>

       <b>Хм, посмотрел, покрутил в голове идеи и решил написать своё. Получилось, конечно, похоже, но без лишних </b>
    </li>
 </ul>
</div>
</body>
</html>

Shugich · August 9, 2011

Вот так можно попробовать:

<!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" xml:lang="en" lang="en"> 
  <head> 
  <title>Содержание</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <style type="text/css">
  ol { 
  list-style: none; /* Убираем цифры в ol */ 
  overflow: hidden; /* Предотвращаем схлапывание li */ 
  margin: 10px; /* Отступы от краев родителя */ 
  } 
  li { 
  border-bottom: 1px dotted #ccc; /* Устанавливаем линию идущую от названия до цифры */ 
  float: right; /* Предотвращаем схлопывание блоков */ 
  width: 100%; /* Растягиванием на всю ширину */ 
  } 
  .name { 
  float: left; /* Выравниванием по левому краю */ 
  background: #fff; /* Прячем бордер цветом фона */ 
  position: relative; /* Относительно позиционируем, чтобы опустить до бордера */ 
  bottom: -2px; /* Опускам текст на уровень бордера */ 
  padding-right: 5px; /* Предотвращаем соприкосновение бордера и текста */ 
  } 
  .quantity { 
  float: right; /* Выравниванием по правому краю */ 
  background: #fff; /* Прячем бордер цветом фона */ 
  position: relative; /* Относительно позиционируем, чтобы опустить до бордера */ 
  bottom: -3px; /* Опускам текст на уровень бордера */ 
  padding-left: 5px; /* Предотвращаем соприкосновение бордера и текста */ 
  } 
  </style> 
  </head> 
  <body> 
  <ol> 
  <li> 
  <div class="name"><a href="#">SEO & Оптимизация</a></div> 
  <div class="quantity">2</div> 
  </li> 
  <li> 
  <div class="name"><a href="#">Деньги & заработок</a></div> 
  <div class="quantity">9</div> 
  </li> 
  <li> 
  <div class="name"><a href="#">Мои проекты</a></div> 
  <div class="quantity">24</div> 
  </li> 
  <li> 
  <div class="name"><a href="#">Все о uCoz</a></div> 
  <div class="quantity">21</div> 
  </li> 
  </ol> 
  </body> 
</html>

Писал когда-то для какого-то проекта, но суть та же.

Sign In

Помогите с меню

Question

GRstr

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Shugich

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information