X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> неправильное позиционирование div-ов в IE6
Nikolay63
Nikolay63
Topic Starter сообщение 20.8.2008, 0:26; Ответить: Nikolay63
Сообщение #1


Здравствуйте всем.
Посмотрев форум, решил что здесь мне смогут помочь, так как грамотно и понятно разъясняют ошибки.


<!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>
<title>Сад Деко</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div id="page_header">
</div>
<div id="left_side">
<div class="content">
<ul class="linklist">
<li class="first"><a href="index.html"> О НАС</a></li>
<li class="first"><a href="services.html"> УСЛУГИ</a></li>
<li class="first"><a href="portfolio.html"> ПОРТФОЛИО</a></li>
<li class="first"><a href="price.html"> ПРАЙСЫ</a></li>
<li class="first"><a href="contact.html"> КОНТАКТЫ</a></li>
<li class="first"><a href="vakansii.html"> ВАКАНСИИ</a></li>
</ul>
</div>
</div>
<div id="right_side">
<div id="center">
<h1>О нас</h1>
<div id="rasporka">
<h2>Наша компания предлагает профессиональные услуги по благоустройству и озеленению приусадебных участков, городских и промышленных территорий.</h2>
</div>
</div>
</div>

<div id="right_centr">
<div id="right_centr_in">
<p>В составе компании только специалисты, профессионализм которых проверен временем и практикой. Ландшафтные архитекторы разработают ландшафтный дизайн — проект территории с полным пакетом документов. Опытные бригады под авторским надзором воплотят его в жизнь.</p>
<p>Мы консультируем, решаем проблемы сложных участков, завозим грунты, сажаем крупномеры, деревья, кустарники, цветы. Исполняем все строительные работы: мощение, освещение, полив, дренаж. Строим подпорные стенки, зоны отдыха, детские площадки, устанавливаем малые архитектурные формы.</p>
<p>Тесное сотрудничество со скульпторами и художниками ооо «Дом Художника» позволяет нам создавать уникальные авторские произведения в оформлении пространств:
<ul>
<li>фонтаны
<li>кованые изделия
<li>уникальные светильники
<li>витражи
<li>скульптура
<li>малая пластика</li>
</ul>
<p>Наша компания активно позиционируется на рынке — это участие в выставках и конференциях, публикации в профессиональных изданиях и журналах, проведение лекций и семинаров в Школах ландшафтного дизайна. Также наши сотрудники ежегодно проходят профессиональные стажировки за рубежом.</p>
<p>Наши клиенты:
<ul>
<li>корпоративные клиенты
<li>муниципалитеты
<li>частные заказчики</li>
</ul>
</div>

<div id="left_down"></div>
</div>
</div>

</body>
</html>


html body {
font-size:14px;
background:url(images/back.jpg) repeat 0 0;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}

h3 {
font-family:Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:700;
line-height:1em;
border-bottom:2px solid #B33570;
margin:0 0 2px;
padding:0;
}

ul {
list-style:none;
}

ul li {
padding-left:15px;
background:url(images/sign10r.png) no-repeat left center;
}

a {
color:#6D280A;
}

a:hover {
color:#6D280A;
text-decoration:none;
border-bottom:none;
}

A IMG {
border:2px solid #DCA5A5;
}

A:hover IMG {
border:2px solid #6D280A;
}

#left_side a {
font-size:18px;
color:#DCA5A5;
text-decoration:none;
}

#left_side a:hover {
color:#FFFBF0;
}

ul.linklist {
list-style-type:none;
margin:0;
padding:0;
}

ul.linklist li {
height:58px;
width:189px;
background:none;
background-image:url(images/knopka.png);
background-repeat:no-repeat;
}

ul.linklist li.first {
padding-top:20px;
padding-left:52px;
}

#content {
background-color:#B33570;
margin-left:auto;
margin-right:auto;
width:800px;
}

#page_header {
height:325px;
background:url(images/head.gif) bottom left no-repeat;
}

#content_wrapper {
border:0 dashed #FFF;
margin:0;
}

#left_side {
height:auto;
background:url(images/left.gif) no-repeat;
background-color:#B33570;
width: 202px;
float: left;
}

#left_side .content {
margin-bottom:20px;
padding:0 6px;
}

#right_side {
width:598px;
background:url(images/right.gif) no-repeat;
height:140px;
float: left;
}

#center {
margin-left:40px;
margin-right:50px;
height:40px;
}

#center h1 {
padding-top:40px;
font-family:verdana;
font-size:24px;
color:#6D280A;
margin:0;
}

#rasporka {
margin:0;
}

#rasporka h2 {
padding-top:0;
font-family:verdana;
font-size:12px;
color:#6D280A;
}

#rasporka div {
margin-top:50px;
margin-left:40px;
margin-right:20px;
padding-top:5px;
color:#6D280A;
font-family:verdana;
font-size:11px;
line-height:1.8;
word-spacing:.1em;
font-weight:700;
}

#right_centr {
width:598px;
height:auto;
background:url(images/centr.gif);
float: left;
}

#right_centr_in {
margin-left:40px;
margin-right:70px;
}

#left_down {
width:598px;
height:80px;
background:url(images/down.gif) no-repeat;
background-color:#B33570;
}


Проблема заключается в том что в IE6 блоки <div id="right_side"> и <div id="right_centr"> встают друг под другом, хотя во всех дбраузерах они встают как надо, то есть по горизонтали слева от блока <div id="left_side">

Как это выглядит в IE6
http://www.diaweb.msk.ru/site.jpg
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Роман Блейк
Роман Блейк
сообщение 20.8.2008, 20:19; Ответить: Роман Блейк
Сообщение #2


Простите, а Вы о таблицах слышали? Или Вы сами не понимаете почему, но делаете в данном случае это блоками? Не нужно поддаваться "моде". Есть случаи, в которых следует использовать блоки, а в которых блоки+таблицы. В Вашем случае как раз второй вариант. Если Вы всё же хотите сделать это блоками, то пришлите скрин того, как должно быть, а то я не совсем понял. Вобщем пришлите скрипт из FF
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nikolay63
Nikolay63
Topic Starter сообщение 20.8.2008, 22:22; Ответить: Nikolay63
Сообщение #3


Должно выглядить так http://www.diaweb.msk.ru/ Во всех других браузерах всё отлично, даже в IE7 только IE6 всё портит к сожалению. И если всёже придётся применять смешанную вёрстку можете дать ссылку, где хоть это описывается, что именно должно быть в виде таблиц, а что в виде блоков.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Роман Блейк
Роман Блейк
сообщение 20.8.2008, 23:10; Ответить: Роман Блейк
Сообщение #4


Nikolay63, так как у меня вообще нет IE (ни какой версии =) ), то проверить не могу. Попробуйте для right_side прописать float:right, а не left

Насчёт таблиц, то у вас всё делается элементарно схема такова:
###############
# ------Шапка------#
###############
#----#------DIV-----#
#----#-----------------#
#----#------DIV-----#
#----#-----------------#
###############

PS: я тут смотрел Ваш код и заметил
</div>
<a href="price.html"></a><div id="left_side">
Это нужно?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nikolay63
Nikolay63
Topic Starter сообщение 20.8.2008, 23:16; Ответить: Nikolay63
Сообщение #5


Спасибо что пытаетесь мне помочь! Я уже пытался различными манипуляциями что-то сделать, конечно и float: right тоже ставил.

Да с кодом была такая ошибка, я её уже исправлял, просто не успел закачать на сервер + она совершенно на мои проблемы не подействовала.

Побольше бы таких людей как вы - без IE :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Роман Блейк
Роман Блейк
сообщение 20.8.2008, 23:24; Ответить: Роман Блейк
Сообщение #6


Nikolay63,да я его скоро установлю =)))
При float:right ничего не изменилось? Если нет то попробуйте поменять левый и правый блоки местами. Помню помогало в похожей ситуации, если в остальных браузерах собьётся, а в IE 6 поможет, то я думаю, что у Вас не возникнет проблем с написанием отдельной таблицы стилей для IE

PS: У меня, как и у многих людей, которые пользуются ноутбуками разрешение экрана 1280*800(768), с подобным разрешением шапка занимает половину вертикального пространства экрана и половина меню не видно. Так что я Вам предлагаю либо изменить размер шапки, либо сделать горизонтальное меню (дополнительно над шапкой или под шапкой взамен вертикального), ну в любом случае Вы можете меня не слушать))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nikolay63
Nikolay63
Topic Starter сообщение 20.8.2008, 23:55; Ответить: Nikolay63
Сообщение #7


Я сделал, наверное, не совсем то что вы мне порекомендовали. Поменял блоки местами и у меня навигация встала справа, и что я увидел в IE6 я теперь понял почему у меня слетали в нём в низ все соседние блоки. У блока с навигацией в IE6 справа непонятный достаточно большой отступ. Я уже попытался с ним побороться, с радостью написал для этого блока padding 0 но всё осталось по прежнему. Я не понимаю этот IE6 какой у него алгоритм обработки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Роман Блейк
Роман Блейк
сообщение 21.8.2008, 0:05; Ответить: Роман Блейк
Сообщение #8


Nikolay63,пока у меня нет IE могу Вам посоветовать только смешанную вёрстку.
А алгоритм у IE 6 получше, чем у IE 8 beta)))
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Nikolay63
Nikolay63
Topic Starter сообщение 21.8.2008, 0:07; Ответить: Nikolay63
Сообщение #9


Просто досадно, что во всех браузерах всё отлично, а в IE6 такая подстава + я это заметил очень поздно, по сути, когда уже сделал весь сайт.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 21.8.2008, 16:30; Ответить: Exterior
Сообщение #10


не надо никакая смешаная верстка, все отлично дивами укладывается;
Nikolay63, пожалуйста, кроссбраузерный вариант без единой таблицы:
<!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>

<title>Сад Деко</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}

html, body {
font: 14px Arial,Helvetica,sans-serif;
background: url(images/back.jpg) repeat 0px 0px;
}

h3 {
font-size: 1.2em;
font-weight: 700;
line-height: 1em;
border-bottom: 2px solid #B33570;
margin: 0px 0px 2px;
}

a {
color: #6D280A;
}

a:hover {
color: #6D280A;
text-decoration: none;
}

a img {
border: 2px solid #DCA5A5;
}

a:hover img {
border: 2px solid #6D280A;
}

#left_side a {
font-size: 18px;
color: #DCA5A5;
text-decoration: none;
}

#left_side a:hover {
color: #FFFBF0;
}

#wrapper {
width: 800px;
margin: 0px auto;
}

#content {
width: 800px;
background: #B33570;
}

#page_header {
width: 800px;
height: 325px;
margin: 0px auto;
background: #B33570 url(images/head.gif) bottom left no-repeat;
}

#left_side {
width: 190px;
float: left;
padding: 0px 6px 0px 6px;
background: #B33570 url(images/left.gif) no-repeat;
}

ul.linklist {
list-style: none;
}

ul.linklist li {
height: 58px;
width: 137px;
background: url(images/knopka.png) no-repeat;
}

ul.linklist li.first {
padding: 20px 0px 0px 52px;
}

#right_side {
width: 488px;
height: 140px;
float: left;
padding: 0px 70px 0px 40px;
background: url(images/right.gif) no-repeat;
}

#right_side h1 {
padding: 40px 0px 10px 0px;
font: bold 24px Verdana;
color: #6D280A;
}

#right_side h2 {
padding-top: 0px;
font: bold 12px Verdana;
color: #6D280A;
}

#right_centr {
width: 488px;
float: left;
padding: 0px 70px 0px 40px;
background: url(images/centr.gif);
}

#right_centr ul {
margin: 20px 0px 20px 40px;
list-style: none;
}

#right_centr ul li {
padding-left: 15px;
background: url(images/sign10r.png) no-repeat left center;
}

#right_centr p {
margin: 10px 0px;
text-indent: 20px;
}

#left_down {
width: 598px;
height: 80px;
margin-left: 202px;
background: #B33570 url(images/down.gif) no-repeat;
}

.clear {
clear: both;
}
-->
</style>

</head>

<body>

<div id="page_header"></div>

<div id="wrapper">

<div id="content">

<div id="left_side">
<ul class="linklist">
<li class="first"><a href="index.html"> О НАС</a></li>
<li class="first"><a href="services.html"> УСЛУГИ</a></li>
<li class="first"><a href="portfolio.html"> ПОРТФОЛИО</a></li>
<li class="first"><a href="price.html"> ПРАЙСЫ</a></li>
<li class="first"><a href="contact.html"> КОНТАКТЫ</a></li>
<li class="first"><a href="vakansii.html"> ВАКАНСИИ</a></li>
</ul>
</div>

<div id="right_side">
<h1>О нас</h1>
<h2>Наша компания предлагает профессиональные услуги по благоустройству и озеленению приусадебных участков, городских и промышленных территорий.</h2>
</div>

<div id="right_centr">
<p>В составе компании только специалисты, профессионализм которых проверен
временем и практикой. Ландшафтные архитекторы разработают ландшафтный дизайн —
проект территории с полным пакетом документов. Опытные бригады под авторским
надзором воплотят его в жизнь.</p>
<p>Мы консультируем, решаем проблемы сложных участков, завозим грунты,
сажаем крупномеры, деревья, кустарники, цветы. Исполняем все строительные
работы: мощение, освещение, полив, дренаж. Строим подпорные стенки, зоны
отдыха, детские площадки, устанавливаем малые архитектурные формы.</p>
<p>Тесное сотрудничество со скульпторами и художниками ооо «Дом Художника»
позволяет нам создавать уникальные авторские произведения в оформлении пространств:
<ul>
<li>фонтаны</li>
<li>кованые изделия</li>
<li>уникальные светильники</li>
<li>витражи</li>
<li>скульптура</li>
<li>малая пластика</li>
</ul>
<p>Наша компания активно позиционируется на рынке — это участие в
выставках и конференциях, публикации в профессиональных изданиях и
журналах, проведение лекций и семинаров в Школах ландшафтного дизайна.
Также наши сотрудники ежегодно проходят профессиональные стажировки за рубежом.</p>
<p>Наши клиенты:
<ul>
<li>корпоративные клиенты</li>
<li>муниципалитеты</li>
<li>частные заказчики</li>
</ul>
</div>

<div class="clear"></div>

</div>

<div id="left_down"></div>

</div>

</body>
</html>


p.$. убрана куча бесполезного кода
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
 10 muratastana 1599 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) DIV'ы в строку
 0 RedEclipse 5465 29.9.2016, 17:53
автор: -RedEclipse-
Открытая тема (нет новых ответов) при выборе radio в option не скрывались div
 0 serj123 6930 17.4.2016, 17:45
автор: -serj123-
Открытая тема (нет новых ответов) Как заставить отображать несколько элементов DIV в одну строку?
 2 Aalena 4021 10.1.2016, 10:18
автор: -Aalena-
Открытая тема (нет новых ответов) Фоны в в div'ах расходятся при сужении экрана
 1 Balalaaika1 5637 2.6.2015, 19:35
автор: -Degradator-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 24.4.2024, 20:36

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet