VPF::Подскажите оптимальную вёрстку div-ами

virus3003

Дата 13.8.2013, 10:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 17
Регистрация: 22.2.2013

Репутация: нет
Всего: нет

Есть вот такая рамка из 6 элементов по углам 4 и верхняя лента и нижняя
Каким должен быть оптимальный код? У меня вышел такой , но кажется он не очень грамотен с точки зрения вёрстки проверьте кто что посоветует, мне кажется его можно проще сверстать.
индекс

Цитата

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="menu.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
    <div id="wrapper">
  <div id="menu">
    </div>
  <div id="content2">
  <div id="content">
    <div id="rleftverh"></div>
    <div id="rcentertenta"></div>
    <div id="rrightverh"></div>
    <div id="rleftlenta"></div>
    <div id="rrightlenta"></div>
    <div id="rleftniz"></div>
    <div id="rcenterlentaniz"></div>
    <div id="rrightniz"></div>
  </div>
  </div>
  <div id="footer"></div>

</BODY>

</HTML>

css

Цитата

body {
    margin:0;
    padding:0;
    background:url(fon1.jpg) no-repeat;
}

div#wrapper{
    width:972px;
    height:610px;
    margin:0 auto;
}

div#menu{
    height:44px;
}

div#rleftverh{
    width:18px;
    height:18px;
    background:url(ug1.png) no-repeat;
}

div#rleftlenta{
    position:relative;
    top:-36px;
    width:18px;
    height:485px;
    background:url(verh1.png) repeat-y;
}

div#rleftniz{
    position:relative;
    top:-521px;
    width:18px;
    height:18px;
    background:url(ug3.png) no-repeat;
}

div#rcenterlentaniz{
    position:relative;
    left:18px;
    top:-539px;
    width:937px;
    height:18px;
    background:url(lenta.png) repeat-x;
}

div#rrightniz{
    position:relative;
    left:955px;
    top:-557px;
    width:18px;
    height:18px;
    background:url(ug4.png) no-repeat;
}

div#rrightverh{
    position:relative;
    left:955px;
    top:-36px;
    width:18px;
    height:18px;
    background:url(ug2.png) no-repeat;
}

div#rcentertenta{
    position:relative;
    left:18px;
    top:-18px;
    width:937px;
    height:18px;
    background:url(lenta.png) repeat-x;
}

div#rrightlenta{
    position:relative;
    left:955px;
    top:-521px;
    width:18px;
    height:485px;
    background:url(verh2.png) repeat-y;
}

div#content{
    height:521px;
}

div#content2{
    height:521px;
    background:url(fon2.jpg) repeat-x;
}
div#footer{
    width:972px;
    height:44px;
    background:url(footer.jpg) no-repeat;
}

Присоединённый файл ( Кол-во скачиваний: 8 )

Безимени_2.jpg 76,18 Kb

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »