Jump to content
  • 0

Цена по правому краю

d0ublezer0

Asked by d0ublezer0,

 Share

Question

d0ublezer0 Explorer

d0ublezer0

Posted
Posted

Как ни крутил, никак не придумаю, как сделать.

Есть список услуг, нужно прицепить цены к правому краю, и промежуток заполнить чем-либо.

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

Как добиться такого эффекта:

tabs.jpg

Возможно ли вообще?

Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0
rus Explorer

rus

Posted
Posted
Как ни крутил, никак не придумаю, как сделать.

Есть список услуг, нужно прицепить цены к правому краю, и промежуток заполнить чем-либо.

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

Как добиться такого эффекта:

tabs.jpg

Возможно ли вообще?

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

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Как ни крутил, никак не придумаю, как сделать.

Есть список услуг, нужно прицепить цены к правому краю, и промежуток заполнить чем-либо.

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

Как добиться такого эффекта:

tabs.jpg

Возможно ли вообще?

Можно, делается так: В блок, с пунктирно полоской (например бордер или бекраунд) кладутся 2 эелемента, например спаны, обоим даешь белый бекграунд и дисплей блок. Теперь первому надо дать нижний паддин (на ширину пунктира) и соответст. отриц. маргин. Второму спану (с ценой) надо добавить флоат:райт. И можеть опять же паддинг и маргин.

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted (edited) 

<p style="border-bottom:1px dotted #000; display:block;">
		  <span style="display:block; background:#fff;">Письменная консультация  1 стр.
		<span style="display:block; background:#fff; float:right;">от 500</span>
		</span>
</p>

не получается.

если первому спану сделать margin-bottom: -1px, то он целиком закроет второй спан

А если не делать вложенность спанов, то спан с ценой получается ниже, чем спан с текстом

Edited by d0ublezer0
Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted 
<p style="border-bottom:1px dotted #000; display:block;">
		  <span style="display:block; background:#fff;">Письменная консультация  1 стр.
		<span style="display:block; background:#fff; float:right;">от 500</span>
		</span>
</p>

не получается.

если первому спану сделать margin-bottom: -1px, то он целиком закроет второй спан

А если не делать вложенность спанов, то спан с ценой получается ниже, чем спан с текстом

И не получится, делай списками, как в по ссылке что я тебе привел.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

d0ublezer0

На вот лови, моя личная разработка такого варианта, пуленепробиваемый наглухо, и конечноже полный кросс, как ты любишь :rolleyes:

<!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>

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
d0ublezer0

На вот лови, моя личная разработка такого варианта, пуленепробиваемый наглухо, и конечноже полный кросс, как ты любишь :rolleyes:

Ну или так, да. Можно чуток проще, но для начала самое оно.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Ну или так, да. Можно чуток проще, но для начала самое оно.

Да нее, дело не в простоте, просто этот вариант действительно прочный, я его тестил безбожно везде, а потом конеш можно Див например убрать, это я для красоты :rolleyes:

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
Макс, объясни пожалуйста, что значит тире и точка в записи:

-.5em;

а это сокращённая запись, тоже самое что и 0.5, просто в таком случае 0 писать необязательно , а тире - это знак минуса, тоесть отрицательный отступ:rolleyes:

p.s. - эту штуку спецом я просёк что надо делать именно на ЕМ, чтобы масштабировалось отлично при любых раскладах, опятьже для непробиваемости в самый раз тут :unsure:

Edited by psywalker
Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted
а это сокращённая запись, тоже самое что и 0.5, просто в таком случае 0 писать необязательно , а тире - это знак минуса, тоесть отрицательный отступ:rolleyes:

p.s. - эту штуку спецом я просёк что надо делать именно на ЕМ, чтобы масштабировалось отлично при любых раскладах, опятьже для непробиваемости в самый раз тут :unsure:

Думаю для резиновости этот вариант уже не прокатит.

Link to comment
Share on other sites
  • 0
d0ublezer0 Explorer

d0ublezer0

Posted
  • Author
Posted

Пришлось немного подправить под себя

нормально вроде получилось:

http://denver.transmagistral.ru/services/

Теперь возник вопрос о знаке рубля.

Создам новую тему, чтобы не мешать одно с другим.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Ты маньяк, однако :)

Спасибо за решение.

Да, кстати, "резинку" держит нормально.

Да не за что, с кем не бывает :)

Пришлось немного подправить под себя

нормально вроде получилось:

http://denver.transmagistral.ru/services/

Теперь возник вопрос о знаке рубля.

Создам новую тему, чтобы не мешать одно с другим.

Да, получилось классно, сразу чувствуется - делал профессионал :)

Link to comment
Share on other sites
  • 0
LunatiK Explorer

LunatiK

Posted
Posted
"Грешно смеяться над больными людьми" (с) откуда-то

:)

(с) К/Ф Кавказская пленница. Сцена в дурдоме, когда Шурик предлагал сообразить на троих

Классику надо знать.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept