Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Учусь верстать в DLE, нужна помощь.

Учусь верстать в DLE, нужна помощь.


     15.04.2014    Все вопросы » Общие вопросы по вёрстке    2717

вопрос
Я пытаюсь научиться верстать шаблоны для dle, при создании основной страницы наткнулся на непонятную вещь. Когда ставлю margin: 20px, auto; отступа нету, и никак не получается.. Что делать??

Учусь верстать в DLE, нужна помощь.

Вот CSS файл:
 * {
    margin: 0;
    padding: 0;
}

body {
    background: url("../images/bg.png") #d2d3d5;
    font: 12px Arial, Tahoma, sans-serif;
}

a {
    text-decoration: none;
}

#page_align {
    background: url("../images/bg.png") #d2d3d5;
    margin: 20px, auto;
}

#page_n {
    height: 35px;
    background-color: #222222
}

#page_n ul {
    list-style: none;
}

#page_n ul li {
    float: left;
    line-height: 35px;
    padding: 0px 20px;
}

#page_n ul li a {
    display: block;
    color: #b1adaa;
}
#page_n ul li a:hover{
    background: rgba(192,192,192,.09)
}
/*
#head_b b {
margin-top: 33px;
margin-left: 173px;
font-size: 40px;
color: #464646;
float: left;
}
*/
#sidebar {
    height: 50px;
    background: #fff
}

#sidebar ul{
    list-style: none;
}

#sidebar ul li {
    float: left;
    line-height: 50px;
    padding: 0px 20px;
}

Вот HTML:
<!DOCTYPE html>
<html>
    <title>ArmaFilm-окно в мир кино!</title>
    <meta charset="windows1251">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
      <div id="page_n">
          <ul>
            <li><a href="">Главная</a></li>
            <li><a href="">Заказать фильм</a></li>
            <li><a href="">Карта сайта</a></li>
            <li><a href=""> Обратная связь</a></li>
          </ul>
    </div>
    <div id="page_align">
          <div id="sidebar">
            <ul>
                <li><a href="#">Все фильмы</a></li>
                <li><a href="#">Мультфильмы</a></li>
                <li><a href="#">Сериалы</a></li>
                <li><a href="#">Скоро в прокате</a></li>
            </ul>
    </div>
</div>

<div id="slider">

</div>
<div id="sidebar">
</div>
<div id="content">

</div>
</html>

Ответил: teleoperator27


Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.
http://htmlbook.ru/css/margin

10 комментариев

dreamer
Юзер

dreamer - 15 апреля 2014 20:12 -


Теперь делится на 2 почему то...
CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background: url("../images/bg.png") #d2d3d5;
    font: 12px Arial, Tahoma, sans-serif;
}

a {
    text-decoration: none;
}

#page_align {
    background: url("../images/bg.png") #d2d3d5;
    margin: 30px 50px;
}

#page_n {
    height: 35px;
    background-color: #222222
}

#page_n ul {
    list-style: none;
}

#page_n ul li {
    float: left;
    line-height: 35px;
    padding: 0px 20px;
}

#page_n ul li a {
    display: block;
    color: #b1adaa;
}
#page_n ul li a:hover{
    background: rgba(192,192,192,.09)
}
/*
#head_b b {
margin-top: 33px;
margin-left: 173px;
font-size: 40px;
color: #464646;
float: left;
}
*/
#sidebar {
    height: 50px;
    width: 1000px;
    background: #fff
}

#sidebar ul{
    list-style: none;
}

#sidebar ul li {
    float: left;    
    line-height: 50px;
    padding: 0px 50px;
}

HTML
Остался тот же, что и был.

teleoperator27
Юзер

teleoperator27 - 15 апреля 2014 20:15 -

я дал ссылку, читайте внимателно. Это не дле, а азы верстки

dreamer
Юзер

dreamer - 15 апреля 2014 20:20 -

Блин, никак не могу понять почему так..

teleoperator27
Юзер

teleoperator27 - 15 апреля 2014 20:23 -

потому что при добавлении отступов ширину учитывать надо

dreamer
Юзер

dreamer - 15 апреля 2014 20:44 -


teleoperator27,
Все так же
#page_align {
    background: url("../images/bg.png") #d2d3d5;
    width: 800px;
    margin: 30px 50px;

Gopr
Юзер

Gopr - 15 апреля 2014 21:39 -

Что нужно сделать то? + дескриптор <body> не закрыт...

dreamer
Юзер

dreamer - 15 апреля 2014 22:03 -

Gopr,
Когда ставлю отступ 50, то блок двоится как на скрине показано. А это мне не нужно))

dreamer
Юзер

dreamer - 15 апреля 2014 22:06 -

Аааа, все понял я.
Я создал:
<div id="slider">
</div>
<div id="sidebar">
</div>
<div id="content">

и забыл про них, и думал что это
    <div id="page_align">
          <div id="sidebar">
            <ul>
                <li><a href="#">Все фильмы</a></li>
                <li><a href="#">Мультфильмы</a></li>
                <li><a href="#">Сериалы</a></li>
                <li><a href="#">Скоро в прокате</a></li>
            </ul>
    </div>
</div>
это делает 2 блока.(Вот это лажа.()

D0Gmatist
Юзер

D0Gmatist - 15 апреля 2014 23:19 -

полезно будет и знать это ... при всём желательно ВСЕМ

Описание
Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис
box-sizing: content-box | border-box | padding-box | inherit

Значения
content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.
padding-box
Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).
inherit
Наследует значение родителя.

D0Gmatist
Юзер

D0Gmatist - 16 апреля 2014 00:22 -

-moz-box-sizing: border-box; /* Для Firefox */
-webkit-box-sizing: border-box; /* Для старых версий Chrome и Safari */
box-sizing: border-box; /* Ширина блока с учетом полей и рамок */

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх