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

marrk · November 13, 2010

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

Фрагмент 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="#"> а нужен обычный тест. А чем и как заменить ссылку не знаю так что бы форматирование текста справа сохранилось.

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

rus · November 13, 2010

просто убер <a>, а стили которые были для <a> поставь для <li>.

psywalker · November 13, 2010

 ?

Great Rash · November 13, 2010

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

, , , , <del>, <ins>, <big>, <dfn>... можно и дальше продолжить ряд, короче любым строчным элементом. Чем не устраивает ?

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

SelenIT · November 13, 2010

А что за текст? Может, ему логичнее быть списком определений dl/dt/dd?

Great Rash · November 13, 2010

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

SelenIT · November 13, 2010

Опять же, тоже вариант

psywalker · November 13, 2010

Да кстати, на таблицу смахивает)

rus · November 13, 2010

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

<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 November 13, 2010 by rus

marrk · November 13, 2010

Чем не устраивает ?
#toc li span.right {float:right; background:#FFF; padding: 0 4px 0 0; COLOR: #000000; TEXT-DECORATION: none}

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

Great Rash · November 13, 2010

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

А почему нет?

текст слева		текст справа
текст слева		текст справа
текст слева		текст справа

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

sigma77 · November 13, 2010

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

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

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

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

Edited November 13, 2010 by sigma77

rus · November 13, 2010

А почему нет?

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

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

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

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

Edited November 13, 2010 by rus

SelenIT · November 13, 2010

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

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

Great Rash · November 13, 2010

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

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

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

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

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

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

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

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

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

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

psywalker · November 13, 2010

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

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

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

sigma77 · November 13, 2010

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

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

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

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

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

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

marrk · November 13, 2010

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

psywalker · November 13, 2010

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

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

Sign In

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

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information