| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > Вёрстка веб-сайтов > дывы наезжают друг на друга |
| Автор: w03zd8rc 13.8.2009, 08:24 | ||||||
доктайп:
в опере 9 и ие 7 норм отображается, а вот опера 10, фаерфокс и ие более новые почти все дивы ставят в одну точку. Верстка постороена на дивах путем вложения их друг в друга - один общий, в ней 4 дивблока: шапка, верхнее меню, осн содержание и пол, каждый в свою очередь тоже содержит дивы. В чем может быть ошибка? пример:
цсс к этому куску:
в данном примере маин наезжает на меню (тоесть получается что они на одном и томже месте выводятся), если после этого добавить пол, а до этого дорбавить шапку, то шапка и пол норм будут стоять, на своих местах, а эти опять же вместе |
| Автор: Forsaken 13.8.2009, 09:35 |
| w03zd8rc, Я сейчас поковыряю Ваш пример, только меня уже шокирует Ваш доктайп.. "HTML 1.0" -что за выбор то такой? |
| Автор: w03zd8rc 13.8.2009, 09:48 |
| Forsaken, Если не сложно, Посоветуйте более подходящий доктайп (на хосте пхп 4 версии, сайт написан на хтмл,пхп,немного яс+общение с mysql). А доктайп мне посоветовал дримвейвер8, видимо слушать его было ошибкой =) |
| Автор: Forsaken 13.8.2009, 10:08 | ||||||
| w03zd8rc, У меня странички все как правило начинаются так:
Мне нравится жесткий XHTML 1.1, можно выбрать помягче HTML 4.01 Я сделал вот так:
Получилось так: красный прямоугольник в нем зеленый под ним синий.. никто вроде не наезжает пока. А как Вам нужно? (IE8, Opera 10b2, Firefox 3.5.2) Хочу заметить что у Вас есть неочень хорошие моменты например body1 у Вас шириной 1000px и паддингом справаи слева 35px, в нем находится див meny к которому установленно 1000px в ширину.. но такой широкий туда не влезет, браузер конечно его сужает, но неделайте так, укажите лучше width: 100% Добавлено @ 10:14 Вот, посмотрите этот код как работает:
|
| Автор: w03zd8rc 13.8.2009, 11:35 | ||
вся проблема в том, что если я ставлю доктайп такого вида:
опера 9 начинает все дивы в одну точку ставить |
| Автор: Forsaken 13.8.2009, 13:06 |
| w03zd8rc, в одну точку это как? в одну строку чтоли? Уточните версию оперы |
| Автор: w03zd8rc 13.8.2009, 13:13 | ||||
| Forsaken, да, не все правда дивы. Иерархия дивов получается примерно такой: главный див, в нем 4 дива (топ, меню, маин, пол), в топе 2 дива, в меню 1 див, в маин 3 дива, в поле 1 див. конечные дивы по отношению к прородителям стоят правильно, а вот прородители по отношению друг к другу нет (в главном диве): верхний левый угол у топа и маина находятся в одной точке, меню нормально идет за топом, пол нормально идет за маином. при
в опере 9 и ослике 7 нормально как и должно быть, а вот в остальных браузерах (и опере 10) примерно такаяже картина, причем даже если поставить
проблема проявляется во всех браузерах без исключения ЗЫ подопотные браузеры: опера 9.6, ослик 7, мозила 3.0.5 |
| Автор: Forsaken 13.8.2009, 13:47 | ||
Вот запустите это у себя и скажите что не так (я отредактировал):
У меня все дивы тут по отдельности и окрашенны в разыне цвета.. Что нужно сделать? Если хоите обрисуйте что хотите а я напишу код. И прошу Вас давайте нормальные id блокам |
| Автор: w03zd8rc 13.8.2009, 14:01 | ||||
| твой вариант у меня отображается нормально, мою верстку пытаюсь сделать по типу втоего варианта - косяки. вот полная версия верстки (вырезаны вставки пхп):
и цсс к ней:
|
| Автор: Forsaken 13.8.2009, 14:10 |
| я вижу сразу ошибку. Нельзя делать два тэга <link> сслыющихся на разные таблицы стилей, в любом случае будет загруженная только одна (как гласят стндарты). Если хотите каскадировать таблицы стилей используйте @import Ща гляну что тут у Вас происходит У вас часто повторящаяся проблема с поддигами. Дело вот в чем, есть главный див он 500px в ширину с поддингом слева и справа 20px -т.е. внутри него пространство уже 460px теперь Вы вставляете в него див указав ему width: 100% т.е. 100% от ширины родителя.. -те же 500px и ясное дело что див не влизает в 460 и начинает торчать из него справа. (Выше я вам чтото говорил про width:100% -был неправ) |
| Автор: w03zd8rc 13.8.2009, 14:19 |
| ну так оба стиля работают и не конфликтуют. И стили страницы такие какие должны быть (если не считать что браузер пытается свести все дивы в одну строчку), и меню нормально работает и стиль его тот который описан в цсс |
| Автор: Forsaken 13.8.2009, 14:53 |
| w03zd8rc, Ну это просто производители браузеров с уважением игнорируют некоторые особенности стандатров.. с двумя линками по идеи браузер должен предложить пользователю какой скачать, они их каскадируют.. но всеравно правильнее использовать @import Короче у вас сильная смесь паддингов и процентов, вам придется либо привязаться к процентам либо все задавать в пикселах и расчитывать все точно. Почитайте как действует паддинги на блоки. |
| Автор: w03zd8rc 14.8.2009, 06:29 |
| попробуя переверстать с начала, за основу возьму твой пример. спс Тебе большой |
| Автор: w03zd8rc 14.8.2009, 07:17 |
| Forsaken, очень благодарен за помощь, переписал цсс, используя ваш пример, все пошло на ура. Проблема видимо действительно была в паддингах |
| Автор: w03zd8rc 14.8.2009, 08:58 | ||||
в продолжение той проблемы выявилась новая (нивкакую не хочет рещаться):
и стили к ним:
див с менювыводится совершенно не на своем месте |
| Автор: Forsaken 14.8.2009, 10:00 |
| #meny1 { float:left; width:660px; text-align:center; } Скобку забыли) Добавлено @ 10:07 Еще хотел посоветовать Вам WeBuilder 2008, честно сказать я лучше несмог найти, удоволетворяет почти всем моим требованиям и уменьшает колчиство подобных ошибок. Хорошая подсветка синтаксиса, все удобно. После установки я настраиваю свою цветовую схему подсветки, устанавливая в папраметрах чтобы при при запуске автоматически открывались все мои документы которые были открыты до закрытия (последними). А в остальном все очень хорошо. пс. конечно возможно есть и лучше, но я пока ненашел. |
| Автор: w03zd8rc 14.8.2009, 11:10 |
| скобку видимо случайно не скопировал (не копировал некоторые стили оформления текста чтоб не засорять пространство), так она там есть |
| Автор: Forsaken 14.8.2009, 12:25 |
| 5сек сейчас разберусь.. я только пришел домой поясните поалуйста, какие(ой) проблемные(ый) id и что с ними не так? |
| Автор: w03zd8rc 14.8.2009, 12:37 |
| получается так (в мозиле): шапка и меню на своем месте, следом за ними идет пол, свержуху на полу (прям поверх выведено) справой стороны страницы левое меню, под левым меню слева уже основной контент. а должно было быть так (и в опере так):шапка, меню, левое веню слева контент справа в одну линию, снизу пол |
| Автор: Forsaken 14.8.2009, 12:54 |
| #pol1 { width:1000px; margin:0 auto; clear: both; } Вот так попробуйте. |
| Автор: w03zd8rc 14.8.2009, 13:07 |
| пол встал на свое место, а вот левое меню с контентом отказываются вставать. |
| Автор: Forsaken 14.8.2009, 13:43 |
| у меня вот такая картина: www.wintermoon.narod.ru/Clip.png пунктиром обведены болки, это фаирфокс. Мне тяжело понять что где должно быть расположенно, если бы я себе представлял картину было бы легче. Где должно быть меню? |
| Автор: w03zd8rc 14.8.2009, 14:04 |
| слева как должно быть, справа как получается. соответственно пустой области вообще быть не должно ЗЫ рисовал схематично на скорую руку =) |
| Автор: Forsaken 14.8.2009, 14:23 | ||
Что то типа этого? Добавлено через 13 минут и 55 секунд Вид сверху: www.wintermoon.narod.ru/Clip_3.png |
| Автор: w03zd8rc 14.8.2009, 14:57 |
| =/ видимо все это время верхнее меню мне мозг парило...спс за помощь, ща буду меню ковырять где у меня ошибка (кагда убираеш меню то норм, ставиш - косяк появляется) |
| Автор: Forsaken 14.8.2009, 15:05 |
| 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 тоже все плохо или уже лучше? |
| Автор: Forsaken 14.8.2009, 19:42 |
| 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 который сам подключается через линк (замедляет загрузку страинчки из-за последовательности) |
| Автор: blah 16.8.2009, 02:51 | ||||||||
| Forsaken, С чего Вы взяли что
|
| Автор: Forsaken 16.8.2009, 10:07 | ||
| blah, Я говортю только о том что читал в известных книгах либо на сайте W3C и о теории.
http://ap-project.org/Russian/Article/View/91/ |