<pre id="idpre">dsgh</pre>
<script type="text/javascript">
document.getElementById( "idpre" ).style....
</script>
Обойтись без события в JS
На сколько я понимаю для тега <PRE> не возможно задать ширину в % от экрана, а мне необходимо чтобы ширина была=ширине экрана. Поэтому есть такая идея <PRE onClick ="this.style.width=screen.width"> вот только проблема какбы сделать событие которое само по себе бы выполнилось (точнее сказать нужно чтобы код внутри тега выпонился вообще безо всякого события). Кто знает как запустить этот код внутри тега без события?
Написать этот код в глобальном контексте, либо повесить на onload страницы.
Хотя конкретно с PRE не уверен, что вы делаете, то что нужно.
Код:
Хотя конкретно с PRE не уверен, что вы делаете, то что нужно.
по таймеру
см. setTimeOut
см. setTimeOut
Цитата: Yurec
На сколько я понимаю для тега <PRE> не возможно задать ширину в % от экрана,
Откуда такое суждение?
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
<pre style="border:1px solid #000;width:110%;background-color: silver;margin: 10px;">
5464654654
64654654654
6465454654 64654654
654654564 654654
</pre>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
<pre style="border:1px solid #000;width:110%;background-color: silver;margin: 10px;">
5464654654
64654654654
6465454654 64654654
654654564 654654
</pre>
</body>
</html>
Ему нужен процент от ширины экрана, а если <pre> будет в контейнере, ничего не получится. Можно попробовать "position: absolute", или использовать вариант vasa_c
Цитата: Proger_XP
Ему нужен процент от ширины экрана, а если <pre> будет в контейнере, ничего не получится.
Естественно. Но когда нужна такая реализация, то и не нужно в контейнер пихать. Да и потом всегда можно его из нормального потока выдернуть. Тем же absolute ))
Коллеги, вобщем тема немножко поменялась, нашел почему у меня не подгонялась ширина, вот пример:
<table><tr><td>
<pre style="border:1px solid #000;width:100%;background-color: silver;overflow:auto; height=100">
5464654654 64654654654 6465454654 64654654 654654564 654654 5464654654 64654654654 6465454654 64654654 654654564 654654
</pre>
</td></tr></table>
Если не внутри <table> то берет ширину экрана. Если внутри <table> то получается такая ерунда.
ПОЧЕМУ ТАК? как этого избежать?
<table><tr><td>
<pre style="border:1px solid #000;width:100%;background-color: silver;overflow:auto; height=100">
5464654654 64654654654 6465454654 64654654 654654564 654654 5464654654 64654654654 6465454654 64654654 654654564 654654
</pre>
</td></tr></table>
Если не внутри <table> то берет ширину экрана. Если внутри <table> то получается такая ерунда.
ПОЧЕМУ ТАК? как этого избежать?
Цитата: Yurec
ПОЧЕМУ ТАК? как этого избежать?
Читать спецу по CSS2 главы с 8 по 11 включительно до полного просветления :D .
Насчет контейнера Proger_XP уже сказал. Если не дошло, то если у тебя pre в table, то ширина pre задается в процентах относительно table, а не экрана. Ибо в нормальном потоке процентное задание ширины вычисляется относительно ширины контейнера. Чуешь разницу между "ширина страницы/экрана" и "ширина контейнера" ;)
Цитата: alekciy
Читать спецу по CSS2 главы с 8 по 11 включительно до полного просветления :D .
Насчет контейнера Proger_XP уже сказал. Если не дошло, то если у тебя pre в table, то ширина pre задается в процентах относительно table, а не экрана. Ибо в нормальном потоке процентное задание ширины вычисляется относительно ширины контейнера. Чуешь разницу между "ширина страницы/экрана" и "ширина контейнера" ;)
Насчет контейнера Proger_XP уже сказал. Если не дошло, то если у тебя pre в table, то ширина pre задается в процентах относительно table, а не экрана. Ибо в нормальном потоке процентное задание ширины вычисляется относительно ширины контейнера. Чуешь разницу между "ширина страницы/экрана" и "ширина контейнера" ;)
Я понимаю. Не понятно вот что: TABLE берет в нашем случае ширину экарана - 100% - ОК? PRE берет ширину TABLE - ОК? Так почему тогда они оба расползаются на 2 экрана? и как ограничить их в данном случае.
Вот оно решение:
Код:
<script>
function gogo()
{
switch(screen.width)
{
case 800:
my_width=600;
break;
case 1024:
my_width=700;
break;
case 1600:
my_width=900;
break;
default:
my_width=500;
}
var paragraphs = document.all.tags('pre');
for (i=0; i < paragraphs.length; i++)
paragraphs.style.width=my_width;
}
</script>
<body onLoad="gogo();">
код страницы
function gogo()
{
switch(screen.width)
{
case 800:
my_width=600;
break;
case 1024:
my_width=700;
break;
case 1600:
my_width=900;
break;
default:
my_width=500;
}
var paragraphs = document.all.tags('pre');
for (i=0; i < paragraphs.length; i++)
paragraphs.style.width=my_width;
}
</script>
<body onLoad="gogo();">
код страницы
Цитата: Yurec
Я понимаю. Не понятно вот что: TABLE берет в нашем случае ширину экарана - 100% - ОК?
Где ты указал, что она берет 100%?
Цитата: Yurec
Не понятно вот что: TABLE берет в нашем случае ширину экарана - 100% - ОК?
Нет. Процентное задание TABLE делается относительно контейнера.
http://shaelf.ru/book/css2/visuren.html#containing-block
Цитата: Yurec
PRE берет ширину TABLE - ОК?
Ну если указываешь 100% то почти.
Цитата: Yurec
Так почему тогда они оба расползаются на 2 экрана? и как ограничить их в данном случае.
Ты что-то путаешь.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
<table border="0" style="border-collapse: collapse; border:1px solid #000;width:50%;margin:0;padding:0;">
<tr>
<td><pre style="border:1px solid #000;width:100%;background-color: silver;margin:0;padding:0;">454545</pre>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>
<body>
<table border="0" style="border-collapse: collapse; border:1px solid #000;width:50%;margin:0;padding:0;">
<tr>
<td><pre style="border:1px solid #000;width:100%;background-color: silver;margin:0;padding:0;">454545</pre>
</td>
</tr>
</table>
</body>
</html>
Для table контейнером является body. При этом я указал, что table может знимать 50% предоставляемого ей пространсва (но не половину размера body! в распоряжение table отдается размер_body-поля-отступы-величина_рамки). А в свою очеред для pre контейнером является блок порожденный элементом td. И вот pre как раз и занимет все предоставляемое ему пространство. С свою очередь контейнер для td порожден элементом tr, а контейнер для tr порожден элементом table разметки. Обычная иерархия. Все это нормальный поток.