Переучивание HTML - PullRequest
Новая
       2

Переучивание HTML

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

Я работаю в этой отрасли много лет, однако за последние 10 лет мне не приходилось делать большую часть HTML самостоятельно. Недавно я стал единственным разработчиком на работе, и поэтому я должен сам выполнять весь HTML.

Обычно это не будет проблемой, однако я стараюсь придерживаться тех же стандартов качества, что и для моей работы с PHP / MySQL / JavaScript / jQuery. Поэтому о таблицах определенно не может быть и речи (последний раз, когда мне приходилось писать HTML / CSS самостоятельно, когда были приемлемы вложенные таблицы).

Я возился с HTML div s и CSS, и у меня возникли довольно серьезные проблемы с ним, и я не нашел в Интернете ничего, кроме дерьма, опубликованного на W3Schools hasn тоже не поможет.

Давайте сначала посмотрим на некоторый код, над которым я работаю, вот HTML: 

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: gray;
}

#page_wrapper {
    background: yellow;
    height: 100%;
    width: 100%;
}

#content {
    width: 980px;
    background: white;
    height: 100%;
    margin: 0 auto;
}

header {
    height: 160px;
    width: 980px;
    background: blue;
}

#content-wrapper {
    background: green;
    width: 100%;
}

footer {
    height: 120px;
    margin-top: -120px;
    width: 980px;
    background: orange;
}
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Page Title</title>
        <link href="inc/css/style.css" rel="stylesheet">
    </head>
    <body>
        <div id="page_wrapper">
            <div id="content">
                <header>this is the header...</header>
                <div id="content-wrapper">sdasd</div>
                <footer>
                    this is the footer
                </footer>
            </div>
        </div>
    </body>
</html>

Я пробовал несколько вариантов этого, и я не смог заставить его выглядеть так, как должно. Обратите внимание, что я использую цвета фона специально для определения положения всего, потому что это скорее учебное упражнение, чем реальный пример.

Многие из страниц, которые мне придется создавать, будут иметь фоновое изображение в теле, как и многие веб-сайты в наши дни. Тогда контент будет 980 пикселей в ширину. Моя большая проблема с приведенным выше кодом заключается в том, что контент-оболочка div должна занимать 100% доступного пространства, если контент недостаточно длинный, чтобы его вытолкнуть.

Когда я добавляю height: 100% к этому объявлению в CSS, кажется, что он отрисовывается очень хорошо, однако он помещает его в 100% окна, что делает его перекрывающим page_wrapper div, который его содержит.

Я бы вообще не хотел использовать overflow декларации, так как по какой-то причине каждый раз, когда я делаю это, все остальное портит.

Итак, я думаю, что реальный вопрос и / или запрос здесь будут:

  • Как мне сделать то, что я хотел бы сделать в приведенном выше коде?

Ответы [ 3 ]

1 голос
/ 27 декабря 2011 

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
background: gray;
}

#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}

#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}

header {
height: 160px;
width: 980px;
background: blue;
}

#content-wrapper {
background: green;
height: 100%;
position:relative;
}

footer {
height: 120px;
width: 980px;
background: orange;
position:absolute;
bottom:0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
</head>
<body>
<div id="page_wrapper">
    <div id="content">					       
        <div id="content-wrapper">
            <header>this is the header...</header>
            test
            <footer>this is the footer</footer>
        </div>
    </div>
</div>
</body>
</html>
0 голосов
/ 27 декабря 2011

Вам не нужна оболочка страницы или содержимое div.Вы можете просто установить ширину тела в 980 пикселей.Вы также можете настроить html и тело на любой цвет.

Несмотря на то, что W3Schools получил заслуженно плохой рэп, он немного прибрался и не является плохим, кратким справочником.

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

Тег body уже равен «100% доступного пространства, если содержимое недостаточно длинное, чтобы его вытолкнуть».

Так что просто используйте этот элемент для всего, что вам нужно (фоновые изображения и т. Д.). Посмотрите на свойства CSS, такие как background-position, чтобы контролировать, где что-то видно внутри тега <body>.

В противном случае я бы выбрал min-height: 100%; для оболочки, но не уверен, насколько это совместимо с более старыми версиями IE. И это может или не может делать интересные вещи на устройствах с сенсорным экраном.

В целом, HTML не очень хорош в вертикальном расположении. Особенно в отношении высоты окна браузера. Большинство проблем можно обойти в современных браузерах, но лучше просто принять это ограничение и спроектировать свой сайт исходя из предположения, что вы не можете контролировать высоту. Это просто не стоит головной боли.

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

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

...