HTML-заголовок не выходит на правильную ширину

0

Вот план, который у меня был для моей страницы:

  • Ширина тела х высота 600 х 800 пикселей; нет прокладки, так что элементы внутри него могут плотно прилегать к стене, если у них нет разницы.
  • 3 элемента внутри тела: заголовок, основной контент и нижний колонтитул, которые считаются классами (потому что я буду использовать один и тот же макет на нескольких страницах моего сайта).
  • Ширина трех элементов будет составлять 598 пикселей, маржа будет 0 пикселей, а граница будет 1 пиксель, так что они будут идеально вписываться в тело. Границы будут разбиты, чтобы добавить визуальный контекст.
  • 3 элемента "будут разделять высоту тела через соответствующие пиксели 150, 500 и 150. Их 1-пиксельные нижние/верхние границы будут перекрываться. Таким образом, вертикальное пространство страницы будет иметь 1-пиксельную границу вверху, 148 пикселей пространства, 1 пиксель границы, 499 пикселей пространства, 1 пиксель границы, 149 пикселей пространства и, наконец, 1 пиксель границы на дно.

Если вы можете, объясните мне, где я ошибся в логике HTML моей реализации. Мой заголовок не соответствует ширине, когда я просматриваю страницу. (Очевидно, что моя страница будет выглядеть красочной и динамичной, когда я закончу ее. Сейчас я просто пытаюсь правильно подобрать макет).

<html>

<head>
    <title>div practice</title>
    <style type="text/css">
        body
        {
            padding: 0px;
            height: 800px;
            width: 600px;
        }
        .header
        {
            margin: 0px;
            border: 1px dashed;
            width: 598 px;
            height: 148px;
            position: absolute;
            top: 0px;
            left: 0px;
        } 
        .mainContent
        {
            margin: 0px;
            border: 1px dashed;
            width: 598px;
            height: 500px;
            position: absolute;
            top: 148px;
            left: 0px;  
        }
        .footer
        {
            margin: 0px;
            border: 1px dashed;
            width: 598px;
            height: 148px;
            position: absolute; 
            top: 648px;
            left: 0px;
        }
    </style>
</head>

<body>
     <div class="header">
        <p>This is where the header goes</p>
     </div>
     <div class="mainContent">
        <p>This where the main content goes</p>  
     </div>
     <div class="footer">
        <p>This is where the footer goes</p>     
     </div>
</body>

</html>
  • 0
    Во-первых, пожалуйста, никогда не устанавливайте высоту для вашего контента, это совсем не хорошо и создаст проблемы для вас.
  • 0
    Какую проблему, если я могу спросить?
Показать ещё 1 комментарий
Теги:

2 ответа

2

В ваших стилях .header измените width: 598 px; до width: 598px;

598 px не является допустимым значением свойства, поэтому оно игнорируется. Удалите пространство, и оно должно работать должным образом.

Кроме того, если вы добавите эту строку кода:

*, *:before, *:after { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Это изменит модель окна, чтобы отступы и границы были вычтены из указанной ширины, а не добавлены к ней. Это популярная техника в наши дни, поскольку она делает математику менее головной болью и способствует гибкому дизайну. С помощью этого стиля вы можете определить свой заголовок с width: 600px; и по-прежнему добавлять любые border и padding вы хотите, не затрагивая ширину.

Поделиться
0

В качестве плана я бы предпочел следующее:

1) сделайте ваше body шириной 100%

body{
 width: 100%;
}

2) добавьте div outterWrapper чтобы содержать все ваши элементы страницы.

.outterWrapper{
    width: 600px; // your page width;
    margin: 0 auto; // to center in page
    border: 1px solid #000; // if you need a border
}

3) Начните стиль заголовка, содержимого, нижнего колонтитула

.header, .footer, .content{
 width: 100%;
 padding: 5px;
 margin-bottom: 10px;
}

.header, .footer{
 background-color: #cfe09b;
}
.footer{
    margin-bottom: 0;
}
.content{
 background-color: #89ccca;
}

Вы можете видеть, что я имею в виду здесь >> http://jsfiddle.net/salota8550/EPsk2/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню