Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Теги PRE и CODE, Как получить горизонтальный скролл? 
:(
    Опции темы
Rayled
  Дата 11.5.2010, 20:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 104
Регистрация: 1.5.2010

Репутация: 3
Всего: 3
Здравствуйте. CSS и HTML знаю неплохо (но не на отлично smile ), но вот столкнулся с такой проблемой. Внутри таблицы использую сочетание тегов PRE и CODE, для сохранения форматирования текста. Но дело в том, что, если строка текста слишком длинная, то ячейка таблицы раздвигается, причем сжимаются даже соседние колонки таблицы с заданной в пикселях шириной. А мне необходимо, чтобы в таком случае появлялся горизонтальный скроллинг для выделенного текста, а высота блока PRE оставалась без изменения, т.е. никакого переноса строк не должно быть. Ну и конечно соседние ячейки не должны "съедаться". Подобная тема здесь уже поднималась, но там решения я не нашел.
Помогите, пожалуйста, найти кроссбраузерное решение с данным Доктайпом, используя только CSS и HTML и желательно без хаков. Заранее спасибо.
Вот код (я там уже пытался сделать кое-что, но...):
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
table {width:100%;}
#col1 {background:red;width:200px;}
#col2 {background:blue;}
#col3 {background:red;width:200px;}
pre code {
    background:#ccc;
    display:block;
    overflow:auto;
    white-space:pre;
}
</style>
</head><body>
<table>
<tr><td id="col1">&nbsp;</td>
<td id="col2">
<pre><code>
Строка1Строка1 Строка1Строка1 Строка1Строка1 Строка1Строка1 Строка1Строка1 Строка1Строка1
Строка2Строка2 Строка2Строка2 Строка2Строка2 Строка2Строка2 Строка2Строка2 Строка2Строка2
Строка3Строка3 Строка3Строка3 Строка3Строка3 Строка3Строка3 Строка3Строка3 Строка3Строка3
</code></pre>
 </td>
<td id="col3">&nbsp;</td>
</tr></table></body></html>
PM   Вверх
mcTep
Дата 14.5.2010, 15:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 203
Регистрация: 25.2.2009

Репутация: 3
Всего: 6
Вот у меня такое решение получилось, но только на дивах.. С таблицами не получилось.. 
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Мой сайт</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head><body>
<div style="">
  <div style="width: 200px; float: left"> 
    ф
  </div>
  <div style="width: 200px; float: right"> 
    ф
  </div>
  <div style="margin: 0 200px">
    <div style="overflow:auto">
      <pre><code>
Строка1Строка1 Строка1Строка1 Строка1Строка1 Строка1Строка1 Строка1Строка1 Строка1Строка1
Строка2Строка2 Строка2Строка2 Строка2Строка2 Строка2Строка2 Строка2Строка2 Строка2Строка2
Строка3Строка3 Строка3Строка3 Строка3Строка3 Строка3Строка3 Строка3Строка3 Строка3Строка3
      </code></pre>
    </div>
  </div>
</div>
</body></html>


Здесь стандартная трехколоночная верстка, можно ее доделать, я думаю разберешься =)

А и еще ) Не работает в IE6.. В IE7+ нормально. Но думаю как то решить можно. Что то с первого раза не приходит в голову.


Это сообщение отредактировал(а) mcTep - 14.5.2010, 15:21
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0432 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.