Исправлена компоновка с помощью css

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

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

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

Но в IE 6, он выглядит следующим образом:

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

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

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

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

источник

2009-02-13 Beska

Кто-то проголосовал за quesiton. его разумный вопрос, однако, описание того, что на самом деле происходит неправильно, очень слабое, попробуйте добавить более подробную информацию, возможно, ссылку на снимок экрана. – AnthonyWJones

Хорошо ... спасибо за головы. Я посмотрю, не могу ли я немного прояснить характер проблемы. – Beska

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

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

источник

2009-02-13 18:27:25

На самом деле у меня есть идентификаторы ... Я просто удалил их в образце, пытаясь свести образец к критическим требованиям. Благодаря! – Beska

Этот ответ невероятно сладкий (или такой же сладкий, как взломать уродливую систему, может быть.) – Beska

Спасибо! Согласен; это не самое приятное решение, но вы звучали так, будто вы довольно ограничены (и я знаю, как это) –

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

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

источник

2009-02-13 17:15:05 montrealist

nah, он может пойти с важным селектором, чтобы переопределить то, что ему нужно, или даже JS, если это произойдет с этим – annakata

, кстати, он будет работать, если вы удалите ширину: 775px, так как он делает прыжок div 565px вниз, потому что он не вписывается в одну строку с меню из-за дополнительной ширины из-за границ (160 + 565 + границы не равны 775). – montrealist

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

< < TD> пядь название = «Это блок данных 1 withALongChunkThatDoesn'tDivideWell»> Это данные с блока 1 ... </SPAN> </TD>

источник

2009-02-13 17:18:14

Там просто не является решением, которое вы оба, как и быть разрешено воплощать в жизнь. Неверно обведенный DOCTYPE («Dtd Xhtml») выдает IE6 в режим причуд, из которого нет возврата. В частности, в режиме quirks есть абсолютно нет способа заставить IE6 не «растягивать» элементы, которые разбивают ваш плавающий.Вы можете заставить его появляться (все еще растянуто) на той же «линии», что и ваш поплавок, если вы можете получить доступ к «основному контенту» 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>

источник

2009-02-13 17:39:14

«Переходный DOCTYPE выдает IE6 в режим quirks ...» Только когда DOCTYPE не является первым заявлением на странице - не в этом случае. – Traingamer

Вы правы - я думаю, что это неправильный корпус, а не переходный DTD, который бросает IE в режим причуд. –

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

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

источник

2009-02-13 17:44:51

Я бы рекомендовал изменить это на 'overflow-x: scroll', но это очень приятное решение. –

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

<!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 относительно расположенный, что позволяет затем взять menu div и расположите его абсолютно в верхнем левом углу. Затем слева от содержимого был помещен левый край 165px. Любой контент, который не соответствует пространству содержимого, должен переливаться вправо. У меня нет возможности протестировать в IE 6, это работает в Safari и должно быть в Firefox.

источник

2009-02-13 19:11:42

Ahh..but, к сожалению, это в области, которую я не могу изменить. Я не могу ничего изменить вне области содержимого (включая контейнер содержимого), так как это может повлиять на * все * на сайте. – Beska

Исправлена ​​компоновка с помощью css

ответ

Смежные вопросы

Исправлена компоновка с помощью css