Исправить макет через css

У меня ошибка макета, которая проявляется в IE6, и я пытаюсь придумать способ дать некоторые подсказки этому контенту в нашей области контента, чтобы он не выпадал под меню навигации . К сожалению, хотя это, вероятно, было бы относительно легко исправить, если бы я мог изменить дизайн всей страницы, я не могу этого сделать ... это действующий сайт, на котором размещено много-много страниц с контентом ... и только в некоторых необычных обстоятельствах, например, в IE6, в некоторых местах ломается ... поэтому рисковать серьезным изменением макета для владельца контента нецелесообразно.

Макет должен выглядеть примерно так:

+-------+ +-------------------+
| Menu  | | Content chunk 1   |
|       | +-------------------+
|       | +-------------------+
+-------+ | Content chunk 2   |
          +-------------------+
            Footer

Но в IE 6 это выглядит так:

+-------+ 
| Menu  | 
|       | 
|       | 
+-------+ 
+-------------------+ 
| Content chunk 1   |
+-------------------+
+-------------------+ 
| Content chunk 2   |
+-------------------+
            Footer

Я пытался исправить это и просматриваю некоторые из предложенных ссылок здесь, но я надеюсь, что гуру css сможет легко увидеть какой-то свет, которым я не являюсь.

Код выглядит так:

<!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" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px">

    <!-- Menu -->
    <div style="width:160px; float:left; clear:left; border:#999 1px dashed;">
        Menu Item 1<br />
        Menu Item 2<br />
    </div>

    <!-- Main content area -->
    <div style="position: relative; width: 565px; float: left; margin-right: -222px">

        <!-- I'm able to start modifying here. -->
        <!-- Content chunk 1 -->
        <table border="1">
            <tr>
                <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
                <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
            </tr>
        </table>

        <!-- I'd like to be able to stop modifying here. -->

        <!-- Content chunk 2 -->
        <table border="1">
            <tr>
                <td>This is data chunk 1</td>
                <td>This is data chunk 2</td>
                <td>This is data chunk 3</td>
                <td>This is data chunk 4</td>
                <td>This is data chunk 5</td>
            </tr>
        </table>

        <!-- I have to stop modifying here. -->

    <!-- Footer -->
    <div style="float: clear; text-align: center;">
        Here's a footer of some kind.  I don't want to be overlapped.
    </div>

</div>

</body>
</html>

Кстати, я знаю, что операторы стиля css в областях, окружающих область содержимого, не идеальны. Я не кодировал их, мне просто нужно с ними разобраться.

Мне пока не очень повезло ... но я также знаю, что css не в моей компетенции.

Предложения? Или это безнадежно?

РЕДАКТИРОВАТЬ: Я внес некоторые изменения в этот вопрос, чтобы попытаться улучшить ясность ... надеюсь, избавиться от одного или двух голосов против. Большое спасибо тем из вас, кто уже ответил ... Сейчас я начну просматривать эти ответы, чтобы оценить их.


layout css internet-explorer
person Beska    schedule 13.02.2009    source источник
comment
Кто-то проголосовал против. Это разумный вопрос, однако описание того, что на самом деле идет не так, очень слабое, попробуйте добавить больше деталей, возможно, ссылку на снимок экрана.   -  person AnthonyWJones    schedule 13.02.2009
comment
Хорошо ... спасибо за внимание. Я посмотрю, не смогу ли я немного прояснить природу проблемы.   -  person Beska    schedule 13.02.2009

Ответы (6)


arrow_upward
2
arrow_downward

Я не вижу способа исправить это, используя только CSS. Расчет обертывания IE6 будет выполнен таким образом, что, если основная область содержимого не будет расширена, содержимое будет перемещено под меню. Я не знаю, будет ли это работать в рамках ваших ограничений, но небольшой код, подобный этому, исправит это визуально.

function resize_content ( )
{
     var main = document.getElementById ( "main" );
     var content = document.getElementById ( "content" );
     if ( main && content )
          main.style["width"] = ( content.clientWidth + 160 ) + "px";
}

Я использовал идентификаторы для ясности, но если вы не можете изменить разметку, вы можете получить элементы, используя родственников.

person Joseph Tary    schedule 13.02.2009
comment
На самом деле у меня есть идентификаторы ... Я просто удалил их в образце, пытаясь сократить образец до самых важных элементов. Спасибо! - person Beska; 13.02.2009
comment
Этот ответ невероятно сладок (или настолько сладок, насколько может быть взлом уродливой системы). - person Beska; 13.02.2009
comment
Спасибо! Я согласен; это не самое красивое решение, но вы звучали так, как будто вы довольно ограничены (и я знаю, как это бывает) - person Joseph Tary; 13.02.2009

arrow_upward
3
arrow_downward

если вы можете обернуть проблемную таблицу в другой элемент уровня блока, например тег div, вы можете стилизовать этот div, как показано ниже:

<div style="width: 100%; overflow: scroll;">
  <table border="1">
      <tr>
          <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
       </tr>
  </table>
</div>

Это поместит таблицу в прокручиваемое окно, поэтому она не растянет div за пределы 565 пикселей. Это, конечно, сработает для вас только в том случае, если вы можете сделать прокручиваемую таблицу для вашего клиента. К сожалению, у вас не так много других вариантов.

person Ross Pace    schedule 13.02.2009
comment
Я бы рекомендовал вместо этого изменить это на overflow-x: scroll, но это очень хорошее решение. - person Ben Blank; 13.02.2009

arrow_upward
1
arrow_downward

Я знаю, что это не то решение, которое вы ищете, но возможной альтернативой было бы изменить сам текст и добавить наведение, чтобы отобразить все это ... например:

‹Td> ‹span title =" Это блок данных 1 с ALongChunkThatDoesn'tDivideWell "> Это блок данных 1 с ... ‹/span> ‹/td>

person Chris Shaffer    schedule 13.02.2009

arrow_upward
1
arrow_downward

Я бы сказал, что безнадежно, если вы не можете добраться до div 565px, потому что это то, что не позиционирует себя внутри меню ...

Вот что вы могли бы сделать с JS:

    <!-- I'm able to start modifying here. -->
    <script type="text/javascript">
    $(document).ready(function() {
        $('table#firstTable').parent().parent('div').removeAttr('style').attr('style', 'margin: 11px auto;');
        });
    </script>

Сначала вы избавляетесь от жестко запрограммированного стиля на DIV, а затем добавляете обратно все, что хотите, чтобы там оставалось. Довольно неуклюже, но надеюсь, вы уловили идею.

person montrealist    schedule 13.02.2009
comment
нет, он мог бы использовать селектор! important, чтобы переопределить то, что ему нужно, или даже JS, если до этого дойдет - person annakata; 13.02.2009
comment
кстати, он будет работать, если вы удалите width: 775px, поскольку он заставляет div 565px прыгать вниз, потому что он не помещается в одну строку с меню из-за дополнительной ширины из-за границ (160 + 565 + границы делают не равно 775). - person montrealist; 13.02.2009

arrow_upward
1
arrow_downward

Просто не существует решения, которое вам понравится и которое вам будет разрешено реализовать. DOCTYPE ("Dtd Xhtml") с неверным регистром переводит IE6 в режим причуд, из которого нет возврата. В частности, в режиме причуд нет абсолютно никакой возможности заставить IE6 не «растягивать» элементы, что нарушает ваше плавание. Вы можете заставить его появиться (все еще растянутым) на той же «строке», что и ваш float, если вы можете получить доступ к «основному содержимому» div, но помимо этого вам просто придется изменить содержимое, добавив пробелы или <wbr>s:

<!-- this works, but would be hard to implement programmatically -->
<td>This is data chunk 1 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 2 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 3 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 4 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 5 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
person Ben Blank    schedule 13.02.2009
comment
Переходный DOCTYPE переводит IE6 в режим причуд ... Только когда DOCTYPE не является первым оператором на странице - не в этом случае. - person Traingamer; 13.02.2009
comment
Вы правы - я думаю, что это неправильный регистр, а не переходное DTD, которое переводит IE в режим причуд. - person Ben Blank; 13.02.2009

arrow_upward
0
arrow_downward

Если я правильно понял, я думаю, вы ищете что-то похожее на следующее:

<!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" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px; position: relative">

    <!-- Menu -->
    <div style="position: absolute; width:160px; left: 0; top: 0; border:#999 1px dashed;">
            Menu Item 1<br />
            Menu Item 2<br />
    </div>

    <!-- Main content area -->
    <div style="margin-left: 165px">

            <!-- I'm able to start modifying here. -->
            <!-- Content chunk 1 -->
            <table border="1">
                    <tr>
                            <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
                    </tr>
            </table>

            <!-- I'd like to be able to stop modifying here. -->

            <!-- Content chunk 2 -->
            <table border="1">
                    <tr>
                            <td>This is data chunk 1</td>
                            <td>This is data chunk 2</td>
                            <td>This is data chunk 3</td>
                            <td>This is data chunk 4</td>
                            <td>This is data chunk 5</td>
                    </tr>
            </table>

            <!-- I have to stop modifying here. -->

    <!-- Footer -->
    <div style="float: clear; text-align: center;">
            Here's a footer of some kind.  I don't want to be overlapped.
    </div>

</div>

</body>
</html>

Приведенный выше CSS делает следующее: Делает внешний div относительным позиционированием, что позволяет вам взять div меню и расположить его абсолютно в левом верхнем углу. Затем слева от содержимого было помещено левое поле размером 165 пикселей. Любой контент, который не умещается в пространстве контента, должен перетекать вправо. У меня нет возможности протестировать в IE 6, это работает в Safari и должно быть в Firefox.

person Steve Platz    schedule 13.02.2009
comment
Ах ... но, к сожалению, это та область, которую я не могу изменить. На самом деле я не могу изменить что-либо за пределами области содержимого (включая контейнер содержимого), поскольку это может повлиять на все на сайте. - person Beska; 13.02.2009