Вход на сайт
Про divы и валидность
122
NEW 26.11.05 09:21
Последний раз изменено 26.11.05 09:22 (Stiner_rd)
Вот тут http://devel.spotnic.de/progressbar_test/index_html лежит страница с примером.
Проблема в следующем: при просмотре в IE прогрессбар вылазит на 1 пиксель за рамку. Если настроить так, чтобы не вылазил, то во всех остальных браузерах он не доходит до рамки на тот же самый пиксель. При этом в IE ьщжно видеть проценты а в Мозиле нет. Лучше всего получается в Konqueror, но надо чтобы было везде одинаково.
Вопрос второй: когда проверяю страницу на валидность http://validator.w3.org/check?uri=http://devel.spotnic.de/progressbar_test/index..., то оказывается нельзя использовать такие тэги как id или style. A как тогда надо?
Проблема в следующем: при просмотре в IE прогрессбар вылазит на 1 пиксель за рамку. Если настроить так, чтобы не вылазил, то во всех остальных браузерах он не доходит до рамки на тот же самый пиксель. При этом в IE ьщжно видеть проценты а в Мозиле нет. Лучше всего получается в Konqueror, но надо чтобы было везде одинаково.
Вопрос второй: когда проверяю страницу на валидность http://validator.w3.org/check?uri=http://devel.spotnic.de/progressbar_test/index..., то оказывается нельзя использовать такие тэги как id или style. A как тогда надо?
Свет в конце тёмного больничного коридора исходил от гостеприимной таблички с надписью "Морг"…
NEW 26.11.05 13:00
в ответ Stiner_rd 26.11.05 09:21
Там же написано в валидаторе, ты используешь стрикт тип документа. Замени на это:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
и всё будет валидно.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
и всё будет валидно.
Dropbox - средство синхронизации и бэкапа файлов.
NEW 26.11.05 16:03
в ответ Stiner_rd 26.11.05 15:46
Угу. 
зы: position поддерживается IE 6 частично, мне лень выяснять было, в чём частичность заключается, я таблицами всегда обхожусь, м.б. народ подскажет в чём именно глюк с позиционированием дивов в ИЕ заключается...
зы: position поддерживается IE 6 частично, мне лень выяснять было, в чём частичность заключается, я таблицами всегда обхожусь, м.б. народ подскажет в чём именно глюк с позиционированием дивов в ИЕ заключается...
Dropbox - средство синхронизации и бэкапа файлов.
26.11.05 19:03
0. Всегда ставь px при указании размера если ты имеешь в виду пиксели.
1. Юзай getElementById
2. Юзай innerHTML вместо innerText
1. Юзай getElementById
2. Юзай innerHTML вместо innerText
<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta name="author" content="Stiner_rd" />
< style type="text/css">
#roll {
position: relative;
background-color: #0000FF;
border: solid 0px;
width: 30px;
height: 20px;
top: 0px;
left: 1px;
z-index: 2;
}
#proc {
position:relative;
text-align: center;
font-weight: bolder;
color: #c0c0c0;
border: solid black 1px;
width: 400px;
height: 20px;
top: -21px;
left: 0px;
z-index: 3;
}
</style>
<script language="JavaScript" type="text/javascript">
<!-- Start Script
var delay_time = 40; // msecs
var count = 0;
function updateProgress()
{
var roll = document.getElementById( "roll" ,0);
var proc = document.getElementById( "proc" ,0);
var wwidth = (window.innerWidth)?window.innerWidth: ((document.all)?document.body.offsetWidth:null,0);
if ( count < 400 ) {
proc.innerHTML = Math.floor(count/4) "%";
roll.style.width = count "px";
roll.style.left = wwidth / 2 - 200 1 "px";
proc.style.left = wwidth / 2 - 200 "px";
window.focus(,0);
setTimeout( "updateProgress()", delay_time ,0);
}
else
alert("ok",0);
}
</script>
</head>
<body onload="updateProgress()">
<br /><br /><br /><br />
<div style="height: 21px">
<div id="roll"> </div>
<div id="proc">0%</div>
</div>
</body>
</html>
PS Руки бы оторвать программисту этого сайта...
NEW 27.11.05 00:22
в ответ Stiner_rd 26.11.05 09:21
Этот сайт почикал все плюсы, так что ещё раз подчищенный вариант:
<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>Test</title>
<style type="text/css">
#progress_bar {
margin: auto;
width: 400px;
height: 20px;
text-align: left;
}
#progress_bar[id] {
border: 1px solid black;
}
#progress_bar_text {
position: relative;
text-align: center;
font-weight: bolder;
color: #C0C0C0;
z-index: 3;
}
* html #progress_bar_text {
border: 1px solid black;
}
#progress_bar_counter {
position: relative;
top: -20px;
width: 130px;
height: 20px;
background-color: blue;
z-index: 2;
}
</style>
<script language="JavaScript" type="text/javascript">
var delay_time = 40; // msecs
var count = 0;
function updateProgress()
{
if ( count++ < 400 ) {
document.getElementById( "progress_bar_text" ).innerHTML = Math.floor(count/4) + "%";
document.getElementById( "progress_bar_counter" ).style.width = count + "px";
setTimeout( "updateProgress()", delay_time ,0);
}
}
</script>
</head>
<body onload="updateProgress()">
<div style="text-align:center">
<div id="progress_bar">
<div id="progress_bar_text">0%</div>
<div id="progress_bar_counter"></div>
</div>
</div>
</body>
</html>
