Лента этого топика

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

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

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

    Спасибо сказали:
    procsi(15.07.2012),
  3. 15.07.2012 22:11
    #3
    archerl вне форума
    archerl
    Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    В хроме тоже есть аналог файербага, если им пользуетесь.
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 0
  4. Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5 Значок / Очков: 5
    15.07.2012 22:20
    #4
    MacLeo вне форума
    MacLeo
    Гуру Аватар для 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>
    Вроде так, естественно уже сами параметры подбираете под себя
    SEO аудит за 500 рублей | Анализ конкурентов|Создание MindMap
    • 1

    Спасибо сказали:
    procsi(16.07.2012),
  5. 15.07.2012 22:39
    #5
    Textoslov вне форума
    Textoslov
    Опытный Аватар для 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. 15.07.2012 22:44
    #6
    DWIM вне форума
    DWIM
    Дипломник Аватар для DWIM
    • Регистрация: 03.06.2012
    • Сообщений: 142
    • Репутация: 26
    Textoslov, чет не совсем квадрат, судя по значениям)
    • 0
  7. 15.07.2012 22:51
    #7
    Textoslov вне форума
    Textoslov
    Опытный Аватар для 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
(добавить баннер)

Баннеры



(добавить ссылку)

Витрина ссылок

У нас проходит

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

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

Или перенести аккаунт с других форумов

Золотые темы форума

Все золотые темы

Популярные темы

Информеры