возможности css - Веб-программирование

Tulip · 25.02.2008, 20:11

Такой вот вопрос. Есть ссылка и картинка рядом. Можно ли средствами css сделать так чтобы: при наведении на ссылку изменялся стиль картинки?

Hubbitus · 26.02.2008, 02:45

Я думаю в даннмо случае нужно сделать картинку бэкграундом для ссылки (ну padding в сторону куда она должна быть и указание где бэкгроунду быть) и менять стиль самой ссылки при этом уже.

Tulip · 26.02.2008, 17:47

Так она будет фоном. А сдвинуть ее можно в сторону?

ЕЖ · 27.02.2008, 00:00

Tulip, так "padding: [top] [right] [bottom] [left]" и сдвинет текст относительно фоновой картинки куда тебе надо. Плюс сам бэкграунд прибивается к одному из 9 положений внутри блока ссылки.

Tulip · 27.02.2008, 15:53

ЕЖ, спасибо, картинку сдвинул. Но как теперь задать стиль бэкграунду не затрагивая текстовую ссылку? Скажем сделать border картинке.

ЕЖ · 27.02.2008, 22:28

Tulip, пиши в css для ссылки
a { /* стиль */ }
a:hover { /* стиль при наведении */ }

Бордэр бэкграунду ты не задашь, можешь задать бордер блоку ссылки. Если бэкграунд будет по размеру блока ссылки, то визуально получится как будто бордер у картинки.

a:hover { border: solid 1px red; }

Tulip · 28.02.2008, 13:59

ЕЖ, понятно. Спасибо за советы. Сделал уже по-другому как и хотел. (запихнул картинку внутрь ссылки)

Tulip · 03.03.2008, 03:00

Еще вопрос. Hover это аналог onmouseover. А есть ли в CSS аналог onmousedown/onmouseup?

04.03.2008, 15:30

Цитата:

Сообщение от Tulip

Еще вопрос. Hover это аналог onmouseover. А есть ли в CSS аналог onmousedown/onmouseup?

Насколько знаю - нет. По крайней мере в CSS1 и 2 - сейчас книга лежит рядом, спецом посмотрел.

Melkor · 26.03.2008, 15:43

Тоже задам вопрос по CSS.
Untitled_1.css

Код:

.main_pane {
    position: relative;
    width: 100%;
    display: block;
}
.page_content {
    border: thick dotted #00FF00;
    display: block;
    position: static;
    left: 0px;
    height: auto;
    overflow: visible;
    float: left;
    clear: none;
    width: auto;
    top: auto;
    right: 200px;
}
.post {
    border: medium dashed #F2F2F2;
    margin-bottom: 20px;
    padding-bottom: 15px;
    line-height: 200%;
    display: block;
    width: auto;
    height: auto;
}

.byline {
    margin: 0 0 20px 0;
}

.title {
    margin: 0;
}

HTML

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="sv" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="Untitled_1.css" />
</head>

<body>

<div class="main_pane">
    <div class="sidebar">
        <ul>
          <li><h2>Manuals</h2>
            <ul>
              <li><a href="#">link_1</a></li>
              <li><a href="#">link_2</a></li>
            </ul>
          </li>
        </ul>
    </div>

    <div class="page_content">
        <div class="post">
            <h1 class="title">header 1</h1>
            <p class="byline"><small>subtext</small></p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum
        </div>
    
        <div class="post">
            <h2 class="title">Header 2 example</h2>
            <p class="byline"><small>subtext</small></p>
    
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum<br />
        </div>
    </div>
</div>
</body>

</html>

Дает разные результаты в IE и FF. Мне надо чтобы было как в эксплорере, колонка слева (200px) и текст справа (на оставшуюся ширину). FF ставит текст снизу.
Пробовал много чего. Но или там или там не работает.
Где не так думаю?

Hubbitus · 31.03.2008, 04:33

У меня и в IE и в FF раскладка одинаково показывается. Есть некоторые отличия в отступах, а в целом очень даже похоже и одинаково. И все друг за другом, без колонок.

Melkor · 01.04.2008, 15:46

Цитата:

Сообщение от Hubbitus

У меня и в IE и в FF раскладка одинаково показывается. Есть некоторые отличия в отступах, а в целом очень даже похоже и одинаково. И все друг за другом, без колонок.

ппц.

простите засранца.
Не весь код css почему-то вставил.

Код:

.main_pane {
    position: relative;
    width: 100%;
    display: block;
}
.page_content {
    border: thick dotted #00FF00;
    display: block;
    position: static;
    left: 0px;
    height: auto;
    overflow: visible;
    float: left;
    clear: none;
    width: auto;
    top: auto;
    right: 200px;
}
.post {
    border: medium dashed #F2F2F2;
    margin-bottom: 20px;
    padding-bottom: 15px;
    line-height: 200%;
    display: block;
    width: auto;
    height: auto;
}

.byline {
    margin: 0 0 20px 0;
}

.title {
    margin: 0;
}


/* Sidebars */

.sidebar {
    padding-right: 5px;
    padding-left: 20px;
    display: block;
    width: 200px;
    overflow: visible;
    height: auto;
    float: right;
}

.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar li {
    padding: 0 0 20px 0;
}

.sidebar li ul {
}

.sidebar li li {
    background: url(list_bullet.gif) no-repeat 10px 9px;
    padding: 5px 0 5px 25px;
}

.sidebar li h2 {
    margin: 0 0 10px 0;
    padding: 5px 10px;
    border: 1px solid #F2F2F2;
    font-size: 12px;
    background: url(sidebar_h2.gif) repeat-x;
}

Hubbitus · 06.04.2008, 19:41

В общем, если прописать фиксированную ширину для контента основного, то все встает на свои места и там и там:
.page_content {
width: 700px;
}

Но, на сколько я понимаю, хочется именно "резиновую" раскладку, так? Я сраз чего-то не уловил этого. В таком случае придется учесть-таки особенности разных браузеров и применять всякие хаки, прежде всего для осла. Очень и очень доходчиво, как мне кажется описано это вот тут:
http://softwaremaniacs.org/blog/2006...s-layout-flex/
Ну а вообще читаем про CSS-раскладку также http://softwaremaniacs.org/blog/2006...tioned-layout/
ну и другие, не менее полезные статьи этого же сайта: http://softwaremaniacs.org/blog/category/web/primer/

Tulip · 05.11.2008, 01:24

Цитата:

Сообщение от Tulip

Еще вопрос. Hover это аналог onmouseover. А есть ли в CSS аналог onmousedown/onmouseup?

Отвечу на свой же вопрос. По сути псевдокласс :active применительно к ссылке и есть аналог, правда одновременно и onmousedown и onmouseup.

25.02.2008, 20:11	# 1
Tulip Junior Member Регистрация: 17.08.2003 Пол: Male Сообщения: 80	возможности css Такой вот вопрос. Есть ссылка и картинка рядом. Можно ли средствами css сделать так чтобы: при наведении на ссылку изменялся стиль картинки?

26.02.2008, 02:45	# 2
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	Я думаю в даннмо случае нужно сделать картинку бэкграундом для ссылки (ну padding в сторону куда она должна быть и указание где бэкгроунду быть) и менять стиль самой ссылки при этом уже. __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

27.02.2008, 00:00	# 4
ЕЖ ::VIP:: Регистрация: 19.03.2004 Сообщения: 1 329	Tulip, так "padding: [top] [right] [bottom] [left]" и сдвинет текст относительно фоновой картинки куда тебе надо. Плюс сам бэкграунд прибивается к одному из 9 положений внутри блока ссылки. Последний раз редактировалось ЕЖ; 27.02.2008 в 00:04.

03.03.2008, 03:00	# 8
Tulip Junior Member Регистрация: 17.08.2003 Пол: Male Сообщения: 80	Еще вопрос. Hover это аналог onmouseover. А есть ли в CSS аналог onmousedown/onmouseup? Последний раз редактировалось Tulip; 03.03.2008 в 03:04.

31.03.2008, 04:33	# 11
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	У меня и в IE и в FF раскладка одинаково показывается. Есть некоторые отличия в отступах, а в целом очень даже похоже и одинаково. И все друг за другом, без колонок. __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

26.02.2008, 17:47	# 3
Tulip Junior Member Регистрация: 17.08.2003 Пол: Male Сообщения: 80	Так она будет фоном. А сдвинуть ее можно в сторону?

27.02.2008, 15:53	# 5
Tulip Junior Member Регистрация: 17.08.2003 Пол: Male Сообщения: 80	ЕЖ, спасибо, картинку сдвинул. Но как теперь задать стиль бэкграунду не затрагивая текстовую ссылку? Скажем сделать border картинке.

27.02.2008, 22:28	# 6
ЕЖ ::VIP:: Регистрация: 19.03.2004 Сообщения: 1 329	Tulip, пиши в css для ссылки a { /* стиль / } a:hover { / стиль при наведении */ } Бордэр бэкграунду ты не задашь, можешь задать бордер блоку ссылки. Если бэкграунд будет по размеру блока ссылки, то визуально получится как будто бордер у картинки. a:hover { border: solid 1px red; }

28.02.2008, 13:59	# 7
Tulip Junior Member Регистрация: 17.08.2003 Пол: Male Сообщения: 80	ЕЖ, понятно. Спасибо за советы. Сделал уже по-другому как и хотел. (запихнул картинку внутрь ссылки)

06.04.2008, 19:41	# 13
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	В общем, если прописать фиксированную ширину для контента основного, то все встает на свои места и там и там: .page_content { width: 700px; } Но, на сколько я понимаю, хочется именно "резиновую" раскладку, так? Я сраз чего-то не уловил этого. В таком случае придется учесть-таки особенности разных браузеров и применять всякие хаки, прежде всего для осла. Очень и очень доходчиво, как мне кажется описано это вот тут: http://softwaremaniacs.org/blog/2006...s-layout-flex/ Ну а вообще читаем про CSS-раскладку также http://softwaremaniacs.org/blog/2006...tioned-layout/ ну и другие, не менее полезные статьи этого же сайта: http://softwaremaniacs.org/blog/category/web/primer/ __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.