VPF::Проблема в фоне - Форум программистов

lapulya9

Дата 26.7.2010, 14:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Имеется сверстанный (практически) сайт. А вот по периметру всего сайта идет 10 пиксельная обводка с закругленными углами (#e6e5cf - код цвета). Как мне обыграть такое извращение?
СПАСИБО!

Это сообщение отредактировал(а) lapulya9 - 26.7.2010, 14:59

bazzjr

Дата 26.7.2010, 15:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Неплохо было бы показать пример обводки, ну а так можно вырезать эту обводку и вставить в качестве фона или картинкой.

Вариантов реализации может быть множество, и какой применить зависит от уже имеющейся верстки.

lapulya9

Дата 26.7.2010, 16:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Вот макет. Сама обводка выглядит в фотошопе как белый лист. Смущает то, что фон сборный - для шапки, контента и футера свой.Зеленый фон зарепитиная полоска. А что делать с этим закругленным ума не приложу.

Вот index

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="title" content="site Avalon" />
    <meta name="keywords" content="site Avalon" />
    <meta name="description" content="site Avalon" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

    <div id="header">
        <div id="menu">
        <ul>
            <li><a href="/">HOME</a></li>
            <li><a href="/">CONTACT US</a></li>
            <li><a href="/">ABOUT AVALON</a></li>
            <li><a href="/">CLIENT WEBSITES</a></li>
            <li><a href="/">LIBRARY</a></li>
            <li><a href="/">HELPFUL LINKS</a></li>
        </ul>
        </div>
        <div id="button">
            <div class="click">
            <a href="/"><img src="img/click.png" alt="click"></a>
            </div>
        </div>
    </div><!-- #header-->

    <div id="content">
        <table width="100%" border="0">
        <tr>
        <td class="TD_img"><img src="img/bg-servise.png"></td>
        <td class="TD_body">
            <h1 align="left">CUSTOMER SERVICE</h1>
            <p>You may use this online form to request an account balance, reserve an Association facility, report a common area maintenance problem.</p>
            <a href="/">Click here to continue</a>&nbsp;&nbsp;<img src="img/ico.png">
        </td>
        <td class="TD_img"><img src="img/bg-account.png"></td>
        <td class="TD_body">
            <h1 align="left">MY ACCOUNT</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
            <a href="/">Click here to continue</a>&nbsp;&nbsp;<img src="img/ico.png">
        </td>
        <td class="TD_img"><img src="img/bg-news.png"></td>
        <td class="TD_body1">
            <h1 align="left">AVALON NEWS</h1>
            <p><font color=#c83800><b>March 5, 2010</b></font></p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod...</p>
            <a href="/">Read all news</a>&nbsp;&nbsp;<img src="img/ico.png">
        </td>
        </table>
    </div><!-- #content-->

</div><!-- #wrapper -->

    <div id="footer">
    <div id="copy">The Avalon Association Management Group, Inc.: Copyright 2010 &nbsp;&nbsp;&nbsp;    All rights reserved </div>
    <div id="fmenu">
        <ul>
            <li><a href="/">Terms of Use</a></li>
            <li><a href="/"> Privacy Policy</a></li>
            <li><img src="img/key.png"> &nbsp;<a href="/"> Login</a></li>
        </ul>
    </div>
    </div><!-- #footer -->

</body>
</html>

А вот css:

Код


* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    height: 100%;
    background-image:url(img/bg-all.jpg);
    background-repeat:repeat;
    font-family:Tahoma, Times, serif;
    font-size:11px;
    }
a {
    color:#c83800;
    text-decoration: underline;
    font-family:Tahoma, Times, serif;
    font-size:11px;
    font-weight:300;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 8px 0px 4px 2px;
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 900px;
    margin: 0 auto;
}


/* Header
-----------------------------------------------------------------------------*/
#header {
    height: 360px;
    background-image:url(img/header-all.jpg);
    background-repeat:no-repeat;
    background-position:center;
}


/* Middle
-----------------------------------------------------------------------------*/
#content {
    padding: 0 0 65px;
    height:160px;
    background-image:url(img/bg-content.png);
    background-repeat:no-repeat;
}




/* Footer
-----------------------------------------------------------------------------*/
#footer {
    width: 900px;
    margin: -65px auto 0;
    height: 65px;
    background-image:url(img/bg-footer.png);
    background-repeat:no-repeat;
}
#menu {
    width:900px;
    height:37px;    
}
#menu li{
    list-style: none;
    float: left;
    margin-right:13px;
    padding-left:15px;
    background-image:url(img/divider.png);
    background-position:right;
    background-repeat:no-repeat;
}
#menu li a{
    display: block;
    padding: 8px 4px 0px 4px;
    position: relative;
    font-family:Times New Roman, Helvetica;
    text-decoration:none;
    color:#fefefe;
    font-size:17px;
    font-weight:bold;
}
#menu li a:hover{
    background-image:url(img/hover.png);
    background-position:bottom;
    background-position:center;
    background-repeat:no-repeat;
    height:37px;
}
#button{
    width:470px;
    height:71px;
    background-image:url(img/button.png);
    background-repeat:no-repeat;
    margin-left:400px;
    margin-top:217px;
}

.click{
    margin-left:270px;
}
.TD_img{
    width:87px;
    height:160px;
    padding: 20px 10px 0px 10px;
}

.TD_body{
    width:180px;
    height:160px;
    padding: 10px 5px 0px 5px;
    background: url(img/myfon.png);
    background-position:right;
    background-repeat:no-repeat;  
}
.TD_body a{
    font-family:Tahoma, Times, serif;
    font-size:12px;
    font-weight:bold;
    text-decoration:underline;    
}
h1{
    font-family:"Times New Roman", Times, serif;
    font-size:14px;
    font-weight:bold;
    }
.TD_body1{
    width:180px;
    height:160px;
    padding: 10px 5px 0px 5px;
    }
.TD_body1 a{
    font-family:Tahoma, Times, serif;
    font-size:12px;
    font-weight:bold;
    text-decoration:underline;
}
#copy{
    margin-left:50px;
    padding-top:25px;
}

#fmenu li{
    list-style: none;
    float: left;
    margin-right:13px;
    padding-left:15px;
}
#fmenu a{
    font-family:Tahoma, Times, serif;
    font-size:11px;
    font-weight:bold;
    text-decoration:none;
}

bazzjr

Дата 26.7.2010, 16:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

Все просто если сайт статический, и размер по высоте и ширине и не будет меняться.
Тогда оберни div #wrapper в еще один див, и у нового дива сделай фон картинкой(рамка).

Немного посложней если сайт резинится в ширину и высоту.
Тогда наверно лучший вариант все содержимое сайта поместить в таблицу, разбитую на 3х3 ячеек, и в каждой ячейке своя картинка(левый угол, правый угол, середина лево, середина право и т.д.).

ksnk

Дата 26.7.2010, 18:13 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

lapulya9 Вообще-то, imho, это фиксированной ширины макет. Для фиксированной ширины просто резать на три полоски и не выпендриваться... Элементы управления вверху сайта раскидать абсолютно над картинкой-фоном.

Если рассуждать как порезать макет для резинового сайта, то у меня получится примерно вот что

-- отрезать картинку от верхнего-левого угла до нижнего края фотографии и до конца градиента с правой части (немного залезет на надпись "Авалон")
-- отрезать такой-же высоты самый правый кусок
-- отрезать маленькую полоску той-же высоты  под слоганом (предварительно выкинутым в фотошопе) для бякграунда.
-- Avalon managment и слоган под ним - вырезать одной картинкой (гифкой) с прозрачным бякграундом. Весь бякграунт вычистить фотошопом.
-- "learn more about us" -  учитывая полупрозрачную тень слева - png + pngfix для IE.
Итого - верхняя часть будет таблицей из правого элемента фиксированной ширины, центрального элемента резиновой ширины и правого элемента - фиксированной ширины. Еще две фигулинки/украшения + меню абсолютно позиционированы.

Средняя часть - таблица из фиксированной ширины правой части, резиновой центральной части с белым бякграундом и полосой - бякграундом и фиксированной ширины правой части. Эта часть умеет расширяться во все стороны. Про контент - не интересно.   smile

Нижняя часть самая простая, но если градиентные переходы залезают на надпись - ее все равно придется позиционировать абсолютно.

Немного страшнее (для верстальщика) получится, если дизайнер захочет изменять ширину зеленой заливки, в зависимости от разрешения экрана.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

lapulya9

Дата 26.7.2010, 22:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Сайт статический. Попробую через фон. Спасибо!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »