В IE расползается диз + пара вопрос по примеру

Вид для печати

26.03.2007, 17:11
DELPHIna

Ой...как же мне жалко Вашего времени....но выхода нет....инчае так и не научусь.... В голове такая каша от прочитанного...

вот у меня пример: см. прикрепленные фалйы(увы...архив прикрепить мне нельзя)

дак вот вопросы:
1. При уменьшении окна браузера IE v.6.0 всё так скукоживается.... [Only registered and activated users can see links. Click Here To Register...] и разъезжается.... (видимо как то надо задать мин ширину что ли??? В Опере 9 тоже немного расползается...но скукоживания, в частности в меню нету.

2. В меню то отчего при уменьшении окна браузера IE пункты меню двигаються? и первый самый принаведении видно, левый отступ от края исчез?

3. Да и кстати в том виде как есть в Опере прокрутка вертик., а в IE нет.

4.* А это я ещё не поняла как сделать: как текст в меню поднять чуть к верху, но при этом чтобы выделение серо-зеленое так и осталось...как есть(т.е. сверху с небол. отступом).
:read: я понимаю что читать мне неперечитать инструкций.....и что наворотила я так кучу небось лишнего....(боюсь, что ваще скажете что не стого края начала и переделывать заставите), но посоветуйте что нибудь дельное?

Если надо сначала всё переделывать скажите хоть по пунктам....с чего начать?
Если можно это исправить....буду ждать рекомендация
26.03.2007, 18:12
Zigzag

Для начала...

1. используйте кодировку только UTF для XHTML и закройте этот мета-тэг.

Код:

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

2. закройте мета-тэг ссылку на файл стилей и не забывайте указывать тип содержимого файла, указывайте устройство вывода, если на все устройства, то ставим all

Код:

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

3. закройте тэги списков

Код:

[*][Only registered and activated users can see links. Click Here To Register...]

Продолжим...

4. для выставления минимального размера блока указываем свойство min-width для всех браузеров за исключением IE6 и ниже используем экспрешн

подробнее здесь [Only registered and activated users can see links. Click Here To Register...] и здесь ttp://xhtml.ru/2006/06/04/min-width/

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

6. про текст вообще ничего не понял.
26.03.2007, 18:22
DELPHIna

Zigzag спасибо..... огромное спасибо...я так ответа долго ждала!!! подправлю....почитаю статью, напишу о результатх...

Поясняю
4.* А это я ещё не поняла как сделать: как текст в меню поднять чуть к верху, но при этом чтобы выделение серо-зеленое так и осталось...как есть(т.е. сверху с небол. отступом).

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

если непонятно...нарисую и вышлю.
26.03.2007, 22:06
Aykroyd

Да всё понятно... )
К сожалению, вынужден констатировать, что рекомендациям-то данным ранее Вы так и не следуете...

Не надо body {height: 100%}... Надо body {min-height: 100%}... Не надо outer {min-height: 100%}... Опять куча лишних блоков... Злоупотребление абсолютным позиционированием там, где и без него всё хорошо... Какие-то никому не нужные отрицательные поля... Не надо всяких clear там, где можно обойтись и без них... Не надо Arial Narrow... Не надо sub – он по семантическим соображениям здесь не подходит... Все прошедшие разговоры о Faux Columns – впустую...

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script type="text/javascript"> var d = document; var winIE = (navigator.userAgent.indexOf("Opera")==-1 && (d.getElementById && d.documentElement.behaviorUrns)) ? true : false; function bodySize() { if(winIE && d.documentElement.clientWidth) { sObj = d.getElementsByTagName("body")[0].style; sObj.width = (d.documentElement.clientWidth<1003) ? "1003px" : "100%"; }} function init() { if(winIE) {bodySize(); }} onload = init; if(winIE) {onresize = bodySize;} </script> <style type="text/css"> * {margin: 0px; padding: 0px;} html {height: 100%} body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; background: url(bgleft.gif) #F8E7EC repeat-y; min-width: 1000px; min-height: 100%; position: relative;} * html body {height: 100%;} p {font-size: 1.2em; margin: 6px 10px;} #header {text-align: right; background: url(logo.gif) #FFFFFF no-repeat; height: 90px;} #header h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.6em; color: #9B9B9B; padding: 26px 20px 12px 0px;} #header p {font-family: Arial, Helvetica, sans-serif; font-size: 2.8em; font-weight: bold; color: #6D3D26; margin: 0px; padding-right: 20px;} #header span {font-size: 0.5em; color: #514D4D; vertical-align: 65%;} #menu {background: url(bg_head.gif) repeat-x; height: 41px;} #navlist {background: url(head_deliver.gif) no-repeat; height: 41px; margin-left: 217px; padding-left: 16px; list-style: none;} #navlist li {float: left;} #navlist li a {font-family: Tahoma; font-size: 1.6em; font-weight: bold; color: #c5a696; text-decoration: none; display: block; padding: 7px 10px 9px;} #navlist li a:hover {color: #000000; background: #C1C185;} #outer {width: 100%; padding-bottom: 50px; overflow: hidden;} #left {width: 221px; float: left;} * html #left {margin-right: -3px;} #centrecontent {margin-left: 221px;} * html #centrecontent {height: 1%; margin-left: 218px;} #footer {text-align: center; background: #FF8080; width: 100%; height: 50px; position: absolute; bottom: 0px;} * html #footer {bottom: -1px;} </style> </head> <body> <div id="header"> ****<h1>архитектура, дизайн, строительство</h1> **** (8162) 77-72-29</p> </div> <div id="menu"> ****<ul id="navlist"> ****[*][Only registered and activated users can see links. Click Here To Register...] ****[*][Only registered and activated users can see links. Click Here To Register...] ****[*][Only registered and activated users can see links. Click Here To Register...] ****[*][Only registered and activated users can see links. Click Here To Register...] ****[/list] </div> <div id="outer"> ****<div id="left"> Левая менюшка</p></div> ****<div id="centrecontent"> Тут много текста</p></div> </div> <div id="footer"> Подвал сайта</p></div> </body> </html>
27.03.2007, 10:07
DELPHIna

Zigzag, Вы пишите -
- закройте мета-тэг ссылку ... а это чем грозит? я что то не помню чтобы незакрытие его чем то мешало....
- про тэги списков, я читала, что можно и не закрывать....хотя в этот раз, это точно моё упцщение
27.03.2007, 10:10
DELPHIna

Aykroyd... я понимаю, что грязно.... сама вижу, но мне непривычно делать то, чо я делаю...
о Faux Columns я перечитаю ещё раз.... наверное я слишком много начиталась и всё в кучу свалила :shok: буду изучать то, что Вы выслали, Aykroyd.... Я Вам очень признательна!

[!]

***Опять куча лишних блоков... *** угу...куча....(просто когда эта куча заработает вроде как тебе надо, ты забываешь что её могло бы быть куда меньше)
**Злоупотребление абсолютным позиционированием там, где и без него всё хорошо...*** - я уже писала как то, что статей в том учебнике, что Вы дали(ваще то он очень классный!!!), так много .... blink.gif и одно и тоже можно сделать по разному ....а что лучше я пока не разобралась
**Не надо всяких clear там, где можно обойтись и без них... ** - опятьтаки не понимаю я ещё когда можно, а когда нет
**Не надо Arial Narrow... ** - что то лб этом я не читала...
**Не надо sub – он по семантическим соображениям здесь не подходит** аааа...надо было span, да?
27.03.2007, 14:25
Aykroyd

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:07
- закройте мета-тэг ссылку ... а это чем грозит?
- про тэги списков, я читала, что можно и не закрывать
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Есть большая разница между HTML и XHTML.
Если Вы определяете в !DOCTYPE второе, то нужно использовать соответствующий синтаксис.

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:10
Бду изучать то, что Вы выслали
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Я, собственно говоря, только на это и надеюсь... ))

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:10
***Опять куча лишних блоков... *** угу...куча....(просто когда эта куча заработает вроде как тебе надо, ты забываешь что её могло бы быть куда меньше)
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Так ведь к тому же и не работает как надо. ))

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:10
**Злоупотребление абсолютным позиционированием там, где и без него всё хорошо...*** - я уже писала как то, что статей в том учебнике, что Вы дали(ваще то он очень классный!!!), так много .... blink.gif и одно и тоже можно сделать по разному ....а что лучше я пока не разобралась
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Учебник действительно очень хороший.
А насчет злоупотребления абсолютным позиционированием – у Вас шапка и меню идут с самого верха друг за другом. Какой смысл их абсолютно позиционировать, если они и так (в прямом потоке) так располагаются. Вот если бы они находились в коде в самом низу (например, после футера) – тогда другое дело. Тут бы мы без специального позиционирования не обошлись.

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:10
**Не надо всяких clear там, где можно обойтись и без них... ** - опятьтаки не понимаю я ещё когда можно, а когда нет
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Всякие заморочки с clear прекрасно заменяет свойство overflow: hidden для блока outer.

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:10
**Не надо Arial Narrow... ** - что то лб этом я не читала...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Просто лучше лишний раз перестраховаться.

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 09:10
**Не надо sub – он по семантическим соображениям здесь не подходит** аааа...надо было span, да?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Совершенно верно.
Sub – это подиндекс... Ну, химические формулы там всякие...
А у Вас код города уменьшен в размерах просто в оформительских целях...
27.03.2007, 17:58
DELPHIna

Aykroyd - спасибо за разъяснения...исправляюсь... и разрезаю дизайн дальше..... [Only registered and activated users can see links. Click Here To Register...] - надеюсь что не потревожу...хотя кто знает.

**Есть большая разница между HTML и XHTML.** - а есть ссылочка чтобы почитать....всё никак книжку не купить дельную. Но я собираюсь в магазин...может что и в нашей пупырловки продают.....по css
27.03.2007, 18:12
snekaaa

[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Тут все подробно
27.03.2007, 20:28
Aykroyd

Какие хорошие ссылки... )) Прям бальзам на душу... [Only registered and activated users can see links. Click Here To Register...]
Иван Григорьевич рулит... И это радует.

DELPHIna
Я думаю, что автор этих статей Вам уже знаком...

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 16:58
всё никак книжку не купить дельную. Но я собираюсь в магазин...может что и в нашей пупырловки продают.....по css
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Особо дельная литература рекомендуется вот [Only registered and activated users can see links. Click Here To Register...].
28.03.2007, 10:06
DELPHIna

Aykroyd и snekaaa ...спасибо ...сейчас займусь прочтением и копированием [Only registered and activated users can see links. Click Here To Register...]

А у меня ещё один вопрос....для разъяснения...(если не затруднит конечно)

Я прикреплю картинку со структурой странички.... и есть такой вопрос

можно (если не нарисовать, то хотя бы пояснить) как должны располагаться блоки, чтобы сделать внутренее белое поле??? (это я ещё не усложняю для себя ничего....а пытаюсь понять...как можно вкладывать поля друг в друга....чтобы ониимели примерно такой вид...как на картинке - внутри желтого блока - белый блок .... Мне непонятны многие вещи именно из за того, что эти блоки на всю ширину и высоту экрана.... ) :crazy:

а если внутрь белого вставить ещё один блок??? А если белый блок....имеет градиентные границы, а не ровные???? (с табличной вёрсткой так просто всё....а тут я даже не понимаю временами как и мыслить то??? [Only registered and activated users can see links. Click Here To Register...] )

Можно ответ получить хотя бы в виде структуры div_ов?
типа такого

Код:

<body> * *<div id="header"></div> * *<div id="menu1"></div> * *<div id="all"> * * * *<div id="menu3"> </div> * * * *<div id="centrecontent"> * * * * * *<div id="menu2"></div> * * * * * *<div id="text"></div> * * * *</div> * *</div> * *<div id="footer"></div> </body>

Вот куда вставить белый блок? или как вообще это делается???

:blush2: - простите.....но мне надо понять .... Кстати за все предыдущие советы огромное спасибо.... многое разъяснилось для меня....
29.03.2007, 15:24
Zigzag

Цитата:

Originally posted by DELPHIna@Mar 27 2007, 07:07
[b]Zigzag, Вы пишите -
- закройте мета-тэг ссылку ... а это чем грозит? я что то не помню чтобы незакрытие его чем то мешало....
- про тэги списков, я читала, что можно и не закрывать....хотя в этот раз, это точно моё упцщение

про отличия HTML и XHTML и про XHTML в 2х словах лучше почитать здесь, чем у Сагалаева. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by DELPHIna@Mar 28 2007, 07:06
[b]можно (если не нарисовать, то хотя бы пояснить) как должны располагаться блоки, чтобы сделать внутренее белое поле??? (это я ещё не усложняю для себя ничего....а пытаюсь понять...как можно вкладывать поля друг в друга....чтобы ониимели примерно такой вид...как на картинке - внутри желтого блока - белый блок .... Мне непонятны многие вещи именно из за того, что эти блоки на всю ширину и высоту экрана.... )* :crazy:

а если внутрь белого вставить ещё один блок??? А если белый блок....имеет градиентные границы, а не ровные???? (с табличной вёрсткой так просто всё....а тут я даже не понимаю временами как и мыслить то??? [Only registered and activated users can see links. Click Here To Register...] )

Можно ответ получить хотя бы в виде структуры div_ов?
типа такого

не совсем ясна суть вопроса. вам нужно ваш белый блок (скорее всего контент-блок) вставить в желтый (назовем его main-блок) и при этом задать для содержимого контент блока отстутпы/поля от границы main-блока?
30.03.2007, 14:48
DELPHIna

Zigzag - спасибо за ссылку почитаю...

С блоком разобралась вроде бы....хотя если есть Ваше решение выслушала бы ...да нужно было в блок с одним фоном вставить блок с другим фоном...с отступами ...причем оба блока по ширине и высоте занимают всё своб. место во 2 колонке 2 колончатого макета.
31.03.2007, 14:33
Zigzag

а решение только одно для родительского и дочернего блоков нужно явно указать height или min-height + padding/margin, которые вам нужны
31.03.2007, 14:43
Aykroyd

Там резина белого блока нужна, Паш. Причем как горизонтальная, так и вертикальная. Плюс ко всему этому у белой области – рамка с небольшой тенью...
31.03.2007, 16:44
Zigzag

хм. так чем мой вариант не подойдет, не могу понять.

а рамка с тенью ваще не проблема. запихиваем нужный блок в блок контейнер с фоном этой самой тени, потом внутренний блок просто сдвигаем по диагонали в нужную сторону.
31.03.2007, 21:04
Aykroyd

Цитата:

Originally posted by Zigzag@Mar 31 2007, 16:44
хм. так чем мой вариант не подойдет, не могу понять.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Если будет обеспечиваться горизонтальная и вертикальная резина + рамка с тенью – вполне подойдет. Покажи код! ))

Цитата:

Originally posted by Zigzag@Mar 31 2007, 16:44
а рамка с тенью ваще не проблема. запихиваем нужный блок в блок контейнер с фоном этой самой тени, потом внутренний блок просто сдвигаем по диагонали в нужную сторону.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Тень градиентом.