css: текст не должен "прыгать" - HTML и CSS

SNake Ice · 03.03.2012, 18:08

На примере ниже текст прыгает, а как сделать так, чтобы текст оставался на своём месте, а изображения ползли вверх (планируется использовать подобную надпись в конце страницы, где места уже не снизу)?

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ansi">
<title>Test</title>
<style>
#buy, #buy:hover, #buy:active
{
float: right;
cursor: pointer;
padding: 0 6px 0 3px;
}

#buy:hover
{
background-color: #9b9b9b;
}

#buy:active
{
background-color: #6d6d6d;
}

#place
{
display: none;
text-align: center;
}

div#buy:hover div
{
display: block;
}
</style>
</head>
<body>
<br>
<br>
<br>
<div id="buy">
<div id="place"><a href="##" target="_blank" alt="Там"><img src="http://dsvload.net/uploads/posts/2010-01/1262436917_h_preferences.gif" border="0"></a> <a href="#" target="_blank" alt="Здесь"><img src="http://siteforsites.ru/_ph/232/2/232999387.png" border="0"></a></div>Купить!!!</div>
</body>

pompiduskus · 04.03.2012, 00:59

чтобы они как ты сказал ползли , я думаю нужно использовать..

Код HTML:

.img { 
float:left; 
border: solid 1px #ccc; 
margin-right:10px;
			transition-property:all;
			transition-duration:0.2s;
			transition-timing-function:linear;
	/* Firefox 4 */
		-moz-transition-property:all;
		-moz-transition-duration:0.2s;
		-moz-transition-timing-function:linear;
	/* Chrome */		
		-webkit-transition-property:all;
		-webkit-transition-duration:0.2s;
		-webkit-transition-timing-function:linear;
	/* Opera */
		-o-transition-property:all;
		-o-transition-duration:0.2s;
		-o-transition-timing-function:linear;
}

.img:hover {
float:left; 
border: solid 1px #ccc; 
margin-right:30px;
}

SNake Ice · 04.03.2012, 07:21

Текст всё равно уходит вниз, а суть в том, чтобы текст оставался на месте, а изображения появлялись сверху (пусть даже не ползут, мог не так выразиться). А твой вариант красив по-своему.

pompiduskus · 04.03.2012, 09:48

у тебя лижбы что в дивах ... ты сам то понял что ты вот здесь хотел сделать

<div id="buy">
<div id="place"><a href="##" target="_blank" alt="Там"><img src="http://dsvload.net/uploads/posts/2010-01/1262436917_h_preferences.gif" border="0"></a> <a href="#" target="_blank" alt="Здесь"><img src="http://siteforsites.ru/_ph/232/2/232999387.png" border="0"></a></div>Купить!!!</div>

SNake Ice · 04.03.2012, 10:45

Элемент выравнивается по правому краю, для него заданы стили при наведении и нажатии. Что не понятного-то?..

pompiduskus · 05.03.2012, 09:10

У тебя div без размеров.. при наведении там появляется картинка большего размера чем сама ссылка .. и всё сдвигается куда попало .. делай div определённого размера .. выравнивай текст или помести в него ещё один див ... так просто нельзя взять и всё запихать в div и всё . а размеры , условия , положение .. это кто писать будет ?

SNake Ice · 05.03.2012, 13:44

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

04.03.2012, 09:48	#4
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	у тебя лижбы что в дивах ... ты сам то понял что ты вот здесь хотел сделать <div id="buy"> <div id="place"><a href="##" target="_blank" alt="Там"><img src="http://dsvload.net/uploads/posts/2010-01/1262436917_h_preferences.gif" border="0"></a> <a href="#" target="_blank" alt="Здесь"><img src="http://siteforsites.ru/_ph/232/2/232999387.png" border="0"></a></div>Купить!!!</div> <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Вывести название соответствующей карты вида "шестерка бубен", "дама червей","туз треф" и т.п.	воваава	Помощь студентам	3	01.12.2011 12:50
Что за ошибка "В операции должен использоваться обновляемый запрос"?	Ecosasha	Свободное общение	1	22.05.2011 13:00
Как заменить жирний текст "тис. грн." на обычний текст "тис. грн."	Jaroslav	Microsoft Office Word	2	01.09.2010 18:09
Напечатать текст, удалив из него все цифры и знаки "+" или "–". Язык С++.	KaylasMKTY	Помощь студентам	8	07.03.2010 21:35
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой"	aleksei78	Microsoft Office Excel	13	25.08.2009 12:04

04.03.2012, 07:21	#3
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	Текст всё равно уходит вниз, а суть в том, чтобы текст оставался на месте, а изображения появлялись сверху (пусть даже не ползут, мог не так выразиться). А твой вариант красив по-своему.

04.03.2012, 10:45	#5
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	Элемент выравнивается по правому краю, для него заданы стили при наведении и нажатии. Что не понятного-то?..

05.03.2012, 09:10	#6
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	У тебя div без размеров.. при наведении там появляется картинка большего размера чем сама ссылка .. и всё сдвигается куда попало .. делай div определённого размера .. выравнивай текст или помести в него ещё один див ... так просто нельзя взять и всё запихать в div и всё . а размеры , условия , положение .. это кто писать будет ? <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

05.03.2012, 13:44	#7
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	В том-то и дело, что пример не мой, в соседней ветку попросил, чтобы помогли сделать появление текста сверху. Вот здесь обсуждали. Где ты уже отписался.