Вопрос по CSS

F

[fly]

Sweet orange
Задача довольно тривиальна, но как реализовать - не знаю.

Исходные данные.
Есть ссылка (блочная). У ссылки есть фон, заголовок и краткое описание.

Задача.
При наведении на ссылку должен меняться цвет заголовка на цвет А, а цвет краткого описания на цвет Б.

Пример
Заголовок ссылки красного цвета
Описание черного

Наводим курсор:

Заголовок ссылки меняется на серый цвет
Описание становится синего цвета
 
Т

Тарас

Member
Для людей было бы полезно если бы ты выложил решение. Так как тему ты создал, а ответа не дал. Stack Overflow style :)
 
F

[fly]

Sweet orange
Тарас, ты прав.
Для начала верстка HTML. Создаем само меню. Поскольку в моей задаче необходимо было менять еще и фон, то пришлось для каждый ссылки создавать отдельный класс.
HTML: 
<div id="menu">
	<a class="link-1" title="ссылка 1" href="#">Заголовок 1<span>Некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст</span></a>
	<a class="link-2" title="ссылка 2" href="#">Заголовок 2<span>Некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст</span></a>
	<a class="link-3" title="ссылка 3" href="#">Заголовок 3<span>Некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст</span></a>
</div>
Тут все просто и понятно. Далее идет CSS:
HTML: 
#menu {
	position: relative;
	margin: 0 auto;
	width: 1020px;
	height: 120px;
}

#menu a {
	display: table;
	float: left;
	font-family: Arial, sans-serif;
	font-size: 22px;
	font-weight: bold;
	margin: 0 15px;
	padding-left: 95px;
	text-decoration: none;
	border-radius: 10px;
	border: 1px #999999 solid;
}

#menu a:hover {
	color: #000;
}

	#menu a.link-1	{
		display: table;
		float: left;
		color: #7a7a7a;
		width: 213px;
		height: 115px;
		background-color: #f1f1f1;
	}
	
	#menu a.link-1:hover	{
		color: #FFF;
		background-color: #e7e7e7;
	}
	
	#menu a.link-1 span {
		display: block;
		width: 213px;
		font-family: Arial, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #9e9e9e;
		text-shadow: 0 1px #FFF;
		margin-top: 10px;
	}
	
	#menu a.link-1:hover span {
		color: #000;
	}
	
	#menu a.link-2	{
		display: table;
		float: left;
		color: blue;
		width: 213px;
		height: 115px;
		background-color: #dddddd;
	}
	
	#menu a.link-2:hover	{
		color: red;
		background-color: #cfcfcf;
	}
	
	#menu a.link-2 span {
		display: block;
		width: 213px;
		font-family: Arial, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #999999;
		text-shadow: 0 1px #FFF;
		margin-top: 10px;
	}
	
	#menu a.link-2:hover span {
		color: blue;
	}
	
	#menu a.link-3	{
		display: table;
		color: red;
		width: 213px;
		height: 115px;
		background-color: #bfbfbf;
	}
	
	#menu a.link-3:hover	{
		color: blue;
		background-color: #aeaeae;
	}
	
	#menu a.link-3 span {
		display: block;
		width: 213px;
		font-family: Arial, sans-serif;
		font-size: 12px;
		font-weight: normal;
		color: #000;
		text-shadow: 0 1px #FFF;
		margin-top: 10px;
	}
	
	#menu a.link-3:hover span {
		color: red;
	}
Собственно, как оказалось, здесь тоже все просто. Создается отдельный класс под каждую ссылку. Строка "display: block" задает ссылке блочный вид. Так мы можем масштабировать наш ссылочный блок по ширине и высоте. Здесь же указываем стили для отображения заголовка, а дальше для тега <span>. Для него также делаем "display: block", чтобы его можно было без проблем поместить на нужное место внутри ссылочного блока. Соответствующие стили задают параметры текста. Отступ слева был сделан для иконки. Для каждого блока фоном можно задавать картинку, изменив "background-color" на "background-image" с соответствующими атрибутами.

P.S. Если есть какие-то замечания - не стесняйтесь, высказывайтесь.
 
R

Ronin

New Member
Сильно не читал, но нашел много чего лишнего:
#menu {
position: relative;
height: 120px;
}
#menu a.link-1 {
display: table; - это не понял для чего.
float: left;
height: 115px;
}
Выше стили уже были прописаны
#menu a float: left; и многие другие. все ссылки уже унаследовали это свойство, их не нужно прописывать еще раз.
Везде повторяется
display: table;
float: left;
width: 213px;
height: 115px;

можно было бы прописать только цвета и фон.
Если много одинаковых свойств, то их лучше переписать в отдельный класс.
Если задано float: left то элемент автоматом становиться display: block.
Высота прописывается крайне редко, так как блок не растет вместе с контентом. А если высота необходима, то лучше еще задать overflow: hidden, что бы оно не вылезло, если контента слишком много. Ну в общем и т.д.
 
F

[fly]

Sweet orange
На счет унаследования это да. Есть здесь много ненужных строк. Хе, display: table - это должно было быть display: block. Опечатка.
Если задано float: left то элемент автоматом становиться display: block.
Натисніть, щоб розгорнути...
Не знал, теперь буду знать.
Высота прописывается крайне редко, так как блок не растет вместе с контентом. А если высота необходима, то лучше еще задать overflow: hidden, что бы оно не вылезло, если контента слишком много.
Натисніть, щоб розгорнути...
Высота была прописана по размеру фоновой картинки. Текст внутри блока статичен, поэтому нет смысла писать overflow: hidden.
Ronin, допиши свой пост. Интересно узнать про другие ошибки.
P.S. Еще одно условие было - это вся область кликабельная.
 
Останнє редагування:
R

Ronin

New Member
#menu a.link-1:hover - здесь класс link-1 и есть ссылкой, поэтому более верно будет написать просто #menu .link-1:hover, во всех остальных случаях тоже.

если в #menu .link-1 убрать ширину, что ничего не меняется.

необязательно дописывать #menu для спана, разве что если понадобиться повысить приоритет стиля. (хотя тут на любителя)

Так же лучше не дописывать #menu для .link-1, так как все прописанные стили будут работать только в блоке #menu. Если же написать просто .link-1, то потом можно будет добавить этот же класс в другие блоки.

Сам заголовок ссылки: я бы лично засунул бы его в <b></b>, так с ним было бы проще работать, да и более понятно будет програмерам, которые будут натягивать шаблон на cms.

HTML: 
	<a class="link-1" title="ссылка 1" href="#">
		<b>Заголовок 1</b>
		<span>Некоторый текст некоторый текст некоторый текст некоторый текст некоторый текст</span>
	</a>
Так оно более читабельно.

background-color - лучше записывать просто как background, тогда его легче редактировать. background-color нужно писать только тогда, когда с этим свойством работает javaScript, и то чистый, без фреймворков.

то же касается font, к примеру: font: 12px normal Arial, sans-serif; вместо

font-family: Arial, sans-serif;
font-size: 12px;
font-weight: normal;

А так вроде все, остальное писал. Хотя сейчас, только что, зашел в Ie и нашел баг, глюк какой-то. Разберусь отпишу)):eek:pera:
 
R

Ronin

New Member
Реально какой-то глюк, скорее всего у меня сам ie глючит... Не работает margin: 0 auto 0; Ie не устает удивлять))). Можешь глянуть, у тебя там меню выравнивается по центру? А то реально фигня какая-то...
А, и кстати, не суть важно, но меня на работе поправляли по следующему поводу:
#menu a { margin: 0 15px; } тут идет отступ с обоих сторон, а заставляли делать так:
#menu a {
margin-left: 30px;
}
#menu a:first-child {
margin-left: 0;
}
что бы отступ был только с 1-й стороны. Но это не столько ошибка, сколько заезды самого начальника(как по мне).
 
U

UnFeeLing

Member
<!DOCTYPE ... > правильный прописываем и все будет как по маслу.

text-align:center никто не отменял
 
R

Ronin

New Member
Так и да! Была ошибка в <!DOCTYPE ...>. поменял на <!DOCTYPE html> и все заработало).
 
Ви повинні увійти або зареєструватися, щоб відповісти.
Зверху