LINUX.ORG.RU
Форум — Development  

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


0

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

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

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

причём у "20шт" должен быть align=right.
что-то я закопался с css и div'ами. как это сделать?
меня больше интересует даже align=right, visibility-то я знаю как поменять )
★★★
← перепутаны байты в ip
GtkListStore/GtkTreeModel: вопросы →
1. Делаем обёртку вокруг «пусто» с display: block; width=какая_нить_ширина; float: left;/*или right, давно не CSSил. можно ещё сбросить margin и padding.*/
2. Делаем для «пусто» display: inline; text-align: right;
3. ???
4. PROFIT!
x3al ★★★★★
()
Ответ на: комментарий от x3al
<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 ★★★
() автор топика
Ответ на: комментарий от vahvarh
<a href="#" class="cat">Text<div style="float:right; text-align: right;width: 100px;">20</div></a>

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

x3al ★★★★★
()
Ответ на: комментарий от x3al
Ну да, можно сделать две TD-шки... но не хотелось. ибо они тогда логически будут на одном уровне, а мне хочется вложенности.
vahvarh ★★★
() автор топика
Ответ на: комментарий от vahvarh
<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 ★★★
() автор топика 
<!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 ★★☆
()
Ответ на: комментарий от vahvarh
Они только показывают скрывают текст, я так понимаю вы его же скриптами будете показывать или как?
wfrr ★★☆
()
Ответ на: комментарий от wfrr
ну по-идее можно было написать

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

если бы одно в другом было...
vahvarh ★★★
() автор топика
Ответ на: комментарий от vahvarh 
Хм, я про селекторы наглухо забыл, тогда так:

<!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 ★★☆
()
Ответ на: комментарий от wfrr
Да, но наверняка осел про селекторы не ведает.
wfrr ★★☆
()
Ответ на: комментарий от vahvarh
У нас видимо разные браузеры. Скриншот не подусетите, хотя, думаю это из-за br, тогда можно сделать <a style="display:block"...
wfrr ★★☆
()
Ответ на: комментарий от wfrr 
<!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 ★★☆
()
Ответ на: комментарий от wfrr
Ай да белка, ай да сукин сын! =)
Спасибо ))))
vahvarh ★★★
() автор топика
А я бы просто сереньким помельче сделал. Зачем заставлять юзера возюкать мышкой по линкам, если ему вдруг понадобится эта инфа? А если не понадобится, то зачем её вообще писать?

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

WFrag ★★★★
()
Ответ на: комментарий от wfrr
div нельзя вкладывать в a

Поэтому его лучше заменить на span, иначе валидатор бует возникать.

INFOMAN ★★★★★
()
Вы не можете добавлять комментарии в эту тему: топик перемещен в архив.
← перепутаны байты в ip
Development
GtkListStore/GtkTreeModel: вопросы →