Как создать квадрат с фоном в css?

(Ответов: 6, Просмотров: 13850)
  1. Banned
    • Регистрация: 16.02.2012
    • Сообщений: 357
    • Репутация: 40
    Всем привет!! Не подскажите, как создать в стилях css подобное:

    тыц
    Заранее благодарю...
    • 0
  2. Гуру
    • Регистрация: 24.04.2011
    • Сообщений: 801
    • Репутация: 126
    procsi,ВЫ же откуда то скопировали это... так откройте тот сайт и посмотрите стили той области через firebug...
    Спасибо не пишут, а нажимают
    • 1

    Спасибо сказали:

    procsi(15.07.2012),
  3. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    В хроме тоже есть аналог файербага, если им пользуетесь.
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 0
  4. Гуру Аватар для MacLeo
    • Регистрация: 01.06.2010
    • Сообщений: 1,617
    • Записей в дневнике: 1
    • Репутация: 586
    procsi, в принципе квадрат не тяжело делается :)
    в css
    Код:
    .kvadrat {
    height:300px
    weight:300px;
    background-color: #BDBDBD;
    boder:1px;
    }
    в шаблон
    Код:
    <div class="kvadrat">Write your text here</div>
    Вроде так, естественно уже сами параметры подбираете под себя
    • 1

    Спасибо сказали:

    procsi(16.07.2012),
  5. Опытный Аватар для Textoslov
    • Регистрация: 28.09.2011
    • Сообщений: 269
    • Репутация: 60
    На скорую руку, просто времени нет:
    html:
    Код:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
        <title>Kvadratik</title>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
    </html>
    Css:
    Код HTML:
    .outer{
        width:425px;
        height:275px;
        background:#EBEBE9;
        padding:20px 0 0 20px;
    }
    .inner{
        width:400px;
        height:250px;
        background:#DCDCDC;
        border:1px dashed #AFAFAF;
    }
    dashed можете заменить на dotted, если хотите рамку точками.
    Последний раз редактировалось Textoslov; 15.07.2012 в 22:54.
    • 1

    Спасибо сказали:

    procsi(16.07.2012),
  6. Дипломник Аватар для DWIM
    • Регистрация: 03.06.2012
    • Сообщений: 142
    • Репутация: 26
    Textoslov, чет не совсем квадрат, судя по значениям)
    • 0
  7. Опытный Аватар для Textoslov
    • Регистрация: 28.09.2011
    • Сообщений: 269
    • Репутация: 60
    DWIM, это прямоугольник, как в примере по ссылке. Но в чем проблема? Можно сделать и кватдат! Я лишь один из способов показал, принцип, я думаю ясен. Единственное, там с padding гемор (он увеличивает размеры), но можно подогнать.:)

    Кстати, можно вообще другим способом, менее геморным и более правильным:

    Код:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
    </html>
    Код:
    .outer{
        width:400px;
        height:400px;
        background:#EBEBE9;
        position:relative;
    }
    .inner{
        width:360px;
        height:360px;
        background:#DCDCDC;
        border:2px dotted #AFAFAF;
        position:absolute;
        top:18px;
        left:18px;
    }
    Последний раз редактировалось Textoslov; 15.07.2012 в 23:15.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Не правильно отображается favicon (появился маленький квадрат со значком доллара), что это значит?
Прочее 4 16.08.2011 09:25
Как создать меню в DLE
Вопросы от новичков 4 06.04.2011 20:13
Как создать подобное?
Web программирование 2 02.01.2011 01:40

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры