Блог

Главная - Вопросы по программированию - 2 столбца и несколько строк с использованием CSS

2 столбца и несколько строк с использованием CSS

#html #css

#HTML #css

Вопрос:

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

Примечания

Я использую внутреннюю таблицу стилей, прежде чем скопировать ее во внешнюю таблицу стилей.

Я просто назвал столбцы leftnav и leftnav1 и content и content1. Я знаю, что эти имена не идеальны, однако я пытаюсь определить наилучший способ кодирования страницы, а не беспокоиться о соглашениях об именовании на данный момент.

код

 <!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 name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Sample</title>

    <link rel="icon" type="image/png" href="" />

    <link rel="stylesheet" type="text/css" href="" />

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

    * {

        margin: 0;
        padding: 0;
    }

    body {

        font-family: arial, verdana, sans-serif;
        font-size: 0.8em;

    }

    #backdrop {

        background-color: #000000;
        width: 100%;
        height: 10px;

    }

    #wrapper {

        /* background-color: gray; */
        width: 960px;
        margin: 0px auto;
        margin-top: 100px;

    }

    #logo {

        float: left;
        background-color: #E0EEEE;
        margin-bottom: 10px;

    }

    #topnav {

        float: right;
        margin-right: 180px;
        margin-bottom: 10px;
        /* background-color: #C1CDCD; */

    }

    #topnav ul {

        word-spacing: 5px;

    }

    #topnav ul li {

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

    }

    #innerwrapper {

        clear: both;
        width: 800px;
        margin: 0px auto;

    }

    #header {

        background-color: #000000;
        width: 700px;
        height: 200px;

    }

    #innerhead {

        color: #ffffff;
        padding: 50px;

    }

    #leftnav {

        float: left;
        /* background-color: #838B8B; */
        margin-top: 10px;
        width: 200px;

    }


    #content {

        float: left;
        /* background-color: #CDC9A5; */
        margin-top: 10px;
        width: 500px;

    }

    #leftnav1 {

        float: left;
        /* background-color: #838B8B; */
        margin-top: 10px;
        width: 200px;

    }


    #content1 {

        float: left;
        /* background-color: #CDC9A5; */
        margin-top: 10px;
        width: 500px;

    }

    </style>

</head>

<body>
    <div id="backdrop"></div>
    <div id="wrapper">
        <div id="logo">logo</div>

        <div id="topnav">
            <ul>
                <li>about</li>
                <li>browse</li>
                <li>faq</li>
                <li>contact</li>
            </ul>
        </div>

        <div id="innerwrapper">
            <div id="header">

                <div id="innerhead">
                    Sample text
                </div>

            </div>

            <div id="leftnav">About</div>

            <div id="content">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>

            <div id="leftnav1">About</div>

            <div id="content1">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>
        </div>
    <div>
</body>
</html>

Ответ №1:

Для разделения вашей страницы на столбцы вам лучше потратить некоторое время на изучение фреймворков grid CSS, таких как 960, Blueprint или OOCSS.

После того как ваша страница (или ее части, при желании) будет разделена на необходимое количество столбцов, вы можете разделить каждый столбец либо на строки фиксированной высоты, либо на строки переменной высоты.

Хотя благородно, что вы хотите разобраться с этим самостоятельно, я бы предположил, что, поскольку вы «новичок в мире кодирования», вы могли бы на самом деле извлечь больше пользы из рассмотрения существующих примеров и решений этой известной проблемы проектирования и принятия наилучшего практического подхода с самого начала.

Редактировать

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

Вы объявляете одинаковые стили в двух местах: Leftnav и Leftnav1 было бы лучше изменить на:

 .leftnav { float: left; margin-top: 10px; width: 200px; }

Затем вы можете применить этот класс к обоим левым навигационным контейнерам. То же самое касается ваших стилей content и content1 .

Чтобы ответить на ваш первоначальный вопрос: «правильный ли это способ сделать это», я бы сказал: «строго говоря, нет, это не так. Но это один из способов сделать это.

Лучшим подходом может быть использование следующего:

 <body>
    <div id="backdrop"></div>
    <div id="wrapper">
        <div id="logo">logo</div>

        <div id="topnav">
            <ul>
                <li>about</li>
                <li>browse</li>
                <li>faq</li>
                <li>contact</li>
            </ul>
        </div>

        <div id="innerwrapper">
            <div id="header">

                <div id="innerhead">
                    Sample text
                </div>

            </div>

            <div class="leftCol col300">About</div>

            <div class="main">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>

            <div class="leftCol col300">About</div>

            <div class="main">

                Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.

                Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.

            </div>
        </div>
    <div>
</body>

Затем ваши три требуемых стиля становятся:

 .leftCol { float: left; }
.col300 { width: 300px; }
.main { overflow: hidden; }

Комментарии:

1. @Phil. Уилер — Спасибо. Дело не в том, что я не хочу использовать или смотреть на использование CSS-фреймворков grid, однако я хотел бы узнать и понять, как достичь аналогичного результата. С моей стороны может потребоваться больше кодирования, но, по крайней мере, я узнаю, что означает каждое свойство, как лучше его использовать и т.д., А также о том, как лучше разделить страницу на разделы. Тем не менее, я ценю ваш совет.

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

3. @Фил. Уилер — Спасибо. После публикации вопроса мне пришло в голову, что я должен использовать классы, а не идентификаторы. Считается ли предложенное вами решение наилучшей практикой?

4. @user614208 — Чего я пытаюсь добиться, так это макета с несколькими строками в 2 столбца. Видя, что я новичок в CSS, я собрал страницу, которая, по моему мнению, была бы подходящей, однако я не уверен, лучший ли это способ сделать это или что мне следует изменить, чтобы она соответствовала лучшим практикам.

5. @PeanutsMonkey — Использование повторно используемых классов определенно считается лучшей практикой, так что в этом отношении да. Это наилучший подход. Однако я бы не рассматривал свой полный ответ как абсолютное воплощение качественной веб-разметки. Я пытался придерживаться вашей просьбы работать с тем, что у вас уже есть, и улучшить ключевые моменты.