Пример CSS страница комментарий код


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

Примечание

  • Файл не имеет внешнего CSS как сделать как я тестирую стиле с внутренним stylesheeting до переезда его через внешний файл.
  • Файл также закомментировать CSS я.Е /** **/ где это дает вам представление о том, что я пытался достичь с помощью установки в отличие от поплавка. Мне до сих пор неясно, как, когда использовать. Я был бы признателен за любую ввода.
  • Страница была разработана на большом экране, так что не будет адаптироваться к меньшим экраном. Это мой следующий вызов, чтобы попробовать и адаптировать его на небольшом экране.

Код

<!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>Example</title>

    <base href="" />

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

    <style type="text/css">

        * {

            margin: 0;
            padding: 0;

        }

        html, body {

            height: 100%;

        }

        #wrapper {

            min-height: 100%;

        }

        #header {

            background-image: url('images/bg-inner-page.gif');
            height: 200px;

        }

        #logo {

            float: left;
            margin-top:  50px;
            margin-left: 100px;

        }

        #topnav {

            float: right;
            margin-top: 50px;
            margin-right: 1250px;

        }

        #topnav ul {

            word-spacing: 10px;

        }


        #topnav ul li {

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

        }

        #columns {

            width: 400px;
            float: left;
            margin-top: 20px;
            margin-left: 200px;

        }

        #col1 {

            float: left;
            margin-right: 10px;
            width: 100px;
            border: 1px solid #ffffff;
            border-radius: 5px;
            height: 80px;

        }

        #col2 {

            float: left;
            margin-right: 10px;
            width: 100px;
            border: 1px solid #ffffff;
            border-radius: 5px;
            height: 80px;

        }

        #col3 {

            float: left;
            width: 100px;
            border: 1px solid #ffffff;
            border-radius: 5px;
            height: 80px;

        }

        #content {

            float: left;
            background-color: orange;
            width: 500px;
            margin-top: 10px;
            margin-left: 500px;
            overflow: auto;
            padding-bottom: 150px;

        }

        #footer {

            position: relative;
            margin-top: -150px;
            height: 150px;
            background-color: #cccccc;
            clear: both;

        }

        #sidebar {

            float: left;
            width: 100px;
            margin-top: 10px;
            background-color: gray;

        }

        /**

        #logo {

            width: 20px;
            position: relative;
            top: 50px;
            left: 100px;

        }

        #topnav {

            width: 500px;
            position: relative;
            top: 14px;
            left: 150px;

        }

        #topnav ul {

            word-spacing: 10px;

        }

        #topnav ul li {

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

        }
        **/


    </style>
</head>

<body>

    <div id="wrapper">
        <div id="header">

            <div id="logo">
                logo
            </div>

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

            <div id="columns">
                <div id="col1">col1</div>
                <div id="col2">col2</div>
                <div id="col3">col3</div>
            </div>

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

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

</body>
</html>


5201
1
задан 24 мая 2011 в 12:05 Источник Поделиться
Комментарии
2 ответа

Первое, что вы должны думать о том, если вам действительно нужно использовать в XHTML. XHTML, имеет практически никаких преимуществ и много недостатков по сравнению с HTML 4.01 строгий (или HTML 5). Смотри, например, http://www.webdevout.net/articles/beware-of-xhtml .

Основная идея HTML и CSS является то, что все "потоки" и приспосабливается. Когда делаете веб-дизайн одно многие дизайнеры делают не так (в моем варианте по крайней мере) игнорировать этот "поток" и "думать" и дизайна в пикселях. Это может легко пойти не так, потому что пользователь может (и должен) легко переопределить многие вещи (самое главное размер шрифта), который будет ломать жесткие пиксельного дизайна. Это происходит обычно из-за фиксированной высоты или плохо абсолютно позиционированных элементов.

В вашем случае это будет относиться к "заголовок" и "колонны", которые содержат текст, и вы дали фиксированную высоту в пикселях. Попробовать, что произойдет, если размер шрифта больше или текста больше, чем вы ожидаете.

Рассмотрите возможность использования менее универсальные идентификаторы. Особенно "колонна" и "столбца col1/2/3" не дает никакой информации о том, что они содержат.

Вы можете упростить и сократить код CSS, применяя более сложные селекторы, чтобы воспользоваться "каскадную" часть экране. Например, вы повторяете одни и те же свойства для "столбца col1/2/3", которая может быть перемещена в правило с селектором #столбцы > див (или #колонны див если у вас есть поддержка IE 6):

#columns > div {
float: left;
margin-right: 10px;
width: 100px;
border: 1px solid #ffffff;
border-radius: 5px;
height: 80px;
}

#col3 {
margin-right: 0;
}

Для адаптации к различным размеры окон, вид на CSS 3 медиа запросы

Для вашего закомментирована часть: вы используете позицию: относительный безосновательно. Взгляните на http://www.barelyfitz.com/screencast/html-training/css/positioning/ чтобы увидеть, как позиция: родственник работает, и для чего.

Вы, наверное, подумали вы используете позицию: абсолютная, но вы не должны. Макеты с позиции: абсолютное может легко сломаться, если вы делаете это неправильно. Вы должны рассмотреть позицию: абсолютная последняя инстанция, если нет другого способа для осуществления макета. Используя поплавка , как вы делаете гораздо лучше, так как он пользуясь "поток".

3
ответ дан 24 мая 2011 в 11:05 Источник Поделиться

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

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

3 - для дизайна, который подходит для всех видов экранов, которые вы должны использовать %в возрасте или определить размер экрана и использовать несколько CSS-файлов.

Во всяком случае, глядя на код и просмотр результата у нас нет способа узнать, что вы пытаетесь достичь. Хотя это выглядит как базовый 3 колонки + контент + дизайн навигационной панели.
Взгляните сюда и посмотреть, если вы можете найти что-нибудь похожее на то, что вы хотите и посмотреть, как они это делают.

Для кодирования вопросов на сайте StackOverflow

2
ответ дан 24 мая 2011 в 05:05 Источник Поделиться