CSS - как сделать два куска текста один слева другой справа )))

0

0

Нужен текст вида:

Пледы <пусто>
Одеяла <пусто>
и тд

при наведении мышкой на строку кусок <пусто> должен отображаться,
то есть
Пледы 20шт
Одеяла <пусто>

причём у "20шт" должен быть align=right.
что-то я закопался с css и div'ами. как это сделать?
меня больше интересует даже align=right, visibility-то я знаю как поменять )

Ссылка

←	PerlHandler Apache::Registry и STDOUT

XSLT 2 в PHP 5.x

→

1. Делаем обёртку вокруг «пусто» с display: block; width=какая_нить_ширина; float: left;/*или right, давно не CSSил. можно ещё сбросить margin и padding.*/
2. Делаем для «пусто» display: inline; text-align: right;
3. ???
4. PROFIT!

x3al ★★★★★
(12.10.08 12:40:02 MSD)

Ответ на: комментарий от x3al 12.10.08 12:40:02 MSD

ЗЫ: text-align можно и к обёртке привязать

x3al ★★★★★
(12.10.08 12:41:19 MSD)

Ответ на: комментарий от x3al 12.10.08 12:41:19 MSD

<html>
<style>

A.cat {display: block; background-color: #e0e0e0;}
A.cat span { display: inline; float: right; }
</style>
<body>
<table border="1" align="center" width="300">
<tr>
<td>
<a href="" class="cat">Text<span>20</span></a>
</td>
</tr>
</table>
</body>
</html>

A.cat span { display: inline; float: right; }
На следущей строке рисует а не на той же....

A.cat span { display: inline; text-align: right; }
Рисует на той же строке но с align: left;

vahvarh ★★★
(12.10.08 12:59:13 MSD) автор топика

Ответ на: комментарий от vahvarh 12.10.08 12:59:13 MSD

Мне начинает казаться, что это — эмуляция таблицы дивами, что не есть хорошо.

x3al ★★★★★
(12.10.08 13:19:18 MSD)

Ответ на: комментарий от x3al 12.10.08 13:19:18 MSD

Ну да, можно сделать две TD-шки... но не хотелось. ибо они тогда логически будут на одном уровне, а мне хочется вложенности.

vahvarh ★★★
(12.10.08 13:28:34 MSD) автор топика

Ответ на: комментарий от vahvarh 12.10.08 13:28:34 MSD

<html>
<style>

A.cat {display: block; background-color: #e0e0e0;}
A.cat span { display: inline; text-align: right; background-color: #c0ffff; }
</style>
<body>
<table border="1" align="center" width="300">
<tr><td colspan="2">
<a href="" class="cat">Text<span>20</span></a>
</td></tr>
<tr><td colspan="2">
<a href="#" class="cat">Text<div style="float:right; text-align: right;width: 100px;">20</div></a>
</td></tr>
<tr>
<td><a href="#" class="cat">Text</a></td>
<td align="right">20</td>
</tr>
</table>
</body>
</html>

Всё равно фигня получается, твой пример на двух строках отображается (по крайней мере в firefox) а нужно как третья строка.

vahvarh ★★★
(12.10.08 13:31:01 MSD) автор топика

Ссылка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style>
div.left,div.right{
	border:solid red 1px; 
/*	float:left;*/
	display:block;
}
div.right{
	float:right;
	display:none;
}
</style>
<body>
<div class="right" id="odeali">20 шт</div>
<div class="left" onMouseOver="odeali.style.display='block'" onMouseOut="odeali.style.display='none'">Одеялы</div>
<div class="right">-</div>
<div class="left">Пледы</div>
</body>
</html>

Как в осле незнамо.

~~wfrr~~ ★★☆
(12.10.08 13:50:44 MSD)

Ответ на: комментарий от wfrr 12.10.08 13:50:44 MSD

а без onmouseover-onmouseout можно?

vahvarh ★★★
(12.10.08 13:53:02 MSD) автор топика

Ответ на: комментарий от vahvarh 12.10.08 13:53:02 MSD

Они только показывают скрывают текст, я так понимаю вы его же скриптами будете показывать или как?

~~wfrr~~ ★★☆
(12.10.08 13:55:56 MSD)

Ответ на: комментарий от wfrr 12.10.08 13:55:56 MSD

ну по-идее можно было написать

A.categories DIV { visibility: hidden; }
A.categories:hover DIV { visibility: visible; }

если бы одно в другом было...

vahvarh ★★★
(12.10.08 14:00:33 MSD) автор топика

Ответ на: комментарий от vahvarh 12.10.08 14:00:33 MSD

Хм, я про селекторы наглухо забыл, тогда так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style>
a > div{
	float:right;
	visibility:hidden;
}
a:hover > div{
	visibility:visible;
}
</style>
<body>
<a href="#" >Одеялы<div class="right">20 шт</div></a>
<br/>
<a href="#" >Пледы<div class="right">-</div></a>
</body>
</html>

~~wfrr~~ ★★☆
(12.10.08 14:22:00 MSD)

Ответ на: комментарий от wfrr 12.10.08 14:22:00 MSD

Да, но наверняка осел про селекторы не ведает.

~~wfrr~~ ★★☆
(12.10.08 14:22:29 MSD)

Ссылка

Ответ на: комментарий от wfrr 12.10.08 14:22:00 MSD

только оно теперь у тебя на строчку ниже получается.

vahvarh ★★★
(12.10.08 14:29:50 MSD) автор топика

Ответ на: комментарий от vahvarh 12.10.08 14:29:50 MSD

У нас видимо разные браузеры. Скриншот не подусетите, хотя, думаю это из-за br, тогда можно сделать <a style="display:block"...

~~wfrr~~ ★★☆
(12.10.08 14:42:02 MSD)

Ответ на: комментарий от wfrr 12.10.08 14:42:02 MSD

Хотя, нет я просто незаметил, будем исправлять.

~~wfrr~~ ★★☆
(12.10.08 14:44:45 MSD)

Ответ на: комментарий от wfrr 12.10.08 14:44:45 MSD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<style>
a{
	display:block;
	border:solid green 1px;
}
a div{
	float:right;
	visibility:hidden;
	border:solid red 1px;
	display:inline;
}
a:hover div{
	visibility:visible;
}
</style>
<body>
<a href="#" ><div>20 шт</div>Одеялы</a>
<a href="#" ><div>-</div>Пледы</a>
</body>
</html>

Кажись все, теперь узреть что все это не пашет в осле...

~~wfrr~~ ★★☆
(12.10.08 14:53:36 MSD)

Ответ на: комментарий от wfrr 12.10.08 14:53:36 MSD

Ай да белка, ай да сукин сын! =)
Спасибо ))))

vahvarh ★★★
(12.10.08 15:05:28 MSD) автор топика

Ссылка

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

Так, в порядке флейма.

WFrag ★★★★
(13.10.08 05:26:39 MSD)