Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Учусь верстать в DLE, нужна помощь.

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

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

вопрос

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

Вот 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 - 2015-05-1315 апреля 2014 20:12 - #27111

Теперь делится на 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

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

Юзер

122

teleoperator27 - 2015-05-1315 апреля 2014 20:15 - #27112

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

Юзер

dreamer - 2015-05-1315 апреля 2014 20:20 - #27113

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

Юзер

122

teleoperator27 - 2015-05-1315 апреля 2014 20:23 - #27114

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

Юзер

dreamer - 2015-05-1315 апреля 2014 20:44 - #27115

teleoperator27,
Все так же

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

Юзер

494

Gopr - 2015-05-1315 апреля 2014 21:39 - #27119

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

Юзер

dreamer - 2015-05-1315 апреля 2014 22:03 - #27121

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

Юзер

dreamer - 2015-05-1315 апреля 2014 22:06 - #27122

Аааа, все понял я.
Я создал:

<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 блока.(Вот это лажа.()

Юзер

795

D0Gmatist - 2015-05-1315 апреля 2014 23:19 - #27125

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

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

Согласно спецификации 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
Наследует значение родителя.

Юзер

795

D0Gmatist - 2015-05-1316 апреля 2014 00:22 - #27127

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