IMHO.WS

IMHO.WS (https://www.imho.ws/index.php)
-   Веб-программирование (https://www.imho.ws/forumdisplay.php?f=29)
-   -   возможности css (https://www.imho.ws/showthread.php?t=129970)

Tulip 25.02.2008 20:11
возможности css
 
Такой вот вопрос. Есть ссылка и картинка рядом. Можно ли средствами 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?

winbond 04.03.2008 15:30
Цитата:
Сообщение от Tulip (Сообщение 1528492)
Еще вопрос. 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 (Сообщение 1538445)
У меня и в 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 (Сообщение 1528492)
Еще вопрос. Hover это аналог onmouseover. А есть ли в CSS аналог onmousedown/onmouseup?
Отвечу на свой же вопрос. По сути псевдокласс :active применительно к ссылке и есть аналог, правда одновременно и onmousedown и onmouseup.


Часовой пояс GMT +4, время: 20:47.

Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd.