Помогите кто может...
вот рисунок, нужна вёрстка...
промлема в том, что при наведении на картинку или ссылку заголовок, должен меняться цвет заголовка и цвет рамки картинки
это должна быть одна ссылка
можно конечно с помощью JS всё это сделать, но хочется без него
Нажмите для просмотра прикрепленного файла
заранее спасибо
Полная версия этой страницы: Вопрос по вёрстке
Цитата(pechenushka @ 02.09.2009, 17:22) 
Помогите кто может...
вот рисунок, нужна вёрстка...
промлема в том, что при наведении на картинку или ссылку заголовок, должен меняться цвет заголовка и цвет рамки картинки
это должна быть одна ссылка
можно конечно с помощью JS всё это сделать, но хочется без него
заранее спасибо
вот рисунок, нужна вёрстка...
промлема в том, что при наведении на картинку или ссылку заголовок, должен меняться цвет заголовка и цвет рамки картинки
это должна быть одна ссылка
можно конечно с помощью JS всё это сделать, но хочется без него
заранее спасибо
Одновременно?
Т.е. при наведении на картинку (заголовок) должен меняться цвет и рамки, и заголовка?
да, именно так
И в чем проблема? Рисунок и заголовок помещаем внутри тега <a>. У рисунка прописываем параметр align='left'.
ну если бы не было проблем, сюда бы не писал 
Вот такой вариант есть.
Изврат, конечно, но работает
Изврат, конечно, но работает
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title></title>
<style>
#wrapper {
border:1px solid blue;
margin:100px;
padding:10px;
width:800px;
position:relative;
padding-left:120px;
}
#wrapper a.link {
position:absolute;
left:10px;
top:10px;
text-decoration:none;
}
#wrapper a.link h2 {
display:inline;
position:relative;
top:-65px;
}
#wrapper a.link {
color:green;
}
#wrapper a.link img {
border:1px solid green;
}
#wrapper a.link:hover {
color:red;
}
#wrapper a.link:hover img {
border:1px solid red;
}
#wrapper .subheader {
font-size:90%;
display:block;
margin-bottom:30px;
position:relative;
z-index:100;
}
#wrapper p {
position:relative;
}
</style>
</head>
<body>
<div id="wrapper">
<a href="" class="link">
<img src="http://www.google.ru/intl/en_com/images/logo_plain.png" width="100" height="100">
<h2>заголовок ссылка</h2>
</a>
<span class="subheader">тут еще немного текста</span>
<p>текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк</p>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title></title>
<style>
#wrapper {
border:1px solid blue;
margin:100px;
padding:10px;
width:800px;
position:relative;
padding-left:120px;
}
#wrapper a.link {
position:absolute;
left:10px;
top:10px;
text-decoration:none;
}
#wrapper a.link h2 {
display:inline;
position:relative;
top:-65px;
}
#wrapper a.link {
color:green;
}
#wrapper a.link img {
border:1px solid green;
}
#wrapper a.link:hover {
color:red;
}
#wrapper a.link:hover img {
border:1px solid red;
}
#wrapper .subheader {
font-size:90%;
display:block;
margin-bottom:30px;
position:relative;
z-index:100;
}
#wrapper p {
position:relative;
}
</style>
</head>
<body>
<div id="wrapper">
<a href="" class="link">
<img src="http://www.google.ru/intl/en_com/images/logo_plain.png" width="100" height="100">
<h2>заголовок ссылка</h2>
</a>
<span class="subheader">тут еще немного текста</span>
<p>текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк текст в несколько строк</p>
</div>
</body>
</html>
Цитата(pechenushka @ 02.09.2009, 19:56)
ну если бы не было проблем, сюда бы не писал
Заголовку задать display: inline; поместить с рисунком в один тег <a>, у а задать float: left ?
ап.: нет, так не получается.
Цитата(hankin @ 02.09.2009, 19:26)
Вот такой вариант есть.
Изврат, конечно, но работает
Изврат, конечно, но работает
да, наверное, как-то так.
Для просмотра полной версии этой страницы, пожалуйста, пройдите по ссылке.