Пропадает часть слоя - SEO форум MaulTalk.com

Сообщение сайта

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

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

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

SEO форум MaulTalk.com > Веб-строительство > Программная часть

Пропадает часть слоя

Опции

Гость_0_*
Гость_0_*

Topic Starter сообщение

8.1.2009, 12:38; Ответить: Гость_0_*

Сообщение #1

Guest

Столкнулся с проблемой - в слое (div) имеется плавающая вставка с небольшим количеством текста. На всякий случай чтобы она не вылезала из родителя, его содержание поджато на соответствующее расстояние в процентах. В ИЕ7 и Опере все работает как задумано, а в ИЕ6 часть родителя под вставкой просто исчезает.

Проблема в том, что нельзя задавать ширину родителя в явной форме например 100% - тогда за счет полей, обводок и отступов общая ширина контейнера получается больше 100% и появляется горизонтальная полоса прокрутки. Подгонять под какие-то меньшие проценты - не индустриально. Если убрать свойство position:relative; то в ИЕ6 все получается нормально, но убирать - нельзя: в контейнере несколько элементов с абсолютным позиционированием.

В общем я всяко-разно стучал в бубен - каменный цветок не выходил, пришлось разбить один стиль prodpage на два и соответственно обернуть контейнер еще одним дивом с обводками, полями и отступами без relative, внутри которого гнездится контейнер содержания с relative.

Может быть есть простое решение?

Вот изолированный кусок кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

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

<style type="text/css">

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

.prodpage {
    position: relative;
    margin: 7px;
    font-size: 0.812em;
    padding: 5px;
    border: 2px solid orange;
    background-color: yellow;
}

.insert {
    width: 28%;
    float: right;
    border: 1px gray dashed;
    background-color: #FFEBD7;
}

.insert p {
    font-size: 0.812em;
    margin: 7px;
    text-align: right;
}

.insertfix {
    width: 70%;
    border-right: 2px orange solid;
}

</style>

</head>

<body>

    <div class="prodpage">
        <div class="insert">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper. </p>
        </div>
        <div class="insertfix">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper.
            In ac erat. Donec vitae mauris vitae justo lobortis adipiscing. Duis velit.
            Suspendisse potenti. Nam arcu pede, auctor ac, eleifend et, vehicula sit amet, elit.
            Aenean nibh eros, porttitor scelerisque, vehicula eget, tincidunt quis, mi. Aliquam
            sodales gravida arcu.
        </div>
    </div>

</body>

</html>

Иллюстрация - в аттаче.

Эскизы прикрепленных изображений

Ответить с цитированием данного сообщения

ZiTosS ZiTosS 8.1.2009, 17:20; Сообщений: 5148 Поблагодарили: 0 раз Репутация: 8 Просмотр профиля	8.1.2009, 17:20; Ответить: ZiTosS Сообщение #2
Ваша совесть Группа: User Сообщений: 5148 Регистрация: 18.2.2008 Из: Нижний Новгород Поблагодарили: 0 раз Репутация: 8	Есть простое решение, просто ваш DOCTYPE strict Идёт со стандартами, стоит воспользоваться Transnational, он более мягок. Transnational в IE: Если содержимое превышает заданную величину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width. Кстати ещё можете попробовать значение ширины width: auto; устанавливает ширину исходя из типа и содержимого элемента _http://htmlbook.ru/css/width.html А вот если что почитать поточнее

Гость_0_* Topic Starter Гость_0_*	Topic Starter 9.1.2009, 3:23; Ответить: Гость_0_* Сообщение #3
Guest	Блок и так изменяет свои размеры подстраиваясь под контент - просто часть его обрезается визуально - вместе с обводками и всем остальным. Как отрубается. В этом и вопрос.

ZiTosS

9.1.2009, 4:15; Ответить: ZiTosS

Сообщение #4

Ваша совесть

Группа: User
Сообщений: 5148
Регистрация: 18.2.2008
Из: Нижний Новгород
Поблагодарили: 0 раз
Репутация:

Мде.. Перепробовал все варианты, прочитал ещё раз ваш вопрос.
Я считаю что тут подойдёт именно обвёртка, другого выхода не вижу. Просто у вас 2 противоречия.
1) вам нужны отступы
2) но этот элемент является relative

Если вы ему будете оставлять ширину по умолчанию и при этом ещё делать у внутреннего элемента обтекание, ваш блок всегда не будет на 100% растянут.

Хотя можно сделать так... Поставить вашему .prodpage height: 100%;
Но одна тока неурядица, в FF такой способ с абсолютными элементами не прокатывает в отличии от IE6, там всё отлично

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

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

<style type="text/css">

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

.prodpage {
    position:relative;
    margin: 7px;
    font-size: 0.812em;
    padding: 5px;
    border: 2px solid orange;
    background-color: yellow;
    height: 100%;
}

.insert {
    width: 28%;
    border: 1px gray dashed;
    background-color: #FFEBD7;
    float: right;
}

.insert p {
    font-size: 0.812em;
    margin: 7px;
    text-align: right;
}

.insertfix {
    width: 70%;
    border-right: 2px orange solid;
}

</style>

</head>

<body>
    <div class="prodpage">
        <div class="insert">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper. </p>
        </div>
        <div class="insertfix">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper.
            In ac erat. Donec vitae mauris vitae justo lobortis adipiscing. Duis velit.
            Suspendisse potenti. Nam arcu pede, auctor ac, eleifend et, vehicula sit amet, elit.
            Aenean nibh eros, porttitor scelerisque, vehicula eget, tincidunt quis, mi. Aliquam
            sodales gravida arcu.
        </div>

    </div>

</body>

</html>

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой

или обратитесь к любому из модераторов.

« Предыдущая тема · Программная часть · Следующая тема »

1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)

Пользователей: 0

Похожие темы

Тема	Ответов	Автор	Просмотров	Последний ответ
CPA сеть admitad.com \| Официальный топик Часть 2	105	Antony_ADmitAD	27726	17.3.2020, 10:59 автор: r0mZet
admitad.com \| партнерская сеть - часть 2 Официальный топик партнерской сети admitad.com	92	Antony_ADmitAD	48960	4.3.2019, 14:45 автор: admitad_official
Програмная часть сайта	0	wmmarket	1731	20.10.2016, 0:35 автор: wmmarket
Вывод изображения при наведения на часть картинки по area	1	androv77	4835	16.7.2016, 17:32 автор: -YroKPROG-
Подскажите партнерку - есть часть URL'a	1	MXMX	1822	23.6.2016, 10:47 автор: psk89

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

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

Текстовая версия

Сейчас: 19.4.2024, 6:23

Дизайн