Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> дывы наезжают друг на друга 
:(
    Опции темы
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
PM MAIL   Вверх
Forsaken
Дата 13.8.2009, 09:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
w03zd8rc, 
Я сейчас поковыряю Ваш пример, только меня уже шокирует Ваш доктайп.. "HTML 1.0" -что за выбор то такой?
PM MAIL   Вверх
w03zd8rc
Дата 13.8.2009, 09:48 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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

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

Это сообщение отредактировал(а) w03zd8rc - 13.8.2009, 09:49
PM MAIL   Вверх
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
PM MAIL   Вверх
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 начинает все дивы в одну точку ставить
PM MAIL   Вверх
Forsaken
Дата 13.8.2009, 13:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
w03zd8rc, 
в одну точку это как? в одну строку чтоли?
Уточните версию оперы

Это сообщение отредактировал(а) Forsaken - 13.8.2009, 13:08
PM MAIL   Вверх
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
PM MAIL   Вверх
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
PM MAIL   Вверх
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
PM MAIL   Вверх
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
PM MAIL   Вверх
w03zd8rc
Дата 13.8.2009, 14:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
ну так оба стиля работают  и не конфликтуют. И стили страницы такие какие должны быть (если не считать что браузер пытается свести все дивы в одну строчку), и меню нормально работает и стиль его тот который описан в цсс
PM MAIL   Вверх
Forsaken
Дата 13.8.2009, 14:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
w03zd8rc, 
Ну это просто производители браузеров с уважением игнорируют некоторые особенности стандатров.. с двумя линками по идеи браузер должен предложить пользователю какой скачать, они их каскадируют.. но всеравно правильнее использовать @import
Короче у вас сильная смесь паддингов и процентов, вам придется либо привязаться к процентам либо все задавать в пикселах и расчитывать все точно. Почитайте как действует паддинги на блоки.
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 06:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
попробуя переверстать с начала, за основу возьму твой пример. спс Тебе большой
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 07:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
Forsaken, очень благодарен за помощь, переписал цсс, используя ваш пример, все пошло на ура. Проблема видимо действительно была в паддингах
PM MAIL   Вверх
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
PM MAIL   Вверх
Forsaken
Дата 14.8.2009, 10:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
#meny1 {
      float:left;
      width:660px;
      text-align:center;

}
Скобку забыли)

Добавлено @ 10:07
Еще хотел посоветовать Вам WeBuilder 2008, честно сказать я лучше несмог найти, удоволетворяет почти всем моим требованиям и уменьшает колчиство подобных ошибок. Хорошая подсветка синтаксиса, все удобно. После установки я настраиваю свою цветовую схему подсветки, устанавливая в папраметрах чтобы при при запуске автоматически открывались все мои документы которые были открыты до закрытия (последними). А в остальном все очень хорошо.

пс. 
конечно возможно есть и лучше, но я пока ненашел.

Это сообщение отредактировал(а) Forsaken - 14.8.2009, 10:09
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 11:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
скобку видимо случайно не скопировал (не копировал некоторые стили оформления текста чтоб не засорять пространство), так она там есть
PM MAIL   Вверх
Forsaken
Дата 14.8.2009, 12:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
5сек сейчас разберусь.. я только пришел домой
поясните поалуйста, какие(ой) проблемные(ый) id и что с ними не так?

Это сообщение отредактировал(а) Forsaken - 14.8.2009, 12:30
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 12:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
получается так (в мозиле): шапка и меню на своем месте, следом за ними идет пол, свержуху на полу (прям поверх выведено) справой стороны страницы левое меню, под левым меню слева уже основной контент.

а должно было быть так (и в опере так):шапка, меню, левое веню слева контент справа в одну линию, снизу пол
PM MAIL   Вверх
Forsaken
Дата 14.8.2009, 12:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
#pol1 {
width:1000px;
margin:0 auto;
clear: both;
}
Вот так попробуйте.
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 13:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
пол встал на свое место, а вот левое меню с контентом отказываются вставать.
PM MAIL   Вверх
Forsaken
Дата 14.8.2009, 13:43 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
у меня вот такая картина:
www.wintermoon.narod.ru/Clip.png
пунктиром обведены болки, это фаирфокс. Мне тяжело понять что где должно быть расположенно, если бы я себе представлял картину было бы легче. Где должно быть меню?
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
слева как должно быть, справа как получается. соответственно пустой области вообще быть не должно

ЗЫ рисовал схематично на скорую руку =)

Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  site.jpg 52,52 Kb
PM MAIL   Вверх
Forsaken
Дата 14.8.2009, 14:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 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>
      /* * {
        outline: 1px dotted black;
      }*/
      html, body {
         margin: 0px; padding: 0px;
         font: 12px/18px "lucida grande", arial, helvetica, sans-serif;
         background: cyan;

      }
/*Общая склейка*/
      #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);
      background: grey;
      }
      #top2 {
      float:left;
      width:800px;
      height:200px;
      background:url(../img/panorama.png);
      background: #707070;
      }
/*------*/

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

}
/*Склейка центра сайта*/
#vml {
      width:1000px;
      margin:0 auto;
      background: red;
      overflow: hidden;                                                           /**/

}
/*меню слева*/
#lmeny {
      width:250px;
      margin:0 auto;
      float:left;
}
#lmeny1{
width:250px;
background: blue;                                                               /**/
/*background:url(../img/lmeny1.png) no-repeat;*/
height:55px;
overflow: hidden;

}
#lmeny2{
width:240px;
background:url(../img/lmeny2.png) repeat-y;
background: green;                                                              /**/
text-align:left;
padding-left:10px;
float: left;
}
#lmeny3{
width:250px;
background:url(../img/lmeny3.png) no-repeat;
height:30px;
float:left;
background: #00FF90;
}
#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);
        background:white;
        height:25px;
        padding-top:29px;
        padding-left:45px;
      }
      #main22{
        background:url(../img/main22.png);
        text-align:justify;
        padding-left:30px;
        padding-top:15px;
        background:#EEEEEE;
      }
      #main23{
        background:url(../img/main23.png);
        height:45px;
        padding-top:10px;
        padding-left:35px;
        background:#DDDDDD;
      }
/*--------------------------------*/

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

   <body>
<div id="body1">
    <div id="top">
     <div id="top1">top1</div><div id="top2">top2</div>
    </div>
    <div id="meny">менюшка meny (если это стереть то менюшка meny1 будет прилегать к верхнему краю
    <div id="meny1">менюшка meny1</div>
    </div>
    <div id="vml">
        <div id="lmeny">
         <div id="lmeny1">lmeny1 (первый блок меню)</div>
            <div id="lmeny2"><a href="#">meny1</a><a href="#">meny2</a></div>
            <div id="lmeny3">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>


      </body>
</html>


Что то типа этого?

Добавлено через 13 минут и 55 секунд
Вид сверху: www.wintermoon.narod.ru/Clip_3.png
PM MAIL   Вверх
w03zd8rc
Дата 14.8.2009, 14:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
=/ видимо все это время верхнее меню мне мозг парило...спс за помощь, ща буду меню ковырять где у меня ошибка (кагда убираеш меню то норм, ставиш - косяк появляется)

Это сообщение отредактировал(а) w03zd8rc - 14.8.2009, 15:04
PM MAIL   Вверх
Forsaken
Дата 14.8.2009, 15:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
w03zd8rc, 
Незачно! Простите если где тупил, сам начинающий (делаю первый проект)
Почитайте где нить про float дивы и как бороться с проблемами (они какбы выпадают из общего потока страницы)..
И лучше еслибы вы давали id блоками более принятные типа: header (заголовок), nav (навигация), aside (блок слева или справа), footer (подвал, у вас он называется pol) article, content, wrapper (оберточный контейнер)
Для этого будут введены тэги в html5 http://habrahabr.ru/pictures/00/00/04/25/00/picture_2.gif а пока все делают приблезительно так http://habrahabr.ru/pictures/00/00/04/25/00/picture_1.gif

Добавлено через 4 минуты и 36 секунд
а когда для меню (#meny ) вставляете overflow: hidden тоже все плохо или уже лучше?
PM MAIL   Вверх
blah
  Дата 14.8.2009, 19:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

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


Цитата(Forsaken @  13.8.2009,  12:53 Найти цитируемый пост)
Ну это просто производители браузеров с уважением игнорируют некоторые особенности стандатров.. с двумя линками по идеи браузер должен предложить пользователю какой скачать, они их каскадируют.. но всеравно правильнее использовать @import

 smile ссылку где такое пишут в студию
PM MAIL ICQ   Вверх
Forsaken
Дата 14.8.2009, 19:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
O'Reilly HTML & XHTML The Definitive Guide Sixth Edition (Chuck Musciano и Bill Kennedy) там есть раздел об отличии тэга линк и @import.. о начальном предназанчения тэга линк. Но как всегда в жизни все бывает по разному IE например (в 6-версии) плохо обращается с @import. И грузятся такие табилцы как правило последовательно (в IE точно)

Ну и в дополнение можно заметить  что в статьях о каскадировании на w3c приеняется метод импорта
http://www.w3.org/TR/css3-cascade/
http://www.w3.org/TR/CSS2/cascade.html
Но раз каскадирование работает и черз линк -никто так делать незапрещает.. делайте так. правда особые фанаты делают все через импорт либо используют внутренний ипорт из css который сам подключается через линк (замедляет загрузку страинчки из-за последовательности)

Это сообщение отредактировал(а) Forsaken - 14.8.2009, 20:04
PM MAIL   Вверх
blah
Дата 16.8.2009, 02:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17
Forsaken, 
С чего Вы взяли что
Цитата
Нельзя делать два тэга <link> сслыющихся на разные таблицы стилей
?
Цитата
Если хотите каскадировать таблицы стилей используйте @import
Наверное неправильно понимаете определение механизма каскадирования.
Цитата
с двумя линками по идеи браузер должен предложить пользователю какой скачать, они их каскадируют..
 smile 
Цитата
И грузятся такие табилцы как правило последовательно
Как и любые другие , независимо от браузера и типа подключения файла.
PM MAIL ICQ   Вверх
Forsaken
Дата 16.8.2009, 10:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 3
Всего: 3
blah,
Я говортю только о том что читал в известных книгах либо на сайте W3C и о теории.

Цитата

Как и любые другие , независимо от браузера и типа подключения файла.


http://ap-project.org/Russian/Article/View/91/ 

Это сообщение отредактировал(а) Forsaken - 16.8.2009, 10:10
PM MAIL   Вверх
Страницы: (2) [Все] 1 2 
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.4009 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.