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

Тема: Поднять блок выше родительского в мозилле

  1. #1

    Регистрация
    19.09.2007
    Сообщений
    36
    * {
    margin:0px;
    padding:0px;
    }

    #top {
    height:259px;
    }
    #top2 {
    height:46px;
    }
    #content {
    height:300px;
    BackGround-color: #FF0FF0;
    }
    #afisha {
    left:40px;
    margin-top:-305px;
    position:relative;
    width:252px;
    }
    #foother {
    height:46px;
    }

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "www.w3.org/TR/html4/loose.dtd">
    <html>
    <body>
    <div id="top"></div>
    <div id="top2"></div>
    <div id="content">
    <div id="afisha">[img]images/afisha.jpg[/img]




    78</div>

    </div>
    <div id="foother"></div>
    </body></html>

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

    Собственно имеем данный код. В эксплорере все отображается как и надо, а вот в мозилле за афишей уезжает и блок с контентом вверх.
    Как решить этот косяк?

  2. #2

    Регистрация
    19.09.2007
    Сообщений
    36
    float:left;

    в афише упустил, теперь эта проблема решена, но то, ради чего это я делал не получилось. Я думал слой afisha будет расятягивать слой с контентом и foother автоматически будет под ним, но не тут-то было. foother игнорирует высоту вложенного в контент слоя и ориентируется исключительно на контент, который меньше, чем afisha.

  3. #3

    Регистрация
    19.09.2007
    Сообщений
    36
    результат можно глянуть тут spbhouse.ru/test/spbhouse2.html

  4. #4

    Регистрация
    06.02.2007
    Адрес
    Kazan
    Сообщений
    186
    Мне кажется, что вы изначально не правильно вариант структуры сайта.. И то что
    В эксплорере все отображается как и надо, а вот в мозилле за афишей уезжает и блок с контентом вверх.
    не говорит о том, что вы все правильно сделали, скорее наоборот..
    если вы покажите макет, то будет проще дать правльный совет..

  5. #5

    Регистрация
    19.09.2007
    Сообщений
    36
    сейчас проблема в том, что блок, находящийся внутри болка контент и сдвинутый относительно него выше, не растягивает сам блок контент.

    позиционирован блок "афиша" как relative, а ведет как абсолют)

  6. #6

    Регистрация
    19.09.2007
    Сообщений
    36
    используя код с этого форума добился несколько чего хотел, но блок с афишей уходят под верхние слои.
    я так понимаю это из-за overflow:hidden
    но если его убрать все сбивается

    и мне как новичку в блочной верстке интересно. чем отличается кострукция

    #main {margin: 0px 300px;background-color:green;}
    от
    * html #main {height: 1%; margin-left: 197px;}

    как я понял что-то из этого работает только в эксплорере, подскажите дилетанту.

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

  7. #7

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    1. Вообще, имхо, сдвигать что-то куда-то НЕ абсолютное, а relative – это плохая практика. А приправлять к тому же все это свойством float – это вообще абсурд...
    2. * html #main {height: 1%; margin-left: 197px;} – это понимает только IE6, а используется данная конструкция для устранения трехпиксельных отступов у float-элементов в IE6...


    P.S.

    1. Высоту фиксированную не задавайте элементам.


    2.
    Задача - нужно сдвинуть блок с афише выше родительского блока с контентом. Абсолютное позиционировние не подойдет, т.к. афиши по высоте увеличивается и под ней есть подвал.
    Не нужно ничего сдвигать. Поместите #top2 тоже в блок #content (если так уж это необходимо). Вообще, еще раз повторюсь, не надо ничего сдвигать без лишней на то надобности...

    3. <img> c height="1790" – это что-то... )

  8. #8

    Регистрация
    19.09.2007
    Сообщений
    36
    Originally posted by Aykroyd@Sep 19 2007, 17:29
    [b]Вообще, имхо, сдвигать что-то куда-то НЕ абсолютное, а relative – это плохая практика.
    Я бы сам с радостью абсолютно сделал данный вариант. Но как же тогда он будет связан с "родительским" блоком, как при увеличении сдвинутого блока, будет расширяться родительский? есть варианты такого решения?

  9. #9

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Задайте для #content свойство overflow: hidden; и какую-нибудь ширину (хоть 100%). Тогда во всех браузерах #afisha не будет проваливаться через низ #content и будет "тянуть" этот #content. И никакого позиционирования при этом – ни absolute, ни relative...

  10. #10

    Регистрация
    19.09.2007
    Сообщений
    36
    Originally posted by Aykroyd@Sep 19 2007, 17:29
    1. Высоту фиксированную не задавайте элементам.
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]

    А как тогда поступать, если нет фиксированной высоты? Как в таблицах растяжки?
    Originally posted by Aykroyd@Sep 19 2007, 17:29
    3. <img> c height="1790" – это что-то... )
    Ну это черновик, я же должен примерно знать как все будет

    Originally posted by Aykroyd@Sep 19 2007, 17:29
    Не нужно ничего сдвигать. Поместите #top2 тоже в блок #content (если так уж это необходимо). Вообще, еще раз повторюсь, не надо ничего сдвигать без лишней на то надобности...
    А если не сдвигать, тогда представлять все в несколько колонок, упростить все как в таблицах?

    Сейчас я вроде отструктурировал как хотел, но совершенно не могу увеличит контентное поле. Все разъезжается. Пример взял ссответственно из прикрепленно темы.

    spbhouse.ru/test/spbhouse2.html

  11. #11

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Originally posted by Грин@Sep 19 2007, 22:38
    А как тогда поступать, если нет фиксированной высоты?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    По умолчанию высота блочных элементов определяется теми элементами, которые они содержат в себе.

    Originally posted by Грин@Sep 19 2007, 22:38
    Как в таблицах растяжки?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Храни Вас Господь...

    Originally posted by Грин@Sep 19 2007, 22:38
    А если не сдвигать, тогда представлять все в несколько колонок
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Да, float рулит.

    Originally posted by Грин@Sep 19 2007, 22:38
    упростить все как в таблицах?
    <div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]
    [/quote]
    Не выражайтесь)

Похожие темы

  1. Растяжение родительского блока для float в IE6
    от Kiosuki в разделе Вёрстка сайта
    Ответов: 2
    Последнее сообщение: 09.06.2009, 21:42
  2. Якори в Мозилле и Firefox
    от Heathrow в разделе Веб-программирование
    Ответов: 3
    Последнее сообщение: 29.06.2008, 12:27
  3. Разваливаеццо блок!
    от mumus в разделе Вёрстка сайта
    Ответов: 8
    Последнее сообщение: 08.03.2008, 21:52
  4. Таблицы не работают в мозилле
    от Xylitolq в разделе Вёрстка сайта
    Ответов: 14
    Последнее сообщение: 09.12.2007, 18:01
  5. Высота родительского блока в FF и Opera
    от Рёга в разделе Вёрстка сайта
    Ответов: 7
    Последнее сообщение: 26.06.2007, 14:19

Ваши права

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