Переполнение

[Yahoo!]

Мне надо, чтобы когда элемент переполнялся появлялся скролл, конечно же в голову пришло overflow: scroll Но тогда, когда элемент ещё не переполнен уже появляется неактивный скролл, который портит всю картинку=)

Как убрать этот неактивный скролл?

[psywalker]

Мне надо, чтобы когда элемент переполнялся появлялся скролл, конечно же в голову пришло overflow: scroll Но тогда, когда элемент ещё не переполнен уже появляется неактивный скролл, который портит всю картинку=)

Как убрать этот неактивный скролл?

overflow:auto;

[Yahoo!]

Объясню получше. Есть страница, в нею вставлена таблица, в таблице допустим пример HTML кода,когда этот код по ширине слишком большой таблица растягивается и растягивает всю страницу больше 100% соответсвенно скролл у всего окна браузера. Это как раз при overflow: auto

А надо чтобы у этой таблицы появлялся скролл, но до заполнения его не было, т.е. неактивных скроллов быть не должно.

[Veseloff]

Киньте ссылку - так будет понятнее

[Yahoo!]

А понял, надо таблицу засунуть в див и ему прописать overflow: auto

[psywalker]

А понял, надо таблицу засунуть в див и ему прописать overflow: auto

Конечно же, гениально!

[Yahoo!]

Гениально-гениально, но сработало не до конца=(((

Если как следует переполнить) то появляется полоса прокрутки у элемента и почему-то он всё равно растягивается и растягивает всю страницу...

Выход нашёлся, только если главномудиву прописать фиксированную ширину, 100% не помогает...

Вот короче кусок CSS

div.coding {margin: 10px 0; max-height: 300px; padding: 1px 0 0 1px; overflow: auto; width: 700px}
	table.code {border: 1px solid #077; width: 100%}
	table.code td.numberList {background: #F5F5EA; font-size: 0.8em; padding: 0 5px; width: auto; text-align: right; border-right: 1px solid #6ab}
	table.code td {width: 100%}
	table.code span {color: #0aa}
	table.code pre {color: #055}
	pre.number {}
	pre.code {background: #f0FaFa; font-size: 0.8em; padding: 0 10px}

А вот HTML

<div class="coding"><table class="code"><tr><td class="numberList">
<pre class="number">
1.
2.
3.
4.
5.
6.
7.
</pre>
</td>
<td>
<pre class="code">
<span><</span>table<span>></span>
   <span><</span>tr<span>></span>
	  <span><</span>td<span>></span>
		   ячейка таблицыaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaa
	  <span><</span>/td<span>></span>
   <span><</span>/tr<span>></span>
<span><</span>/table<span>></span>
</pre>
							 </td></tr></table></div>

В этом случае ширина фиксированная, а надо резиновую.

Edited November 7, 2009 by Yahoo!

[psywalker]

естественно, ты же используешь тег <pre>, а в нём весь текст будет отражаться так, как требуется тебе, поэтому если ты не поставишь перенос на другую строку, то всё будет ок

[Yahoo!]

Ну тегу pre в стилях white-space: pre прописал и ничего, а тут я фаирбагом всё облазил и зацепки не нашёл

http://www.dimox.name/

любой HTML-пример у Лебедева в техногрете

[psywalker]

1) Погоди, а ты можешь мне скрин сделать того, что хочешь получить с подробным объяснением.

2) Тебе я так понял нужно тоже самое, что и допустим тут, пример 4? http://www.dimox.name/ под этой записью:

Если это еще не сделано ранее, подключите в своему шаблон фреймворк jQuery, например, вот так:

[Yahoo!]

Там скриншот и не нужен, всё тоже самое что и на dimox.name где пример кода записан.

[psywalker]

Там скриншот и не нужен, всё тоже самое что и на dimox.name где пример кода записан.

так ведь у тебя тоже самое, если кода меньше,то и полосы не будет, а когда он заходит за 700пк, то конечноже она появляется, как и должно быть

[Yahoo!]

700пискс это я прописал для того, что б весь этот блок не тянулся от перезаполнения, а если 100процентов или auto, то он почему тянется и скролл не только у него появляется...

[psywalker]

700пискс это я прописал для того, что б весь этот блок не тянулся от перезаполнения, а если 100процентов или auto, то он почему тянется и скролл не только у него появляется...

ну и чтоже ты хотел, всё правильно, блочный растягивается на всю ширину родителя, в его случае это body, у которого шиирина 100%. Хватит парить тут мозг, учи мат.часть, и пример, который ты показал, один в один совпадает с твоим, так что не нервничай))) http://www.dimox.name/

[Yahoo!]

У родителей ширина не определена. Каркас вообще из таблицы, а код не охото показывать, его много и Вы там ничего не поймёте))))

[psywalker]

У родителей ширина не определена. Каркас вообще из таблицы, а код не охото показывать, его много и Вы там ничего не поймёте))))

у родителей говоришь ширина не определена, ты уверен? Тоесть ты для body например сам всегда ширину определяешь?

[Yahoo!]

У боди 100процентов, но ведь боди не единственный родитель...

и вообще решение найдено, правда в IE6 не всё гладко

две ключевые строки CSS

div.coding {width: 100%; overflow: auto}
table.code {width: 90%; height: 100%; table-layout: fixed; border: 1px solid #6ab; margin: 10px 0}

HTML: див я наоборот из родителя сделал в ребёнка, вот код короче

<table class="code">
							   <tr><td class="numberList">
							   <pre class="number">
1.
2.
3.
4.
5.
6.
7.
</pre>
							   </td>
								<td><div class="coding">
<pre class="code">
<span><</span><strong>table</strong><span>></span>
   <span><</span><strong>tr</strong><span>></span>
	  <span><</span><strong>td</strong><span>></span>
		   ячейка таблицыaaaaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
a
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	  <span><</span><strong>/td</strong><span>></span>
   <span><</span><strong>/tr</strong><span>></span>
<span><</span><strong>/table</strong><span>></span>
</pre>							  
								</div></td></tr>
							 </table>

Специально из-за IE6 пришлось задать width: 90% а иначе идёт наплыв на соседнюю ячейку. В мозиле вообще идеально если ширина 100 процентов

Edited November 7, 2009 by Yahoo!

[psywalker]

ну вот смотри, опять ставишь блочным ширину 100%

div.coding {width: 100%;

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

[Yahoo!]

Так я ставил ему 100%, почему то наплыв на соседнюю ячейку в IE6, в лисе норм, ставишь auto, в IE6 норм, в лисе он растягивается во всё наполнение без скролла...

[psywalker]

Так я ставил ему 100%, почему то наплыв на соседнюю ячейку в IE6, в лисе норм, ставишь auto, в IE6 норм, в лисе он растягивается во всё наполнение без скролла...

Да ты вообще какую то хрень намутил, некрасивую и ещё с каким то отступом в левом крае, мне не понравилось в общем.

[Yahoo!]

С каким отступом? В любом случае Psywalker спасибо за дисскусию

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