Показано с 1 по 12 из 12

Тема: CSS верстка

  1. #1

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Впервые сверстал сайт на <div>, вот его макет [Только зарегистрированные пользователи могут видеть ссылки. ].
    Возникла проблема. В Фоксе правый верхний угловой контейнер почему-то сдвинут влевао, хотя в ИЕ и Опере все ок, может, знаете в чем проблема?

    На остальные недочеты прошу не обращать внимания, интересует сейчас именно этот вопрос. Заранее благодарен.

    Вот код HTML:

    Код:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    ****<title>Untitled</title>
    ****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    ****<meta name="resource-type" content="document">
    ****<meta name="author" content="LOVATA Group">
    ****<meta name="keywords" content="">
    ****<meta name="description" content="">
    ****<meta name="classification" content="">
    ****<meta name="copyright" content=" (c) 2006 LOVATA Group">
    ****<meta name="language" content="Russian Federation">
    ****<link rel="stylesheet" type="text/css" href="style1.css">
    ****<link rel="shortcut icon" href="http://lovata.com/makets/romazanova.com/favicon.ico">
    </head>
    <body><div id="parent">
    <div id="corner_1"></div>
    <div id="corner_2"><table cellspacing="0" cellpadding="0" border="0" class="lng">
    <tr>
     * *<td width="19">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
     * *<td width="6">|</td>
     * *<td width="19">[Только зарегистрированные пользователи могут видеть ссылки. ]</td>
    </tr>
    </table>
     *</div>
    <div id="corner_3"></div>
    <div id="corner_4"></div>
    <div id="sitename"></div>
    <div id="girl"></div>
    <div id="menu">[Только зарегистрированные пользователи могут видеть ссылки. ]
    
    [Только зарегистрированные пользователи могут видеть ссылки. ]
    
    [Только зарегистрированные пользователи могут видеть ссылки. ]
    
    [Только зарегистрированные пользователи могут видеть ссылки. ]
    
    [Только зарегистрированные пользователи могут видеть ссылки. ]</div>
    <div id="copy" class="copy">&copy; 2006 [Только зарегистрированные пользователи могут видеть ссылки. ]</div></div>
    </body>
    </html>
    Вот код CSS:

    Код:
    *{
     *margin: 0;
     *padding: 0;
    }
    A:link {
    ****color: #000000;
    ****text-decoration: none;****
    }
    A:visited {
    ****color: #555555;
    ****text-decoration: none; *
    }
    A:active, A:hover {
    ****color: #6d2c27;
    ****text-decoration: none;
    }
    BODY {
    ****background: #d9d3c2;
    ****margin: 0px;
    ****padding: 0px;
    }
    INPUT, TEXTAREA {
    ****background: #ffffff; 
    ****border: #1C3C85 1px solid #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****margin: 1px 2px;
    }
    
    .lng, {
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif;
    ****margin-top: 7px;****
    ****margin-left: -6px;
    ****text-align: center;
    }
    
    #copy{
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif;****
    ****left: 310px;
    ****letter-spacing: 1px;****
    ****position: absolute;
    ****top: 530px;
    }
    #copy:hover {
     *font-weight: bold;
    }
    #corner_1{
    ****background: url(images/corner_1.gif) no-repeat;
    ****height : 149px;
    ****left: 0px;
    ****position: absolute;
    ****top: 0px;
    ****width : 213px;
    }
    #corner_2{
    ****background: url(images/corner_2.gif) no-repeat;
    ****height : 60px;
    ****position: absolute;
    ****right : 0px;
    ****top: 0px;
    ****padding-left: 63px;
    ****padding-top: 15px;
    ****width : 141px;
    }
    #corner_3{
    ****background: url(images/corner_3.gif) no-repeat;
    ****bottom: 0px;
    ****height : 56px;
    ****left: 0px;
    ****position: absolute;
    ****width : 63px;
    }
    #corner_4{
    ****background: url(images/corner_4.gif) no-repeat;
    ****bottom: 0px;
    ****height : 165px;
    ****position: absolute;
    ****right: 0px;
    ****width : 140px;
    }
    #girl{
    ****background: url(images/girl.gif) no-repeat;
    ****height : 292px;
    ****left: 305px;
    ****position: absolute;
    ****top: 129px;
    ****width : 161px;
    }
    #menu{
    ****color: #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****height : 150px;
    ****left: 500px;
    ****letter-spacing: 2px;
    ****line-height: 20px;
    ****position: absolute;
    ****top: 225px;
    }
    #parent{
    ****background: #fdf6e2;
    ****border: solid 1px;
    ****height: 550px;
    ****left: 50%;
    ****margin-left: -390px;
    ****margin-top: -275px;
    ****position: absolute;
    ****top: 50%;
    ****width : 780px;
    }
    #sitename{
    ****background: url(images/sitename_ru.gif) no-repeat;
    ****height : 40px;
    ****left: 60px;
    ****position: absolute;
    ****top: 253px;
    ****width : 214px;
    }

  2. #2

    Регистрация
    28.02.2006
    Сообщений
    29
    Разница в отображении была из-за неверного доктайпа, хороший, кстати, пример для чего он нужен И раз уж решили верстать слоями лучше переходить на XHTML…

    Все ошибки исправлять не стал, соответствующей просьбы не было Но переделал вывод языков, ибо Вы сказали, что верстка ДИВная, а не табличная, таблице там явно не место…

    Стоит Вам поэксперементировать с padding`ами и шириной блока, увидите, что браузеры по разному себя ведут, это очень важно в ДИВ верстке.

    Еще меня крайне смущает способ центрирования, попробуйте уменьшить окно браузера, и увидите, что часть контента уходит за нескроллируемй край.




    HTML:
    Код:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <meta name="resource-type" content="document">
    <meta name="author" content="LOVATA Group">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="classification" content="">
    <meta name="copyright" content=" (c) 2006 LOVATA Group">
    <meta name="language" content="Russian Federation">
    <link rel="stylesheet" type="text/css" href="style1.css">
    <link rel="shortcut icon" href="http://lovata.com/makets/romazanova.com/favicon.ico">
    </head>
    <body>
    <div id="parent"> 
    ****<div id="corner_1"></div>
    ****<div id="corner_2">
     *<div>[Только зарегистрированные пользователи могут видеть ссылки. ]|[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
    ****</div>
    
    ****<div id="corner_3"></div>
    ****<div id="corner_4"></div>
    ****<div id="sitename"></div>
    ****<div id="girl"></div>
    
    ****<div id="menu"> 
     *[Только зарегистрированные пользователи могут видеть ссылки. ]
    
     *[Только зарегистрированные пользователи могут видеть ссылки. ]
    
     *[Только зарегистрированные пользователи могут видеть ссылки. ]
    
     *[Только зарегистрированные пользователи могут видеть ссылки. ]
    
     *[Только зарегистрированные пользователи могут видеть ссылки. ]
    ****</div>
    
    ****<div id="copy" class="copy">&copy; 2006 [Только зарегистрированные пользователи могут видеть ссылки. ]</div>
    </div>
    </body>
    </html>

    CSS:
    Код:
    *{
    ****margin: 0;
    ****padding: 0;
    }
    A:link {
    ****color: #000000;
    ****text-decoration: none; 
    }
    A:visited {
    ****color: #555555;
    ****text-decoration: none; *
    }
    A:active, A:hover {
    ****color: #6d2c27;
    ****text-decoration: none;
    }
    BODY {
    ****background: #d9d3c2;
    ****margin: 0px;
    ****padding: 0px;
    }
    INPUT, TEXTAREA {
    ****background: #ffffff; 
    ****border: #1C3C85 1px solid #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****margin: 1px 2px;
    }
    #copy{
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif; 
    ****left: 310px;
    ****letter-spacing: 1px; 
    ****position: absolute;
    ****top: 530px;
    }
    #copy:hover {
    ****font-weight: bold;
    }
    #corner_1{
    ****background: url(images/corner_1.gif) no-repeat;
    ****height : 149px;
    ****left: 0px;
    ****position: absolute;
    ****top: 0px;
    ****width : 213px;
    }
    
    /* исправленное */
    #corner_2 {
    ****float: *right;
    ****width: *141px;
    ****height: 60px;
    ****background: url(images/corner_2.gif) no-repeat;
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif;
    }
    #corner_2 div {
    ****padding: 16px 0px 0px 58px;
    }
    #corner_2 span {
    ****padding: 0px 4px;
    }
    /* ^^^^^^^^^^^^^^^^^^^^^^ */
    
    #corner_3{
    ****background: url(images/corner_3.gif) no-repeat;
    ****bottom: 0px;
    ****height : 56px;
    ****left: 0px;
    ****position: absolute;
    ****width : 63px;
    }
    #corner_4{
    ****background: url(images/corner_4.gif) no-repeat;
    ****bottom: 0px;
    ****height : 165px;
    ****position: absolute;
    ****right: 0px;
    ****width : 140px;
    }
    #girl{
    ****background: url(images/girl.gif) no-repeat;
    ****height : 292px;
    ****left: 305px;
    ****position: absolute;
    ****top: 129px;
    ****width : 161px;
    }
    #menu{
    ****color: #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****height : 150px;
    ****left: 500px;
    ****letter-spacing: 2px;
    ****line-height: 20px;
    ****position: absolute;
    ****top: 225px;
    }
    #parent{
    ****background: #fdf6e2;
    ****border: solid 1px;
    ****height: 550px;
    ****left: 50%;
    ****margin-left: -390px;
    ****margin-top: -275px;
    ****position: absolute;
    ****top: 50%;
    ****width : 780px;
    }
    #sitename{
    ****background: url(images/sitename_ru.gif) no-repeat;
    ****height : 40px;
    ****left: 60px;
    ****position: absolute;
    ****top: 253px;
    ****width : 214px;
    }

  3. #3

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Спасибо, это действительно исправило ситуацию, но если честно, я не понял необходимости использования флоат, разве в моем случае каждый corner не должен был позиционироваться относительно своего угла? Все почему-то правильно отбражались за исключением этого.

    Далее вопрос по поводу актуальности использования таблиц при дивной верстке. Я сейча поправил код css, таблица была для того чтобы строчка с выбором языка не прыгала, т.к. hover у меня font-weight:bold;, как обойти таблицы? Стоит каждый элемент в отдельный контейнер запихнуть?

    Да и по поводу центрирования родительского контейнера. Действительно, еть проблема ухода контента, но я не знаю, как другим образом центрировать его. Раз уж пошло, в чем еще ошибки мои тогда?
    Вот актуальный код страницы сейчаc.

    HTML:

    Код:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <meta name="resource-type" content="document">
    <meta name="author" content="LOVATA Group">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="classification" content="">
    <meta name="copyright" content=" (c) 2006 LOVATA Group">
    <meta name="language" content="Russian Federation">
    <link rel="stylesheet" type="text/css" href="style1.css">
    <link rel="shortcut icon" href="http://lovata.com/makets/romazanova.com/favicon.ico">
    </head>
    <body>
    <div id="parent"> 
    <div id="corner_1"></div>
    <div id="corner_2">
    <div>[Только зарегистрированные пользователи могут видеть ссылки. ]|[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
    </div>
    <div id="corner_3"></div>
    <div id="corner_4"></div>
    <div id="sitename"></div>
    <div id="girl"></div>
    <div id="menu">
     [Только зарегистрированные пользователи могут видеть ссылки. ]
    
     [Только зарегистрированные пользователи могут видеть ссылки. ]
    
     [Только зарегистрированные пользователи могут видеть ссылки. ]
    
     [Только зарегистрированные пользователи могут видеть ссылки. ]
    
     [Только зарегистрированные пользователи могут видеть ссылки. ]
    </div>
    <div id="copy" class="copy">&copy; 2006 [Только зарегистрированные пользователи могут видеть ссылки. ]</div>
    </div>
    </body>
    </html>
    CSS:

    Код:
    *{
    ****margin: 0;
    ****padding: 0;
    }
    A:link {
    ****color: #000000;
    ****text-decoration: none; 
    }
    A:visited {
    ****color: #555555;
    ****text-decoration: none; *
    }
    A:active, A:hover {
    ****color: #6d2c27;
    ****text-decoration: none;
    ****font-weight: bold;
    }
    BODY {
    ****background: #d9d3c2;
    ****margin: 0px;
    ****padding: 0px;
    }
    INPUT, TEXTAREA {
    ****background: #ffffff; 
    ****border: #1C3C85 1px solid #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****margin: 1px 2px;
    }
    #copy{
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif; 
    ****left: 310px;
    ****letter-spacing: 1px; 
    ****position: absolute;
    ****top: 530px;
    }
    #copy a:hover {
    ****font-weight: normal;
    }
    #corner_1{
    ****background: url(images/corner_1.gif) no-repeat;
    ****height: 149px;
    ****left: 0px;
    ****position: absolute;
    ****top: 0px;
    ****width: 213px;
    }
    #corner_2 {
    ****float: *right;
    ****width: *141px;
    ****height: 60px;
    ****background: url(images/corner_2.gif) no-repeat;
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif;
    }
    #corner_2 div {
    ****padding: 16px 0px 0px 58px;
    }
    #corner_2 span {
    ****padding: 0px 4px;
    }
    #corner_3{
    ****background: url(images/corner_3.gif) no-repeat;
    ****bottom: 0px;
    ****height : 56px;
    ****left: 0px;
    ****position: absolute;
    ****width : 63px;
    }
    #corner_4{
    ****background: url(images/corner_4.gif) no-repeat;
    ****bottom: 0px;
    ****height: 165px;
    ****position: absolute;
    ****right: 0px;
    ****width: 140px;
    }
    #girl{
    ****background: url(images/girl.gif) no-repeat;
    ****height: 292px;
    ****left: 305px;
    ****position: absolute;
    ****top: 129px;
    ****width: 161px;
    }
    #menu{
    ****color: #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****height: 150px;
    ****left: 500px;
    ****letter-spacing: 2px;
    ****line-height: 20px;
    ****position: absolute;
    ****top: 225px;
    }
    #parent{
    ****background: #fdf6e2;
    ****border: solid 1px;
    ****height: 550px;
    ****left: 50%;
    ****margin-left: -390px;
    ****margin-top: -275px;
    ****position: absolute;
    ****top: 50%;
    ****width : 780px;
    }
    #sitename{
    ****background: url(images/sitename_ru.gif) no-repeat;
    ****height: 40px;
    ****left: 60px;
    ****position: absolute;
    ****top: 253px;
    ****width: 214px;
    }

  4. #4

    Регистрация
    28.02.2006
    Сообщений
    29
    float я использовал только потому, что он занимает одну строчку, а позиционирование целых три

    FF отображал иначе страницу потому, что он понимает ширину блока как: margin-left + padding-left + width + padding-right + margin-right. Т.е. в данном случае ширина равнялась: 63px + 141px = 204px;

    Так кардинально стиль ссылкам при наведении лучше не менять, но раз решили так сделать, то поступить можно следующим образом:

    добавить/изменить в CSS:
    Код:
    #corner_2 span {
     * *float:left;
     * *padding: 0px 4px 0px 2px;
    }
    #corner_2 a {
     * *float:left;
     * *width:14px;
     * *display:block;
    }
    Решение проблемы в лоб, конечно, но зато вполне рабочий

    По поводу центрирования, нет времени писать, можете поискать статьи на эту тему тут: [Только зарегистрированные пользователи могут видеть ссылки. ] , если не разберетесь, то чуть попозже разберем вместе…

  5. #5

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    пасиб, у меня возник вопрос, а как правильнее добавить флэш анимацию на сайт .swf подгоужать тоже через css или в html нужно добавить в соответствующий контейнер флэш-объект? Внизу ссылка на то, что я сделал сейчас.

    [Только зарегистрированные пользователи могут видеть ссылки. ]

    Да, кстати, я добавил favicon. Он отображается и в адресной строке и в закладках браузеров, но при добавлении в избранное нет. Почему? Иконка 32x32 по размеру.

    Еще 1 вопрос. На сайте будет галерея фотографий. Мне ее тоже стоит делать на <div> без таблиц??

  6. #6

    Регистрация
    28.02.2006
    Сообщений
    29
    1. Флеш. А чего там выдумывать, как обычно:
    <object type="application/x-shockwave-flash" data="swf.swf" width="100" height="100">
    <param name="movie" value="swf.swf" />
    </object>
    А далее этот объект можно хоть в див, хоть куда помещать.
    При желании можно высоту и ширину в CSS прописать, так даже лучше будет…

    2. Пиктограмма. У меня в закладках она есть (но это в Opera), наверно имелось в виду закладки Internet Explorer. Попробуйте сделать вот что:

    — прописать путь к значку так:
    <link rel="shortcut icon" href="/makets/romazanova.com/favicon.ico" type="image/x-icon" />

    — и сразу встречный вопрос: у вас иконка только 32x32? Если, да то обязательно надо сделать 16х16, можно в одном файле хранить 32х32 и16х16, потому как интернет эксплорер способен нормально обрабатывать пиктограммы размером 16х16.

    3. Фотогалерея. Как делать фотогалерею решать Вам ;-). Но раз уж было решено верстать на слоях, то и сделать надо бы ее на слоях :-)

  7. #7

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    кевин, очень надеюсь на твою помощь.

    я попробовал сделать так, в центре создать контент блок в который один за одним вставил необходимое кол-во контейнеров, содержащих изображения

    первый ряд я реализовал так

    Код:
    <div id="img1"></div>
    <div id="img1"></div>
    <div id="img1"></div>
    <div id="img1"></div>
    <div id="img1"></div>
    <div id="img1"></div>
    <div id="img1"></div>
    Код:
    #img1{
    ****height: 54px;
    ****border: solid 1px;
    ****float: left;
    ****width: 54px;
    ****margin: 2px;
    }
    но возникла проблмеа в том, что, следующий ряд картинок невозможно позиционировать так, он потребует прописывания координат для каждого контейнера, я прав? намекни, плз, хоть в какую сторону двигаться. заранее благодарен.

    вот, как я хочу чтобы выглядела страница потом.[Только зарегистрированные пользователи могут видеть ссылки. ]

  8. #8

    Регистрация
    20.02.2004
    Адрес
    саратов
    Сообщений
    28
    Код:
    <div class="line">
     * * [img]#[/img]
     * * [img]#[/img]
     * * ...
     * * [img]#[/img]
    </div>
    <div class="line">
     * * [img]#[/img]
     * * [img]#[/img]
     * * ...
     * * [img]#[/img]
    </div>
    Код:
    .line {float:left; clear:left; width:500px; }
    .line img {display:block; float:left; width:54px; height:54px; margin:2px; border:solid 1px #000; }

  9. #9

    Регистрация
    28.02.2006
    Сообщений
    29
    В общем, talisman верно сделал, хотя display:block; — излишен, проще сделать так:

    CSS:
    Код:
    #ph {clear:both; width:420px}
    #ph img {float:left; width:54px; height:54px; margin:2px; border:solid 1px #000}

    HTML:
    Код:
    <div id="ph">
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *[img]1.gif[/img]
     * *...
    </div>
    Т.е. фотографии выдавать одной кучей, а на новую строку они будут вставать сами.
    Ширина блока #ph получилась путем сложения ширины картинки (54 px.) + отступа слева и справа (2 px. + 2 px. = 4 px.) + граница картинки (1 px. + 1 px. = 2 px.) = 60 px. * 7 шт. = 420 px.

  10. #10

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    огромное спасибо вам всем, я понимаю теперь насколько мало было у меня практики использования css 2.1 и xhtml, я на днях приведу странички в порядок в соответствие с вашими советами и стандартами w3c и выложу на суд =) буду благодарен за найденные в них огрехи

  11. #11

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    так, все страницы привел в соответствие с xhtml 1.1 strict, кроме одной
    валидатор w3c ругается на нее, если же ставлю transitional, то все ок

    вот сам страница?
    [Только зарегистрированные пользователи могут видеть ссылки. ]

    вот html:

    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Алла Ромазанова - Живопись, графика, интерьер.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="copyright" content="(c) 2006 LOVATA Group" />
    <link rel="stylesheet" type="text/css" href="style_all.css" />
    <link rel="stylesheet" type="text/css" href="style_feedback.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
    <div id="parent">
    <div id="corner_1"><object type="application/x-shockwave-flash" data="left.swf" width="213" height="149">
    <param name="movie" value="left.swf" /></object></div>
    <div id="corner_2">
    
    
    <div id="corner_4"><object type="application/x-shockwave-flash" data="right.swf" width="140" height="165">
    <param name="movie" value="right.swf" /></object></div>
    
    
    
    <div id="content">
    <form method="post" action="#" id="testForm">
    <label>Ваше имя: 
    </label>
    <input name="name1" />
    
    <label>Ваш e-mail: 
    </label>
    <input name="name2" />
    
    <label>Тема письма: 
    </label>
    <input name="name3" />
    
    <label>Текст сообщения: 
    </label>
    <textarea name="name5" rows="10" cols="10"></textarea>
    
    <input type="submit" value="Отправить" class="noresize submit" />
    <input type="reset" name="reset" />
    </form></div>
    
    </body>
    </html>

    css_all:

    Код:
    *{
    ****margin: 0;
    ****padding: 0;
    }
    a:link {
    ****color: #000000;
    ****text-decoration: none; 
    }
    a:visited {
    ****color: #000000;
    ****text-decoration: none; *
    }
    a:active, a:hover {
    ****color: #6d2c27;
    ****text-decoration: none;
    }
    body {
    ****background: #808080;
    ****margin: 0px;
    ****padding: 0px;
    }
    
    #copy {
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif; 
    ****left: 310px;
    ****letter-spacing: 1px; 
    ****position: absolute;
    ****top: 530px;
    }
    #copy a:hover {
    ****font-weight: normal;
    }
    #corner_1 {
    ****background: url(images/corner_1.gif) no-repeat;
    ****height: 149px;
    ****left: 0px;
    ****position: absolute;
    ****top: 0px;
    ****width: 213px;
    }
    #corner_2 {
    ****background: url(images/corner_2.gif) no-repeat;
    ****color: #000000;
    ****float: *right;
    ****font: 11px Verdana, Helvetica, sans-serif;
    ****height: 60px;
    ****width: *141px;
    }
    #corner_2 a {
    ****display: block;
    ****float: left;
    ****width: 14px;
    }
    #corner_2 a:hover {
    ****font-weight: bold;
    }
    #corner_2 div {
    ****padding: 16px 0px 0px 58px;
    }
    #corner_2 span {
    ****float: left;
    ****padding: 0px 4px 0px 2px;
    }
    #corner_3 {
    ****background: url(images/corner_3.gif) no-repeat;
    ****bottom: 0px;
    ****height : 56px;
    ****left: 0px;
    ****position: absolute;
    ****width : 63px;
    }
    #corner_4 {
    ****float: right;
    ****background: url(images/corner_4.gif) no-repeat;
    ****bottom: 0px;
    ****height: 165px;
    ****position: absolute;
    ****right: 0px;
    ****width: 140px;
    }
    #parent {
    ****background: #fdf6e2;
    ****border: solid 1px #000000;
    ****height: 550px;
    ****left: 50%;
    ****margin-left: -390px;
    ****margin-top: -275px;
    ****position: absolute;
    ****top: 50%;
    ****width: 780px;
    }
    css_feedback:

    Код:
    input, textarea {
    ****background: #ffffff;
    ****border: solid 1px #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****margin: 1px;
    }
    
    #content {
    ****color: #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****height : 300px;
    ****left: 180px;
    ****position: absolute;
    ****top: 203px;
    ****width: 484px;
    }
    #content a {
    ****font-weight: normal;
    ****color: #000000;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****height : 300px;
    ****left: 180px;
    ****position: absolute;
    ****text-decoration: underline;
    ****top: 203px;
    ****width: 500px;
    }
    #menu {
    ****height: 20px;
    ****left: 180px;
    ****position: absolute;
    ****top: 149px;
    ****width: 500px;****
    }
    #menu a {
    ****color: black;
    ****font: 12px Verdana, Helvetica, sans-serif;
    ****font-weight: bold;****
    }
    #menu a:hover {
    ****color: #6d2c27;
    ****font-weight: bold;****
    }
    #submenu {
    ****height: 20px;
    ****left: 180px;
    ****position: absolute;
    ****top: 169px;
    ****width: 500px;****
    }
    #submenu a {
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif;
    }
    #submenu a:hover {
    ****color: #000000;
    ****font: 11px Verdana, Helvetica, sans-serif;
    ****text-decoration: underline;
    }
    #sitename {
    ****background: url(images/sitename_ru.gif) no-repeat;
    ****height: 40px;
    ****left: 263px;
    ****position: absolute;
    ****top: 104px;
    ****width: 214px;
    }
    #testForm input, {
    ****font-family: Verdana, sans-serif;
    ****font-size: 100%;
    ****margin: 0 0 0.5em 0.2em;
    ****padding: 0; *
    ****width: 148px; *
    }
    #testForm label {
    ****float: left;
    ****line-height: 1em;
    ****margin-right: 0.1em;
    ****text-align: left;
    ****width: 10em; *
    }
    #testForm textarea {
    ****font-family: Verdana, sans-serif;
    ****font-size: 100%;
    ****margin: 0 0 0.5em 0.2em;
    ****padding: 0;
    ****width: 25em; *
    }
    #testForm .submit {
    ****margin-left: 126px;
    }
    а вот вердикт w3c validator:
    Below are the results of attempting to parse this document with an SGML parser.

    ** 1. Error Line 5 column 75: character data is not allowed here.

    * * * ...ontent="text/html; charset=windows-1251" />

    * * * You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a

    aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).

    * * * ✉
    ** 2. Error Line 27 column 6: document type does not allow element "LABEL" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <label>���� ���:
    </label>

    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    ** 3. Error Line 28 column 20: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input name="name1" />


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    ** 4. Error Line 28 column 21: character data is not allowed here.

    * * * <input name="name1" />


    * * * You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a

    aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).

    * * * ✉
    ** 5. Error Line 28 column 26: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input name="name1" />


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    ** 6. Error Line 29 column 6: document type does not allow element "LABEL" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <label>��� e-mail:
    </label>

    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    ** 7. Error Line 30 column 20: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input name="name2" />


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    ** 8. Error Line 30 column 21: character data is not allowed here.

    * * * <input name="name2" />


    * * * You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a

    aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).

    * * * ✉
    ** 9. Error Line 30 column 26: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input name="name2" />


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 10. Error Line 31 column 6: document type does not allow element "LABEL" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <label>���� ������:
    </label>

    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 11. Error Line 32 column 20: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input name="name3" />


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 12. Error Line 32 column 21: character data is not allowed here.

    * * * <input name="name3" />


    * * * You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a

    aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).

    * * * ✉
    * 13. Error Line 32 column 26: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input name="name3" />


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 14. Error Line 33 column 6: document type does not allow element "LABEL" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <label>����� ���������:
    </label>

    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 15. Error Line 34 column 42: document type does not allow element "TEXTAREA" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <textarea name="name5" rows="10" cols="10"></textarea>


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 16. Error Line 34 column 58: document type does not allow element "BR" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <textarea name="name5" rows="10" cols="10"></textarea>


    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 17. Error Line 34 column 59: character data is not allowed here.

    * * * <textarea name="name5" rows="10" cols="10"></textarea>


    * * * You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include putting text directly in the body of the document without wrapping it in a container element (such as a

    aragraph</p>) or forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes).

    * * * ✉
    * 18. Error Line 35 column 63: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * ...pe="submit" value="���������" class="noresize submit" />

    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    * * * ✉
    * 19. Error Line 36 column 33: document type does not allow element "INPUT" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "DIV", "PRE", "ADDRESS", "FIELDSET", "INS", "DEL" start-tag.

    * * * <input type="reset" name="reset" />

    * * * The mentioned element is not allowed to appear in the context in which you&#39;ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you&#39;ve forgotten to close a previous element.

    * * * One possible cause for this message is that you have attempted to put a block-level element (such as "

    " or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
    повторюсь, что валидацию, как xhtml 1.1 transitional этот документ проходит, так почему это не подходит для strict, точнее, как это правильно реализовать в strict?

  12. #12

    Регистрация
    28.02.2006
    Сообщений
    29
    Что увидел так это не верный доктайп, нужно так:
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    А вообще используй пока XHTML 1.0 Transitional, когда наберешься опыта можно и более строгие стандарты брать.

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

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

    Ссори, что не мог раньше ответить

Похожие темы

  1. Вёрстка
    от Ti-G-ra в разделе Вёрстка сайта
    Ответов: 6
    Последнее сообщение: 30.06.2007, 12:56
  2. Вёрстка
    от Balu в разделе Вёрстка сайта
    Ответов: 1
    Последнее сообщение: 20.03.2007, 20:59
  3. Верстка
    от P@3[Boy]Huk в разделе Вёрстка сайта
    Ответов: 9
    Последнее сообщение: 04.12.2006, 12:16
  4. CSS верстка
    от Zigzag в разделе Вёрстка сайта
    Ответов: 23
    Последнее сообщение: 23.11.2006, 21:04
  5. Вёрстка CSS :)
    от VovkuS в разделе Вёрстка сайта
    Ответов: 12
    Последнее сообщение: 22.08.2005, 20:20

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •