VPF::Верстка дивами - Форум программистов

MrDmitry

Дата 27.12.2010, 12:55 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравствуйте. К сожалению бог не наделили меня даром верстать сайты ((( А в голову пришла хорошая идея. Так что прошу вашей помощи ) Собственно вот так должно все выглядит

- Извеняйте что все немного криво, рисовал в paint smile

А вот так вот пытался сверстать я

style.css

Код


.menu-top{color:green; width:100%;height: 30px;
border-bottom: 8px solid blue; margin-bottom:20px}
.content{border-bottom: 8px solid green; border-top: 8px solid green; 
border-left: 8px solid green; border-right: 8px solid green;height: 
110px;width:24%; position: relative; top:20px}
.menu-bottom{color:green; width:100%;height:60px;
border-bottom: 8px solid red; margin-bottom:20px}

Код


<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Сайт/title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
<body bgcolor=black>
<div class="menu-top"><center><b>Сылка Сылка Сылка Сылка</b></center></div>
<div class="content"></div><div class="content"></div><div class="content"></div>
<div class="menu-bottom"><center><b>Сылка Сылка Сылка Сылка</b></center></div>
</body>
</html>

В итоге все криво ((((

lemac

Дата 27.12.2010, 19:52 (ссылка)

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

Загрузка ...

Новичок

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

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

Код


.top {
    width:100%;
    height: 30px;
        border-bottom: 8px solid blue; margin-bottom:20px
}
.content {
    float:left;
    border-bottom: 8px solid green; 
    border-top: 8px solid green; 
    border-left: 8px solid green; 
    border-right: 8px solid green;
    height: 100px;    
    width:24%;
    
}


.footer {
    clear:both;
    float:left;
    width:100%;
    border-top:8px solid blue; margin-bottom:20px
}

Код


<div class="top"><center><b>Сылка Сылка Сылка Сылка</b></center></div>

<div class="content">dfgdg</div><div class="content">dfgdfg</div><div class="content">dfgdf</div>

<div class="footer"><center><b>Сылка Сылка Сылка Сылка</b></center></div>

Это сообщение отредактировал(а) lemac - 27.12.2010, 20:37

MrDmitry

Дата 28.12.2010, 12:22 (ссылка)

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

Загрузка ...

Опытный

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

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

Ok спасибо, вроде как надо )

MrDmitry

Дата 8.1.2011, 17:09 (ссылка)

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

Загрузка ...

Опытный

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

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

Извините что поднимаю тему. Проблема в следующем.
Использую код который предоставил уважаемый lemac
Верхний бордюр почему то не прижат к левому и правому краю экрана. На приведенном скриншоте видно о чем я говорю. Как это лечится?

Это сообщение отредактировал(а) MrDmitry - 8.1.2011, 17:13

Codd

Дата 8.1.2011, 20:49 (ссылка)

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

Загрузка ...

Новичок

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

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

*{margin: 0;}

MrDmitry

Дата 18.1.2011, 16:31 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


.top {
    width:100%;
    height: 50px;
    border-bottom: 1px solid #808080;
    margin:0px;     
}

Код


<div class="top"><center><b>Сылка Сылка Сылка Сылка</b></center></div>

Все равно отступ (

masterweek

Дата 19.1.2011, 10:26 (ссылка)

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

Загрузка ...

freelancer

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

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

попробуй прямо в body

Код


<body style="margin: 0">

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