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

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

ОБНОВЛЕННЫЙ КОД

<!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;

        }

        #wrapper {


        }

        #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;

        }

        #content {

            background-color: orange;

        }

        #footer {

            background-color: blue;

        }

    </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>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

ОРИГИНАЛЬНАЯ ПОЧТА

Я новичок в мире кодирования, а также CSS. Я пытаюсь выстроить элементы CSS, но не знаю, как разместить какие-то линии, чтобы получить точную высоту строки, положение и т. Д. Я пытался использовать FireBug, но безрезультатно. Есть ли какой-нибудь инструмент, который я могу использовать для размещения сетки над холстом?

РЕДАКТИРОВАТЬ

Вот пример кода, с которым я работаю.

<!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">

    body {

        margin: 0;
        padding: 0;

    }

    #wrapper {


    }

    #header {

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

    }

    #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;
        word-spacing: 10px;

    }

    #content {

        background-color: orange;

    }

    #footer {

        background-color: blue;

    }

    </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>
        <div id="content">content</div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

Ответы на вопрос(3)

Ваш ответ на вопрос