VPF::дывы наезжают друг на друга - Форум программистов

w03zd8rc

Дата 13.8.2009, 08:24 (ссылка)

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

Загрузка ...

Шустрый

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

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

доктайп:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/html1/DTD/html1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/html" xml:lang="ru">

в опере 9 и ие 7 норм отображается, а вот опера 10, фаерфокс и ие более новые почти все дивы ставят в одну точку. Верстка постороена на дивах путем вложения их друг в друга - один общий, в ней 4 дивблока: шапка, верхнее меню, осн содержание и пол, каждый в свою очередь тоже содержит дивы. В чем может быть ошибка?

пример:

Код


<div id="body1">
    <div id="meny">
       <div id="meny1">
          Эллементы меню
       </div>
    </div>
    <div id="main1">
        <div id='main11'>
        </div>
    <div id='main12'>
        основное содержание
    </div>
</div>

цсс к этому куску:

Код


#body1 {
width:1000px;
padding:0px;
padding-top:4px;
padding-left:35px;
padding-right:35px;
margin:0 auto;
}
#meny {
width:1000px;
height:75px;
}
#meny1 {
float:left;
width:660px;
text-align:center;
}
#main1 {
width:1000px;
margin:0 auto;
}
#main11{
width:1000px;
background:url(../img/main11.png) no-repeat;
height:25px;
padding-top:29px;
padding-left:45px;
}
#main12{
width:1000px;
background:url(../img/main12.png) repeat-y;
text-align:justify;
padding-left:30px;
padding-top:15px;
}

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

Это сообщение отредактировал(а) w03zd8rc - 13.8.2009, 09:08

Forsaken

Дата 13.8.2009, 09:35 (ссылка)

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

Загрузка ...

Бывалый

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

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

w03zd8rc,
Я сейчас поковыряю Ваш пример, только меня уже шокирует Ваш доктайп.. "HTML 1.0" -что за выбор то такой?

w03zd8rc

Дата 13.8.2009, 09:48 (ссылка)

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

Загрузка ...

Шустрый

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

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

Forsaken,
Если не сложно, Посоветуйте более подходящий доктайп (на хосте пхп 4 версии, сайт написан на хтмл,пхп,немного яс+общение с mysql).

А доктайп мне посоветовал дримвейвер8, видимо слушать его было ошибкой =)

Это сообщение отредактировал(а) w03zd8rc - 13.8.2009, 09:49

Forsaken

Дата 13.8.2009, 10:08 (ссылка)

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

Загрузка ...

Бывалый

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

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

w03zd8rc,
У меня странички все как правило начинаются так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
...........................

Мне нравится жесткий XHTML 1.1, можно выбрать помягче HTML 4.01

Я сделал вот так:

Код


<!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" />
    <title>test</title>
    <style type="text/css">
#body1 {
width:1000px;
padding:0px;
padding-top:4px;
padding-left:35px;
padding-right:35px;
margin:0 auto;
background:red;
}
#meny {
width:1000px;
height:75px;
background:green;
}
#meny1 {
float:left;
width:660px;
text-align:center;
}
#main1 {
width:1000px;
margin:0 auto;
background:blue;
}
#main11{
width:1000px;
background:url(../img/main11.png) no-repeat;
height:25px;
padding-top:29px;
padding-left:45px;
}
#main12{
width:1000px;
background:url(../img/main12.png) repeat-y;
text-align:justify;
padding-left:30px;
padding-top:15px;
background:
}

    </style>
</head>
<body>
<div id="body1">
    <div id="meny">
       <div id="meny1">
          Menu
       </div>
    </div>
    <div id="main1">
        <div id='main11'>
        </div>
    <div id='main12'>
        content
    </div>
</div>

</body>
</html>

Получилось так: красный прямоугольник в нем зеленый под ним синий.. никто вроде не наезжает пока. А как Вам нужно? (IE8, Opera 10b2, Firefox 3.5.2)

Хочу заметить что у Вас есть неочень хорошие моменты например body1 у Вас шириной 1000px и паддингом справаи слева 35px, в нем находится див meny к которому установленно 1000px в ширину.. но такой широкий туда не влезет, браузер конечно его сужает, но неделайте так, укажите лучше width: 100%

Добавлено @ 10:14
Вот, посмотрите этот код как работает:

Код


<!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" />
    <title>test</title>
    <style type="text/css">
#body1 {
width:1000px;
padding:0px;
padding-top:4px;
padding-left:35px;
padding-right:35px;
margin:0 auto;
background:red;
}
#meny {
height:75px;
background:green;
}
#meny1 {
float:left;
width:660px;
text-align:center;
}
#main1 {
width:100%;
margin:0 auto;
background:blue;
}
#main11{
background:yellow;
height:25px;
padding-top:29px;
padding-left:45px;
}
#main12{
background:grey;
text-align:justify;
padding-left:30px;
padding-top:15px;
}

    </style>
</head>
<body>
<div id="body1">
    <div id="meny">
       <div id="meny1">
          Menu
       </div>
    </div>
    <div id="main1">
        <div id='main11'>
        </div>
    <div id='main12'>
        content
    </div>
</div>

</body>
</html>

Это сообщение отредактировал(а) Forsaken - 13.8.2009, 10:17

w03zd8rc

Дата 13.8.2009, 11:35 (ссылка)

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

Загрузка ...

Шустрый

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

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

вся проблема в том, что если я ставлю доктайп такого вида:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

опера 9 начинает все дивы в одну точку ставить

Forsaken

Дата 13.8.2009, 13:06 (ссылка)

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

Загрузка ...

Бывалый

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

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

w03zd8rc,
в одну точку это как? в одну строку чтоли?
Уточните версию оперы

Это сообщение отредактировал(а) Forsaken - 13.8.2009, 13:08

w03zd8rc

Дата 13.8.2009, 13:13 (ссылка)

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

Загрузка ...

Шустрый

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

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

Forsaken,
да, не все правда дивы. Иерархия дивов получается примерно такой: главный див, в нем 4 дива (топ, меню, маин, пол), в топе 2 дива, в меню 1 див, в маин 3 дива, в поле 1 див. конечные дивы по отношению к прородителям стоят правильно, а вот прородители по отношению друг к другу нет (в главном диве): верхний левый угол у топа и маина находятся в одной точке, меню нормально идет за топом, пол нормально идет за маином.
при

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/html1/DTD/html1-transitional.dtd">

в опере 9 и ослике 7 нормально как и должно быть, а вот в остальных браузерах (и опере 10) примерно такаяже картина, причем даже если поставить

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

проблема проявляется во всех браузерах без исключения

ЗЫ подопотные браузеры: опера 9.6, ослик 7, мозила 3.0.5

Это сообщение отредактировал(а) w03zd8rc - 13.8.2009, 13:15

Forsaken

Дата 13.8.2009, 13:47 (ссылка)

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

Загрузка ...

Бывалый

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

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

Вот запустите это у себя и скажите что не так (я отредактировал):

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
   <head>
      <title>Tester</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <style>
      html, body {
         margin: 0px; padding: 0px;
         font: 12px/18px "lucida grande", arial, helvetica, sans-serif;
         background: cyan;
      }
      #body1 {
        width:1000px;
        padding:0px;
        padding-top:4px;
        padding-left:35px;
        padding-right:35px;
        margin:0 auto;
        background:red;
      }
      #meny {
        height:75px;
        background:green;
      }
      #meny1 {
      float:left;
      width:660px;
      text-align:center;
      background:yellow;
      }
      #main1 {
      width:100%;
      margin:0 auto;
      background:blue;
      }
      #main11{
        background:grey;
        height:25px;
        padding-top:29px;
        padding-left:45px;
      }
      #main12{
        background:magenta;
        text-align:justify;
        padding-left:30px;
        padding-top:15px;
      }
      </style>
   </head>

   <body>
      <div id="body1">
         <div id="meny">
            <div id="meny1">Меню (расспологается слева)</div>
            &nbsp;зелененький это главный контейнер меню&nbsp;
         </div><!-- meny -->
         <div id="main1">
            <div id="main11">Какойто мэин 11 заполняет собой весь main1 у которого паддинг слева 45px</div>
          </div><!-- main1 -->
          <div id="main12">какойто мэин 12 идет сразу за main1. У мэин 12 пддинг слева 30px</div>
          красный это body1
      </div><!-- body1 -->
    </body>
</html>

У меня все дивы тут по отдельности и окрашенны в разыне цвета.. Что нужно сделать?

Если хоите обрисуйте что хотите а я напишу код. И прошу Вас давайте нормальные id блокам

Это сообщение отредактировал(а) Forsaken - 13.8.2009, 14:01

w03zd8rc

Дата 13.8.2009, 14:01 (ссылка)

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

Загрузка ...

Шустрый

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

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

твой вариант у меня отображается нормально, мою верстку пытаюсь сделать по типу втоего варианта - косяки.

вот полная версия верстки (вырезаны вставки пхп):

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.1//EN"
    "http://www.w3.org/TR/html11/DTD/html11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Югра-экспо</title>
<link rel="stylesheet" title="default" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="body1">
    <div id="top">
     <div id="top1"></div><div id="top2">
        </div>
    </div>
    <div id="meny">
    <div id="meny1">
    </div>
    </div> 
    <div id="main1">
     <div id="main11"></div>
        <div id="main12">Основное содерджание<br>Основное содерджание<br>Основное содерджание<br>Основное содерджание<br></div>
     <div id="main13"></div>
    </div>
    <div id="pol"><br><br><br>Все права защищены.</div>
</div>
</body>
</html>

и цсс к ней:

Код


html, body {
   margin:0;
   padding:0;
   font:12px Arial;
   color:#4b4b4b;
background:#fff;
}

/*Общая склейка*/
#body1 {
width:1000px;
padding:0px;
padding-top:4px;
padding-left:35px;
padding-right:35px;
margin:0 auto;
}
/*------------*/

/*шапка*/
#top {
width:100%;
padding:0px;
margin:0 auto;
padding-left:20px;
}
#top1 {
width:20%;
height:200px;
float:left;
background:url(../../img/logo.png) no-repeat;
}
#top2 {
width:80%;
float:right;
height:200px;
background-color:#FFFFFF;
background:url(../img/panorama.png) no-repeat;
text-align:right;
}
/*------*/

/*меню*/
#meny {
height:75px;
/*background-color:#FFFFFF;
background:url(../img/meny.png) center no-repeat;
*/}
#meny1
{
float:left;
width:660px;
text-align:center;
}
/*------*/

/*Основное содержание */
#main1 {
width:100%;
margin:0 auto;
}
#main11{
width:100%;
background:url(../img/main11.png) no-repeat;
height:25px;
padding-top:29px;
padding-left:45px;
}
#main12{
width:100%;
background:url(../img/main12.png) repeat-y;
text-align:justify;
padding-left:30px;
padding-top:15px;

}
#main13{
padding-top:10px;
padding-left:20px;

width:100%;
background:url(../img/main13.png) no-repeat;
height:55px;
}
/*-------------------------------------*/

/*Низ страницы */
#pol {
width:100%;
height:100px;
background-color:#FFFFFF;
background:url(../img/pol.png) no-repeat;
padding-left:30px;
}
/*-----------*/

Это сообщение отредактировал(а) w03zd8rc - 13.8.2009, 14:03

Forsaken

Дата 13.8.2009, 14:10 (ссылка)

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

Загрузка ...

Бывалый

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

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

я вижу сразу ошибку. Нельзя делать два тэга <link> сслыющихся на разные таблицы стилей, в любом случае будет загруженная только одна (как гласят стндарты). Если хотите каскадировать таблицы стилей используйте @import
Ща гляну что тут у Вас происходит

У вас часто повторящаяся проблема с поддигами. Дело вот в чем, есть главный див он 500px в ширину с поддингом слева и справа 20px -т.е. внутри него пространство уже 460px теперь Вы вставляете в него див указав ему width: 100% т.е. 100% от ширины родителя.. -те же 500px и ясное дело что див не влизает в 460 и начинает торчать из него справа.
(Выше я вам чтото говорил про width:100% -был неправ)

Это сообщение отредактировал(а) Forsaken - 13.8.2009, 14:26

w03zd8rc

Дата 13.8.2009, 14:19 (ссылка)

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

Загрузка ...

Шустрый

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

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

ну так оба стиля работают и не конфликтуют. И стили страницы такие какие должны быть (если не считать что браузер пытается свести все дивы в одну строчку), и меню нормально работает и стиль его тот который описан в цсс

Forsaken

Дата 13.8.2009, 14:53 (ссылка)

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

Загрузка ...

Бывалый

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

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

w03zd8rc,
Ну это просто производители браузеров с уважением игнорируют некоторые особенности стандатров.. с двумя линками по идеи браузер должен предложить пользователю какой скачать, они их каскадируют.. но всеравно правильнее использовать @import
Короче у вас сильная смесь паддингов и процентов, вам придется либо привязаться к процентам либо все задавать в пикселах и расчитывать все точно. Почитайте как действует паддинги на блоки.

w03zd8rc

Дата 14.8.2009, 06:29 (ссылка)

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

Загрузка ...

Шустрый

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

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

попробуя переверстать с начала, за основу возьму твой пример. спс Тебе большой

w03zd8rc

Дата 14.8.2009, 07:17 (ссылка)

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

Загрузка ...

Шустрый

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

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

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

w03zd8rc

Дата 14.8.2009, 08:58 (ссылка)

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

Загрузка ...

Шустрый

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

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

в продолжение той проблемы выявилась новая (нивкакую не хочет рещаться):

Код


<div id="body1">
    <div id="top">
     <div id="top1"></div><div id="top2">
        </div>
    </div>
    <div id="meny">
    <div id="meny1">
    </div>
    </div> 
<div id="vml">
    <div id="lmeny">
     <div id="lmeny1"></div>
        <div id="lmeny2"><a href="#">meny1</a><a href="#">meny2</a></div>
        <div id="lmeny3"></div>
    </div>
    <div id="main2">
     <div id="main21"></div>
        <div id="main22">Основное содерджание<br>Основное содерджание<br>Основное содерджание<br>Основное содерджание<br></div>
     <div id="main23"></div>
    </div>
</div>
    <div id="pol1"><div id="pol"><br><br><br>Все права защищены.</div></div>
</div>

и стили к ним:

Код


/*Общая склейка*/
      #body1 {
        width:1000px;
        padding-top:4px;
        padding: 0;
        margin:0 auto;
      }
/*------------*/

/*шапка*/
      #top {
        height:200px;
      }
      #top1 {
      float:left;
      width:200px;
      height:200px;
      background:url(../img/logo.png);
      }
      #top2 {
      float:left;
      width:800px;
      height:200px;
      background:url(../img/panorama.png);
      }
/*------*/

/*меню*/
      #meny {
        height:75px;
      }
      #meny1 {
      float:left;
      width:660px;
      text-align:center;


/*Склейка центра сайта*/
#vml {
      width:1000px;
      margin:0 auto;
      
}
/*меню слева*/
#lmeny {
      width:250px;
      margin:0 auto;
      float:left;
}
#lmeny1{
width:250px;
background:url(../img/lmeny1.png) no-repeat;
height:55px;
}
#lmeny2{
width:240px;
background:url(../img/lmeny2.png) repeat-y;
text-align:left;
padding-left:10px;
}
#lmeny3{
width:250px;
background:url(../img/lmeny3.png) no-repeat;
height:30px;
}
#lmeny2 a {
   display:block;
   padding-top:5px;
   padding-left:25px;
   width:205px;
   border-bottom:1px dotted #b19652;
   color:#666666;
   font-weight:bold;
}
#lmeny2 a:hover {
   width:205px;
   border-bottom: double 1px #000000;
   border-top: double 1px #000000;
   padding-top:4px;
   color:#000;
   font-weight:bold;
}
/*----------*/

/*Основное содержание с меню слева*/
      #main2 {
      width:750px;
      margin:0 auto;
      float:left;
      }
      #main21{
        background:url(../img/main21.png);
        height:25px;
        padding-top:29px;
        padding-left:45px;
      }
      #main22{
        background:url(../img/main22.png);
        text-align:justify;
        padding-left:30px;
        padding-top:15px;
      }
      #main23{
        background:url(../img/main23.png);
        height:45px;
        padding-top:10px;
        padding-left:35px;
      }
/*--------------------------------*/

/*Низ страницы */
#pol1 {
width:1000px;
margin:0 auto;
}
#pol {
height:100px;
background:url(../img/pol.png) no-repeat;
padding-left:30px;
}
/*-----------*/

див с менювыводится совершенно не на своем месте

Это сообщение отредактировал(а) w03zd8rc - 14.8.2009, 08:58

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