Показано с 1 по 17 из 17

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

  1. #1

    Регистрация
    13.03.2007
    Сообщений
    67
    Ой...как же мне жалко Вашего времени....но выхода нет....инчае так и не научусь.... В голове такая каша от прочитанного...

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

    дак вот вопросы:
    1. При уменьшении окна браузера IE v.6.0 всё так скукоживается.... и разъезжается.... (видимо как то надо задать мин ширину что ли??? В Опере 9 тоже немного расползается...но скукоживания, в частности в меню нету.

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

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

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


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

  2. #2

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Для начала...

    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. закройте тэги списков

    Код:
    [*][Только зарегистрированные пользователи могут видеть ссылки. ]
    Продолжим...

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

    подробнее здесь [Только зарегистрированные пользователи могут видеть ссылки. ] и здесь ttp://xhtml.ru/2006/06/04/min-width/

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

    6. про текст вообще ничего не понял.

  3. #3

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

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

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

    если непонятно...нарисую и вышлю.

  4. #4

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Да всё понятно... )
    К сожалению, вынужден констатировать, что рекомендациям-то данным ранее Вы так и не следуете...

    Не надо 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">
    ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]
    ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]
    ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]
    ****[*][Только зарегистрированные пользователи могут видеть ссылки. ]
    ****[/list]
    </div>
    
    <div id="outer">
    ****<div id="left">
    
    Левая менюшка</p></div>
    ****<div id="centrecontent">
    
    Тут много текста</p></div>
    </div>
    
    <div id="footer">
    
    Подвал сайта</p></div>
    </body>
    </html>

  5. #5

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

  6. #6

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

    [!]

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

  7. #7

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by DELPHIna@Mar 27 2007, 09:07
    - закройте мета-тэг ссылку ... а это чем грозит?
    - про тэги списков, я читала, что можно и не закрывать
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Есть большая разница между HTML и XHTML.
    Если Вы определяете в !DOCTYPE второе, то нужно использовать соответствующий синтаксис.

    Originally posted by DELPHIna@Mar 27 2007, 09:10
    Бду изучать то, что Вы выслали
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Я, собственно говоря, только на это и надеюсь... ))

    Originally posted by DELPHIna@Mar 27 2007, 09:10
    ***Опять куча лишних блоков... *** угу...куча....(просто когда эта куча заработает вроде как тебе надо, ты забываешь что её могло бы быть куда меньше)
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Так ведь к тому же и не работает как надо. ))

    Originally posted by DELPHIna@Mar 27 2007, 09:10
    **Злоупотребление абсолютным позиционированием там, где и без него всё хорошо...*** - я уже писала как то, что статей в том учебнике, что Вы дали(ваще то он очень классный!!!), так много .... blink.gif и одно и тоже можно сделать по разному ....а что лучше я пока не разобралась
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Учебник действительно очень хороший.
    А насчет злоупотребления абсолютным позиционированием – у Вас шапка и меню идут с самого верха друг за другом. Какой смысл их абсолютно позиционировать, если они и так (в прямом потоке) так располагаются. Вот если бы они находились в коде в самом низу (например, после футера) – тогда другое дело. Тут бы мы без специального позиционирования не обошлись.

    Originally posted by DELPHIna@Mar 27 2007, 09:10
    **Не надо всяких clear там, где можно обойтись и без них... ** - опятьтаки не понимаю я ещё когда можно, а когда нет
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Всякие заморочки с clear прекрасно заменяет свойство overflow: hidden для блока outer.

    Originally posted by DELPHIna@Mar 27 2007, 09:10
    **Не надо Arial Narrow... ** - что то лб этом я не читала...
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Просто лучше лишний раз перестраховаться.

    Originally posted by DELPHIna@Mar 27 2007, 09:10
    **Не надо sub – он по семантическим соображениям здесь не подходит** аааа...надо было span, да?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Совершенно верно.
    Sub – это подиндекс... Ну, химические формулы там всякие...
    А у Вас код города уменьшен в размерах просто в оформительских целях...

  8. #8

    Регистрация
    13.03.2007
    Сообщений
    67
    Aykroyd - спасибо за разъяснения...исправляюсь... и разрезаю дизайн дальше..... - надеюсь что не потревожу...хотя кто знает.

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

  9. #9

    Регистрация
    05.03.2007
    Сообщений
    26
    [Только зарегистрированные пользователи могут видеть ссылки. ]
    [Только зарегистрированные пользователи могут видеть ссылки. ]

    Тут все подробно

  10. #10

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Какие хорошие ссылки... )) Прям бальзам на душу...
    Иван Григорьевич рулит... И это радует.

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

    Originally posted by DELPHIna@Mar 27 2007, 16:58
    всё никак книжку не купить дельную. Но я собираюсь в магазин...может что и в нашей пупырловки продают.....по css
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Особо дельная литература рекомендуется вот [Только зарегистрированные пользователи могут видеть ссылки. ].

  11. #11

    Регистрация
    13.03.2007
    Сообщений
    67
    Aykroyd и snekaaa ...спасибо ...сейчас займусь прочтением и копированием

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

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

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

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

    Можно ответ получить хотя бы в виде структуры 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: - простите.....но мне надо понять .... Кстати за все предыдущие советы огромное спасибо.... многое разъяснилось для меня....

  12. #12

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    Originally posted by DELPHIna@Mar 27 2007, 07:07
    [b]Zigzag, Вы пишите -
    - закройте мета-тэг ссылку ... а это чем грозит? я что то не помню чтобы незакрытие его чем то мешало....
    - про тэги списков, я читала, что можно и не закрывать....хотя в этот раз, это точно моё упцщение
    про отличия HTML и XHTML и про XHTML в 2х словах лучше почитать здесь, чем у Сагалаева. [Только зарегистрированные пользователи могут видеть ссылки. ]

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

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

    Можно ответ получить хотя бы в виде структуры div_ов?
    типа такого
    не совсем ясна суть вопроса. вам нужно ваш белый блок (скорее всего контент-блок) вставить в желтый (назовем его main-блок) и при этом задать для содержимого контент блока отстутпы/поля от границы main-блока?

  13. #13

    Регистрация
    13.03.2007
    Сообщений
    67
    Zigzag - спасибо за ссылку почитаю...

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

  14. #14

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    а решение только одно для родительского и дочернего блоков нужно явно указать height или min-height + padding/margin, которые вам нужны

  15. #15

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Там резина белого блока нужна, Паш. Причем как горизонтальная, так и вертикальная. Плюс ко всему этому у белой области – рамка с небольшой тенью...

  16. #16

    Регистрация
    23.03.2004
    Адрес
    Беларусь/Минск
    Сообщений
    926
    хм. так чем мой вариант не подойдет, не могу понять.

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

  17. #17

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Zigzag@Mar 31 2007, 16:44
    хм. так чем мой вариант не подойдет, не могу понять.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Если будет обеспечиваться горизонтальная и вертикальная резина + рамка с тенью – вполне подойдет. Покажи код! ))

    Originally posted by Zigzag@Mar 31 2007, 16:44
    а рамка с тенью ваще не проблема. запихиваем нужный блок в блок контейнер с фоном этой самой тени, потом внутренний блок просто сдвигаем по диагонали в нужную сторону.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Тень градиентом.

Похожие темы

  1. Пара вопросов по macromedia fireworks
    от Nicca в разделе Растровая графика
    Ответов: 0
    Последнее сообщение: 03.07.2009, 19:48
  2. Видео по примеру YouTube
    от mityaa в разделе Вёрстка сайта
    Ответов: 2
    Последнее сообщение: 30.07.2007, 14:54
  3. Пара вопросов
    от 25 Cadr в разделе Flash-технологии
    Ответов: 4
    Последнее сообщение: 19.12.2006, 23:15
  4. Почему таблица расползается по китайски???
    от Pantalone в разделе Вёрстка сайта
    Ответов: 8
    Последнее сообщение: 14.07.2006, 11:48
  5. Пара вопросов
    от Cloo в разделе Вёрстка сайта
    Ответов: 7
    Последнее сообщение: 22.10.2004, 21:36

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •