<MyRusakov.ru />

Вёрстка сайта с нуля 2.0

Вёрстка сайта с нуля 2.0

Система "Вёрстка сайта с нуля 2.0" содержит в себе не только сами видеоуроки по адаптивной вёрстке сайтов с примерами, но и вспомогательную систему для более эффективного обучения.

Сам курс обучит Вас абсолютно с нуля HTML5 и CSS3, а также научит верстать сайты с помощью реальных примеров вёрстки. Обучение идёт от простого к сложному. В последнем разделе курса идёт обучение адаптивной вёрстке сайтов: Вы узнаете всю необходимую теорию, а также увидите пример реальной адаптивной вёрстки сайта.

Как итог, курс совмещает в себе всё, что нужно по HTML, CSS и адаптивной вёрстке сайтов, с наглядными примерами, с обучением от простого к сложному и без необходимости иметь начальных знаний, а благодаря вспомогательной системе психологически курс проходится очень легко, а на выходе Вы сможете сделать адаптивную вёрстку любого сайта любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Форум сайта MyRusakov.ru

Проблема с отступами в Div
24.12.2011 12:36:29 Проблема с отступами в Div Сообщение #1
Arch

Arch

Новичок

Новичок

Дата регистрации:
24.12.2011 12:03:43

Сообщений: 11

Доброго времени суток!

Отдельно хочу поблагодарить за Ваш сайт, очень много полезной и четко структурированной информации, спасибо огромное!

Ну теперь суть вопроса)
Столкнулся с такой проблемой, перерыл весь Google вопросы похожие есть, а ответов так и не нашел..

Есть например такой код:

<html>
<header>
....
</header>
<body>
<div class="div1">
<div class="div2">
<?php
require_once "file_name.php"
?>
</div>
</div>
</body>
</html>


В файле file_name.php может находиться любой в общем-то код...
Такой код нормально отображается на странице и никаких проблем с ним не возникает,
Но есть необходимость транслировать не содержимое второго блока (<div class="div2">, а именно сам блок т.е. вот-так:

<html>
<header>
....
</header>
<body>
<div class="div1">
<?php
require_once "file_name.php"
?>
</div>
</body>
</html>


и в файле file_name.php соответственно должно быть:

<div class="div2">
какой-то код...
</div>


Но когда так делаю сверху блока div2 появляется полоска с background'om из блока div1 шириной в строку, около 20px., CSS остается тем-же, проблема возникает именно при попытке вставить файл в котором содержится блок div.
Можно это как нибудь победить?

Профиль Ответить
24.12.2011 13:00:50 Проблема с отступами в Div Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Вопрос полностью понятен, однако, не очень понятно, откуда может браться ошибка. Ведь код HTML один и тот же. Возможно, в файле file_name.php есть ещё что-нибудь, например, какие-нибудь пробелы.
В общем, сверьте 2 HTML-кода и найдите отличия. Они должны быть полностью идентичны, тогда и будет всё работать.
Профиль Ответить
24.12.2011 13:12:38 Проблема с отступами в Div Сообщение #3
Arch

Arch

Новичок

Новичок

Дата регистрации:
24.12.2011 12:03:43

Сообщений: 11

Дело в том что проверял на даже на полностью пустом файле file_name.php
Проблема появляется именно в тот момент когда я в него переношу блок с div2 и даже вот в таком виде,

<div class="div2">
</div>


когда между div'ами ничего нет вообще полоса остается...

браузер тоже видит один и тот-же код (кстати проверял в Opere, Mozila, Chrom, IE7, IE8), но полоса откуда-то берется, причем высота самого блока правильная. Полоса выглядит как надстройка над блоком...
Мистика какая то)
Профиль Ответить
24.12.2011 13:20:15 Проблема с отступами в Div Сообщение #4
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

А <header> вообще для чего? Он же только в HTML5 и вообще на его месте там должен быть <head>.
Профиль Ответить
24.12.2011 13:22:16 Проблема с отступами в Div Сообщение #5
Arch

Arch

Новичок

Новичок

Дата регистрации:
24.12.2011 12:03:43

Сообщений: 11

да сори ошибся в примере, конечно в исходном коде написан <head>
Профиль Ответить
24.12.2011 13:29:34 Проблема с отступами в Div Сообщение #6
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Только что всё проверил, всё хорошо, никаких полосок не появляется.
Поэтому покажите полностью весь код, в том числе и CSS.
Профиль Ответить
24.12.2011 13:43:31 Проблема с отступами в Div Сообщение #7
Arch

Arch

Новичок

Новичок

Дата регистрации:
24.12.2011 12:03:43

Сообщений: 11

CSS:


@charset "UTF-8";
/* CSS Document */

.wind {
background: #00F ;
width: 100% ;
height: 100% ;
border: none ;
}

.header {
background: #0085c2 ;
width: 100%;
height: 100px;
position: relative;
left: 0;
border: none ;
}

.conteyner {
background: #0C0 ;
width: 100%;
margin: 0 auto;
position: inherit;
top: 80px;
min-height: 600px;
border: none ;
}

.content {
background: #309 ;
padding-left: 2%;
padding-right: 2%;
width: 86%;
float: left;
border: none ;
}

.sitebar {
background: #CC6 ;
width: 10%;
float: right;
border: none ;
}

.footer {
background: #0085c2 ;
padding: 10px 0;
position: relative;
height: 40px;
border: none ;
}





Так все нормально! Все присоединяемые файлы пустые.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wind"> <!--Здесь распологается рабочая область во весь экран -->
<div class="header"> <!--шапка сайта -->
<?php
require_once "header.php" ;
?>
</div> <!--конец шапки сайта -->

<div class="conteyner"> <!-- контейнер основного текстового поля и боковой панели -->
<div class="content"> <!--контейнер основного контента-->
<?php
require_once "content.php" ;
?>
</div> <!-- конец контейнера контента-->
<div class="sitebar"> <!--контейнер боковой панели сайта-->
<?php
require_once "sitebar.php" ;
?>
"</div> <!--конец контейнера боковой панели-->
</div> <!--конец основного контейнера-->
<div class="footer"> <!--подвал сайта-->
<?php
require_once "footer.php" ;
?>
</div> <!--конец подвала-->
</div> <!--конец контейнера wind -->
</body>
</html>


Так появляется полоса:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wind"> <!--Здесь распологается рабочая область во весь экран -->
<?php
require_once "header.php" ;
?>

<div class="conteyner"> <!-- контейнер основного текстового поля и боковой панели -->
<div class="content"> <!--контейнер основного контента-->
<?php
require_once "content.php" ;
?>
</div> <!-- конец контейнера контента-->
<div class="sitebar"> <!--контейнер боковой панели сайта-->
<?php
require_once "sitebar.php" ;
?>
"</div> <!--конец контейнера боковой панели-->
</div> <!--конец основного контейнера-->
<div class="footer"> <!--подвал сайта-->
<?php
require_once "footer.php" ;
?>
</div> <!--конец подвала-->
</div> <!--конец контейнера wind -->
</body>
</html>



header.php

<div class="header"> <!--шапка сайта -->
Здесь располагается содержимое class "header"
</div> <!--конец шапки сайта -->
Профиль Ответить
24.12.2011 13:59:30 Проблема с отступами в Div Сообщение #8
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Под всё имелось всё необходимое, а не вообще всё. Оставьте минимум того, когда ещё появляется ошибка.
Профиль Ответить
24.12.2011 14:18:42 Проблема с отступами в Div Сообщение #9
Arch

Arch

Новичок

Новичок

Дата регистрации:
24.12.2011 12:03:43

Сообщений: 11

Ну если по минимуму то есть вот такой файл
index.php
и он работает нормально)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wind"> <!--Здесь распологается рабочая область во весь экран -->
<div class="header"> <!--шапка сайта -->
<?php
require_once "header.php" ;
?>
</div> <!--конец шапки сайта -->

</div> <!--конец контейнера wind -->
</body>
</html>

файл header.php пустой в нем нет ничего...

если исправить код вот так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wind"> <!--Здесь распологается рабочая область во весь экран -->
<?php
require_once "header.php" ;
?>

</div> <!--конец контейнера wind -->
</body>
</html>


а в файл header.php соответственно перенисти Div

<div class="header"> <!--шапка сайта -->
Здесь располагается содержимое class "header"
</div> <!--конец шапки сайта -->


то появляется полоса сверху

CSS в обоих случаях такой:

@charset "UTF-8";
/* CSS Document */

.wind {
background: #3F3 ;
width: 100% ;
height: 100% ;
border: none ;
}

.header {
background: #0085c2 ;
width: 100%;
height: 100px;
position: relative;
left: 0;
border: none ;
}
Профиль Ответить
24.12.2011 15:02:10 Проблема с отступами в Div Сообщение #10
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Всё тщательно посмотрел, проверил. Проверял в самых разных браузерах, никаких полосок сверху не обнаружил (если не считать отступ от самого body, для того, чтобы его убрать надо body {margin: 0; padding: 0;})
А вообще CSS весьма странный. Непонятно, зачем писать у блока width: 100%; Он и так всегда на максимум ширины растягивается. height: 100%; вообще не рабочий метод, блок по высоте обрамляет своё содержимое, а чтобы сделать height: 100%; нужно написать несколько больше.

Непонятно так же зачем писать position: relative и left: 0; Этот блок и так будет в верхнем левом углу. В общем, вот такие ошибки я заметил, а никаких полосок не увидел.
Профиль Ответить