html ширина документа / радиус границы не работает - PullRequest
Новая
       0

html ширина документа / радиус границы не работает

0 голосов
/ 04 декабря 2011

Я недавно пытался создать веб-страницу HTML5 (используя тег <!DOCTYPE html>) и я сделал центрированную страницу с радиусом границы, который с DOC. это было жидко, но без этого было хорошо. Мне было интересно, что я делаю не так? Как включить doctype и заставить его работать?

Вот код: 

<html>
    <head>
        <style>
        body
        {
        background: #373;
        margin:0;
        }
        #container
        {
        background:transparent;
        padding:24;
        }
        #page
        {
        display: block;
        background:#eee;
        width: 850;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 0 auto;
        padding:5px;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="page">
                Testing 1 2 3
            </div>
        </div>
    </body>
</html>

Скопируйте и вставьте в это .

1 Ответ

4 голосов
/ 05 декабря 2011

Проблема, по-видимому, в ненулевых атрибутах width и padding; любая ненулевая ширина должна иметь указанную единицу измерения:

Формат значения длины - необязательный символ знака («+» или «-», где «+» - значение по умолчанию), за которым сразу следует число (с десятичной точкой или без нее), за которым сразу следует идентификатор единицы. (двухбуквенное сокращение). После цифры «0» идентификатор устройства является необязательным.

Кажется, что работает следующее, хотя я не обязательно знаю, какой у вас желаемый конечный результат: 

body
{
background: #373;
margin:0;
}
#container
{
background-color:transparent; /* amended to 'background-color' as per @Viruzzo's comment */
padding:24px; /* needed to add 'px' to this line */
}
#page
{
display: block;
background-color:#eee; /* amended to 'background-color' as per @Viruzzo's comment */
width: 850px; /* and to this one */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
padding:5px;
}

JS Fiddle demo .

И версия «до», с вашим собственным html / css для сравнения.

Ссылки:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...