Jump to content
  • 0

Чем заменить ссылку

marrk

Asked by marrk,

 Share

Question

marrk Explorer

marrk

Posted
Posted

Есть у меня код:

Фрагмент HTML:

<ul id="toc">
<li><span>Текст слева</span> <a href="#">текст справа</a><br /></li>
<li><span>Текст слева</span> <a href="#">текст справа</a><br /></li>
<li><span>Текст слева</span> <a href="#">текст справа</a><br /></li>
</ul>

Фрагмент CSS:

ul#toc {list-style:none; padding: 0; margin-left: 2px;}
#toc li a {float:right; background:#FFF; padding: 0 4px 0 0; COLOR: #000000; TEXT-DECORATION:  none}
#toc li span {float:left;background:#FFF; padding 0 0 0 4px;}
#toc li br {clear:both;}

И всё меня устраивает, но в html-коде мне не нужна ссылка <a href="#"> а нужен обычный тест. А чем и как заменить ссылку не знаю так что бы форматирование текста справа сохранилось.

Вопрос: каким элементом или тегом можно заменить ссылку на простой текст?

Link to comment
Share on other sites

18 answers to this question

Recommended Posts

  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Вариантов масса ;)

<em>, <strong>, <b>, <i>, <del>, <ins>, <big>, <dfn>... можно и дальше продолжить ряд, короче любым строчным элементом. Чем не устраивает <span class="right">?

#toc li span.right {float:right; background:#FFF; padding: 0 4px 0 0; COLOR: #000000; TEXT-DECORATION:  none}

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted (edited)

почему таблица то?

<html>
<head>
<style>
ul#toc {
list-style:none;
margin:10px 0;
padding:0;
width:100%;
}
#toc li {
padding-left:20px;
font:bold 14px Verdana;
}
#toc li span {
color:#B2181A;
float:right;
font:bold 14px Verdana;
width:auto;
}
</style>
</head>
<body>
<ul id="toc">
<li><span>текст справа</span> Текст слева</li>
<li><span>текст справа</span> Текст слева</li>
<li><span>текст справа</span> Текст слева</li>
</ul>
</body>
</html>

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

marrk

Posted
  • Author
Posted
Чем не устраивает <span class="right">?

#toc li span.right {float:right; background:#FFF; padding: 0 4px 0 0; COLOR: #000000; TEXT-DECORATION:  none}

Ну я понимаю что вариантов масса, но т.к. нуб в голову ничего не приходит. А вот как раз о <span class="right"> думал, но не знал как в css прописать правильно для такого варианта. Спасибо за подсказку, вечером попробую.

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted (edited)
Имхо, если уж на то пошло, ему логичнее быть таблицей ;)

А чем логичней то?

Разве это не похоже на таблицу?

С таким же успехом можно "прикрутить" логичность и к верстке сайтов на таблицах.

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

rus

Posted
Posted (edited)
А почему нет?

потому что именно этот пример как мне кажется не очень смахивает на таблицу.

Разве это не похоже на таблицу?

если б данных было побольше, и не таких абстрактных, то да, может быть.

а так... - кода меньше и красивее.

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

SelenIT

Posted
Posted
А чем логичней то?

Как минимум, налицо регулярная структура из пар значений. Первое и второе значения каждой пары визуально встраиваются в соотв. столбцы, что наводит на мысли об их логической группировке. Для проверки версии нужны реальные данные ;)

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
А чем логичней то?

А чем не логично?

а так... - кода меньше и красивее.

<ul id="toc">
	<li>
		<span>
			текст справа
		</span>
		Текст слева
	</li>
</ul>

<table>
	<tr>
		<td>
			Текст слева
		</td>
		<td>
			текст справа
		</td>
	</tr>
</table>

Кода больше ровно на один тег.

если б данных было побольше

Т.е. если у вас есть таблица, состоящая из одной строки, то это типа несемантично?

Я согласен, что данные абстрактные, и в конкретном случае может и нужны списки, но с таким же успехом там может быть нужен список определений (<dl>) или таблица.

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Рассказываю, почему именно таблица.

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

Так что таблица тут скорее всего подходит. Хотя я бы наверн сделал списками определений (<dl>), потому-что я лошара.

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
Я согласен, что данные абстрактные, и в конкретном случае может и нужны списки, но с таким же успехом там может быть нужен список определений (<dl>) или таблица.

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

Вот именно, что данные абстрактные. Поэтому вопрос логичней/не логичней в принципе не применим. Любую задачу можно решить множеством способов, тут же никто не спорит. А тут с исходными данными я лично не вижу такой критической необходимости в таблицах. Да и как-то недолюбливаю я их, особенно с учетом ИЕ7 и ниже.

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

Не всё что по виду напоминает таблицу является таблицей по сути. 2 столбика еще не признак таблицы. А будет или не будет залезать, это всё зависит от того как сделать и от конкретной задачи.

Так что таблица тут скорее всего подходит. Хотя я бы наверн сделал списками определений (<dl>), потому-что я лошара.

Да, тоже кстати в последнее время какая-то мания к спискам. Практически везде видятся списки. Наверное это заразно ;)

Link to comment
Share on other sites
  • 0
marrk Explorer

marrk

Posted
  • Author
Posted

Так ребята, не ссоримся. Если бы можно было сделать таблицей я бы давно сделал таблицей сам и не мудился. Нужно было что бы обязательно было на одной строчке, поэтому список dl был неприменим (а может и применим, я не знаю можно в нём сделать на одной строчке или нет).

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Лови дружище, что-то типо того)

<!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; }
	dl { 
		border: 1px solid #000; 
		overflow: hidden;
		 width: 400px; 
		 margin: 0 auto;
	}
		dl dt { float: left; clear: both; width: 49%;}
		dl dd { float: right; width: 49%;}

</style>
</head>

<body>
<dl>
	<dt>Так ребята, не ссоримся</dt>
		<dd>Я всех предупредил</dd>
	<dt>Стреляю без предупреждения</dt>
		<dd>Последний раз говорю</dd>
	<dt>Почему вы меня не слышите?</dt>
		<dd>Эй, я кому говорю?</dd>
</dl>


</body>
</html>

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