XHTML CSS 3 Расположение столбцов - PullRequest
Новая
       0

XHTML CSS 3 Расположение столбцов

0 голосов
/ 19 мая 2011

Я новичок в мире XHTML и CSS.Я собрал страницу, которая требует 3 колонки.Код дает мне желаемый эффект в Internet Explorer, Firefox и Google Chrome, однако я не уверен, что это правильный способ кодирования.

Я разместил код для него до того, как он заработал, и после применения необходимых изменений, чтобы он заработал.

Вопросы

  • Это правильный способ кодированияэто?
  • Это лучший способ для кодирования?
  • С какими проблемами я могу столкнуться с кодом?

Прежде чем он заработал 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Sample page</title>

    <link rel="stylsheet" type="text/css" href="web.css" media="all" />

    <style type="text/css" media="all">

    html, body {

        height: 100%;
        margin: 0;
        padding: 0;
        font-family: arial, verdana, sans-serif;
        font-size: medium;
        font-weight: normal;
        font-style: none; 
        text-decoration: none; 

    }

    img#bg {

        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;

    }

    #wrapper {

        border: 1px solid #eeeeee;
        width: 960px;
        margin: 0px auto;
        position: relative;
        z-index: 1;

    }

    #header {

        background-color: orange;

    }

    #container {

        overflow: auto;

    }

    #leftnav {

        background-color: yellow;
        float: left;
        width: 100px;

    }

    #rightnav {

        background-color: blue;
        float: right;

    }

    #rightnav p {

        border: 1px solid #000000;
        font-size: small;
        font-style: italic;

    }


    #content {

        background-color: gray;

    }


    #footer {
        clear: both;
        background-color: green;

    }

    ul {

        margin: 0px;
        padding: 5px;

    }

    ul li {

        list-style-type: none;
        display: inline;

    }

    </style>

</head>

<body>

    <div>
        <img src="images/background.jpg" alt="background" id="bg" />
    </div>

    <div id="wrapper">
        <div id="header">
            <ul>
                <li>home</li>
                <li>about</li>
                <li>contact</li>
            </ul>
        </div>

        <div id="container">

            <div id="leftnav">
                <ol>
                    <li>Link 1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                </ol>
            </div>

            <div id="rightnav">
                <p>Test</p>
            </div>

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

        <div id="footer">
            footer
        </div>
    </div>

</body>
</html>

После того, как все заработало 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="imagetoolbar" content="no" />

    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Sample page</title>

    <link rel="stylsheet" type="text/css" href="web.css" media="all" />

    <style type="text/css" media="all">

    html, body {

        height: 100%;
        margin: 0;
        padding: 0;
        font-family: arial, verdana, sans-serif;
        font-size: medium;
        font-weight: normal;
        font-style: none; 
        text-decoration: none;

    }

    img#bg {

        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;

    }

    #wrapper {

        border: 1px solid #eeeeee;
        width: 960px;
        margin: 0px auto;
        position: relative;
        z-index: 1;

    }

    #header {

        background-color: orange;

    }

    #container {

        overflow: hidden;

    }

    #leftnav {

        background-color: yellow;
        float: left;
        width: 100px;

    }

    #rightnav {

        background-color: blue;
        float: right;
        width: 100px;
        padding-bottom: 1000px;
        margin-bottom: -1000px;

    }

    #rightnav p {

        border: 1px solid #000000;
        font-size: small;
        font-style: italic;

    }


    #content {

        background-color: gray;

    }


    #footer {
        clear: both;
        background-color: green;

    }

    ul {

        margin: 0px;
        padding: 5px;

    }

    ul li {

        list-style-type: none;
        display: inline;

    }

    </style>

</head>

<body>

    <div>
        <img src="images/background.jpg" alt="background" id="bg" />
    </div>

    <div id="wrapper">
        <div id="header">
            <ul>
                <li>home</li>
                <li>about</li>
                <li>contact</li>
            </ul>
        </div>

        <div id="container">

            <div id="leftnav">
                <ol>
                    <li>Link 1</li>
                    <li>Link 2</li>
                    <li>Link 3</li>
                </ol>
            </div>

            <div id="rightnav">
                <p>Test</p>
            </div>

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

        <div id="footer">
            footer
        </div>
    </div>

</body>
</html>

Ответы [ 2 ]

2 голосов
/ 19 мая 2011

Код в значительной степени в порядке - несколько вещей, которые вы можете сделать:

1.) Вам не нужно определять свойства, которые установлены по умолчанию в браузере: font-weight: normal; уже является значением браузера по умолчанию для тела, поэтому вы можете пропустить его, если не меняете его внешний вид.

2.) margin: 0px; с ним не требуется пиксель - делайте margin: 0;

3.) Идентификаторы имен и классов с именами, относящимися к контенту, но не с макетом: #rightnav может быть справа от вашего текущего макета CSS, но однажды вы можете передумать и поставить его на левую сторону и идентификатор вроде теряет актуальность. #subnav может быть лучшим выбором.

4.) Не совсем понимаю, что вы хотели выполнить с этим кусочком кода (поскольку у меня нет времени настроить пример с живым сайтом): 

    padding-bottom: 1000px;
    margin-bottom: -1000px;

но выглядит немного некрасиво, хотя это совершенно правильно и может сделать работу.

5.) <img src="images/background.jpg" alt="background" id="bg" /> - Если изображение является фоновым и не связано с содержимым, используйте свойство css background-image, чтобы применить его.

Я не буду комментировать метатеги, так как у меня недостаточно знаний об этом.

0 голосов
/ 19 мая 2011

Несколько комментариев относительно мета-тегов ... 

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

Эти мета-теги бесполезны. 

<meta name="keywords" content="" />

Мета-ключевые слова, используемые для значения.Ни одна поисковая система больше не беспокоится об этом, поскольку им постоянно злоупотребляют. 

<meta name="description" content="" />

И этот метатег ... ну ... не бесполезен, но почти.Содержимое страницы должно полностью описывать вас.

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

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

...