Как я могу присоединиться к фоновым изображениям? - PullRequest
Новая
       9

Как я могу присоединиться к фоновым изображениям?

2 голосов
/ 10 июля 2009

У меня есть три изображения, которые я хотел бы добавить в виджет, который я создаю в Html. Я просто хочу дать эффект поворота на углах. Это три изображения:

alt text alt text alt text

У меня повторяется средний в моем css, так что он заполняет пространство между двумя краями. 

.widgetMainLeft
{
    background: url('/Content/Images/Title_Bar_Left.png') no-repeat;
    width:6px;
    min-height:100%;
}
.widgetMain
{
    background: url('/Content/Images/Title_Bar_Middle.png') repeat-x;
    text-align:left;
    margin-top:auto;
    min-height:100%;
}
.widgetMainRight
{
    background: url('/Content/Images/Title_Bar_Right.png') no-repeat;
    width:6px;  
    min-height:100%;
}

Я помещаю эти три класса в один контейнерный класс, но он просто отображает средний класс. Фоновые изображения находятся в верхней части виджета, где заголовок. 

<div class="widgetBody">
    <div class="widgetMainLeft" />
    <div class="widgetMain">
        <div class="widgetTitle">Messages</div>
        <div class="widgetDisplayedArea">
            <table>
            ...
            </table>
        </div>
    </div>
    <div class="widgetMainRight" />
</div>

Вот так теперь выглядит виджет:

alt text

А вот как это должно выглядеть:

alt text

Как я могу заставить этот эффект произойти?

Ответы [ 6 ]

3 голосов
/ 10 июля 2009

Будет использоваться только один фон, все остальные настройки класса будут переопределены последним установленным.

Решение: создайте три контейнера вместо одного, установите каждый со своим классом.

2 голосов
/ 10 июля 2009

Работает ли это, если вы располагаете изображения? 

.widgetMainLeft
{
    background: url('/Content/Images/Title_Bar_Left.png') 0 0 no-repeat; /* 0px/0% in X dimension, 0px/0% in Y dimension */
    width:6px;
    min-height:100%;
}
.widgetMain
{
    background: url('/Content/Images/Title_Bar_Middle.png') repeat-x;
    text-align:left;
    margin-top:auto;
    min-height:100%;
}
.widgetMainRight
{
    background: url('/Content/Images/Title_Bar_Right.png') top right no-repeat;
    width:6px;  
    min-height:100%;
}

Хорошо, я заставил это работать со следующим: 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <style>

#container  {
    margin: 1em auto;
    height: auto;
    width: 18.5em;
    font-weight: bold;
}

div.widgetBody  {
    background-color: #0f0;
}

div.widgetMainLeft
        {
    background: transparent url(img/top-left-c.png) 0 0 no-repeat;
}

div.widgetMain  {
    background: transparent url(img/bottom-left-c.png) bottom left no-repeat;
}

div.widgetTitle {
    background: transparent url(img/top-right-c.png) 100% 0 no-repeat;

    padding: 0.5em 1em 0 1em;
    border-bottom: 1px solid #000;
}

div.widgetDisplayedArea
        {
    background: transparent url(img/bottom-right-c.png) 100% 100% no-repeat;
}

ol.display  {
    display: block;
    margin: 0 auto;
    list-style-type: none;
}

ol.display li   {
    float: left;
    width: 8em;
    margin: 0.5em; background-color: rgba(220,220,220,0.5);
}

ol.display li:hover
        {
    background-color: rgba(250,250,100,0.9);
}

ol.display li img
        {
    display: inline;
    vertical-align: middle;
    margin: 0 0.4em;
}

p       {
    clear: both;
    padding: 0 1em 0.5em 1em;
    border-top: 1px solid #000;
    font-size: 80%;
    text-align: right;
}


    </style>

</head>

<body>

<div id="container">

    <div class="widgetBody">
        <div class="widgetMainLeft" />
            <div class="widgetMain">
                <div class="widgetTitle">Messages</div>

                <div class="widgetDisplayedArea">
                    <ol class="display">

                        <li><img src="img/inbox.png" alt="inbox" />inbox</li>
                        <li><img src="img/drafts.png" alt="drafts" />drafts</li>
                        <li><img src="img/outbox.png" alt="outbox" />outbox</li>
                        <li><img src="img/pending.png" alt="pending" />pending</li>

                    </ol>
                    <p><a href="#more" title="more...">more</a></p>
                </div>
            </div>

        <div class="widgetMainRight" />
    </div>

</div>


</body>

</html>

Есть демо на: http://davidrhysthomas.co.uk/so/widgetcorners.html

Как уже отмечалось, похоже, что вы не упорядочили свои изображения должным образом, фон должен идти к самому внешнему div, верхнее изображение должно идти к самому внутреннему, а остальные упорядочены соответствующим образом.

1 голос
/ 10 июля 2009

Попробуйте использовать для этой цели javascript, скажем, угловой плагин jQuery, он будет работать в большинстве браузеров, даже в IE:)

0 голосов
/ 10 июля 2009

Из того, что я могу сказать, есть несколько проблем с текущим подходом:

  1. min-height не работает с IE6 (PNG также могут быть проблематичными)

  2. Высота изображения фиксирована, но вы не можете контролировать высоту виджета, особенно если пользователь изменяет размер текста. И когда это произойдет, ваши нижние закругленные углы не будут совпадать с основным корпусом.

Предполагая, что ваш виджет имеет фиксированную ширину, я бы предложил следующее: 

<div class="widgetBody">
<div class="widgetMainTop />
<div class="widgetMain">
    <div class="widgetTitle">Messages</div>
    <div class="widgetDisplayedArea">
        <table>
        ...
        </table>
    </div>
</div>
<div class="widgetMainBottom" />
</div>

и ваш CSS будет выглядеть примерно так: 

.widgetMainTop {
background: url('/Content/Images/Title_Bar_Top.png') center bottom no-repeat;
width: (width of widget);
height: (height of image);
}
.widgetMain {
background: #ffffff;
text-align:left;
margin-top:auto;
}
.widgetMainBottom {
background: url('/Content/Images/Title_Bar_Bottom.png') center top no-repeat;
width: (width of widget);  
height: (height of image);
}
0 голосов
/ 10 июля 2009

Я не уверен, что вы можете сделать это только в ccs. Мне кажется, что ваш левый и правый div будет иметь высоту 0, так как установка минимальной высоты на 100% определенно не будет работать во всех браузерах.

Это одна из наиболее распространенных проблем проектирования CSS, столбцы равной высоты ...

Что вы можете сделать, это использовать только 2 изображения, очень широкое для содержимого, включая правую границу (просто добавьте правый отступ) и маленькое для левой границы, которое необходимо применить к родительскому элементу (widgetBody), а не отдельный элемент widgetMainLeft. С соответствующим отступом вы сможете получить эффект только в CSS.

0 голосов
/ 10 июля 2009

Возможно, это не лучший способ приблизиться к макету, но я считаю, что реальная проблема, с которой вы сталкиваетесь, заключается в том, что повторяющееся фоновое изображение для widgetMain покрывает фоновые изображения widgetMainLeft и widgetMainRight. Просто наложите их на слои, используя некоторую версию следующего макета, и убедитесь, что widgetMain является родителем двух других . 

<div class="widgetBody">
    <div class="widgetMain">
        <div class="widgetMainLeft">
            <div class="widgetMainRight">
                <div class="widgetTitle">
                    Messages</div>
                <div class="widgetDisplayedArea">
                    <table>
                        ...
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...