Исправить макет через CSS - PullRequest
Новая
       3

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

2 голосов
/ 13 февраля 2009

У меня ошибка макета, которая появляется в 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 - это , а не , где находится мой опыт.

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

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

Ответы [ 6 ]

3 голосов
/ 13 февраля 2009

если вы можете обернуть поврежденную таблицу в другой элемент уровня блока, такой как тег 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>

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

2 голосов
/ 13 февраля 2009

Я не вижу способа исправить это, используя только 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";
}

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

1 голос
/ 13 февраля 2009

Просто не существует решения, которое вам понравится и будет позволено реализовать. Неправильный 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>
1 голос
/ 13 февраля 2009

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

Это блок данных 1 с ...
1 голос
/ 13 февраля 2009

Я бы сказал, что безнадежно, если ты не сможешь добраться до 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, а затем добавляете обратно все, что хотите, чтобы остаться там. Довольно неуклюжий, но я надеюсь, что вы поняли.

0 голосов
/ 13 февраля 2009

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

<!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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...