как провести вертикальные линии
Подскажите пожалуста ,как провести вертикальные линии?ну тоесть я имею ввиду отделить Вопрос от радиобаттонов и сами радиобаттоны друг от друга тоесть что бы создавался радиобаттон далее шла линия сверху и донизу моей рамки и потом следующий радиобаттон.
Ну кароче более мение красибо это все разбить. Я не совсем силун в разбивке страницы.И когда рылся в инете как это зделать нашол только тег который отрисовует какойто край <div></div>ну или любой другой конструкции я пытался создать <div></div>с заданой высотой шириной цветом и вставить ево между создание радиобаттонов но у меня неполучилось а получилось что тогда все создавалось дволь этой линии.. Помогите пожалуста правильно все разбить.
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
var answer={}
$(document).ready(function(){
$.ajax({
type: "GET",
url: "test.xml",
dataType: "xml",
success: vasa
});
var button2 = document.getElementById("id1");
button2.style.display='none';
function vasa(xml) {
attemptsanswer=$(xml).find('attemptsanswer')[0].textContent;
textanswer=$(xml).find('textanswer')[0].textContent;
$('.cont2').append(''+textanswer+'');
textanswer=$(xml).find('textanswer')[1].textContent;
$('.cont2').append(''+textanswer+'');
question=$(xml).find('question')[0].textContent;
$('.cont1').append('<p><label><h4>'+question+'</h4></label></p>');
question1=$(xml).find('question1')[0].textContent;
$('.bond1').append('<p><label><h4>'+question1+'</h4></label></p>');
TextButton=$(xml).find('TextButton')[0].textContent;
$('.onki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
TextButton=$(xml).find('TextButton')[1].textContent;
$('.lolki').append('<p><label><h4>'+TextButton+'</h4></label></p>');
TextButton=$(xml).find('TextButton')[2].textContent;
$('.lolki1').append('<p><label><h4>'+TextButton+'</h4></label></p>');
ResultTextTrue=$(xml).find('ResultTextTrue')[0].textContent;
ResultTextFalse=$(xml).find('ResultTextFalse')[0].textContent;
var answers = $(xml).find('answer');
answers.each(function(index){
var a = this.textContent;
var rating = +this.getAttribute('rating');
var inputs = document.getElementsByTagName('input');
if(inputs.length<2)
{
$('.cont').append('<input name="group1" type="radio">');
}
else
{
$('.bond').append('<input name="group2" type="radio">');
}
answer[index] = rating;
});
var div = document.getElementById('id')
var decoration = xml.querySelector('style');
div.style.border = decoration.getAttribute('border');
div.style.width = decoration.getAttribute('width');
div.style.height = decoration.getAttribute('hight');
div.style.padding = decoration.getAttribute('padding');
//div.style.margin = decoration.getAttribute('margin');
div.style.position = decoration.getAttribute('position');
// var p = document.getElementById('id1')
// var decoration = xml.querySelector('buttonstyle');
// p.style.position = decoration.getAttribute('position');
// p.style.width = decoration.getAttribute('width');
// p.style.height = decoration.getAttribute('hight');
// p.style.margin-left = decoration.getAttribute('marginleft');
// p.style.margin = decoration.getAttribute('margin');
}
});
var pressed=0;
// var button2 = document.getElementById("id1");
//button2.style.display='none';
function checkAnswer() {
var error = false;
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length ; i++){
var checked = inputs[i].checked;
var right = answer[i] == 1;
if (checked !== right){
error=true;
break;
}
}
if(pressed<attemptsanswer)
{
i = ++pressed;
}
else
{
pressed=0;
var button = document.getElementById("button");
button.style.display='none';
var button1 = document.getElementById("id2");
button1.style.display='none';
var button2 = document.getElementById("id1");
button2.style.display='';
button2.onclick = function(event){
button.style.display='';
button1.style.display='';
button2.style.display='none';
}
}
output.value=error ? ''+ResultTextFalse+'' : ''+ResultTextTrue+'';
return false;
}
</script>
</head>
<body>
<form onsubmit="return checkAnswer()">
<table>
<div class='cont2' style="margin-left:180px"></div>
<div id="id">
<hr>
<div class='cont1' ></div>
<div align="center" class='cont' ></div>
<hr>
<div class="bond1"></div>
<div align="center" class='bond'></div>
<hr>
</div>
</table>
<p style="margin-top:430px"><button id="button" type="submit" ><div class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>
<p><textarea id="output" readonly></textarea></p>
</form>
</body>
</html>
|
используй css свойство border
Цитата:
|
я пробовал border проблема в том что бордер обрисовует какбы вокруг элемента либо же по его краю,а мне эо не совсем подходит.
И азы я знаю,но не углублялся. И толькочто возникла ище одна проблемка.когда допустим страница не полностью развернута,при прокрутке сраници,не страница двигаетса а вот это
<p style="margin-top:430px"><button id="button" type="submit" ><div class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>
<p><textarea id="output" readonly></textarea></p>
как это предотвратить?Если делаю вот так
<p style="margin-top:430px position:fixed"><button id="button" type="submit" ><div class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>
<p style="margin-top:430px position:fixed"><textarea id="output" readonly></textarea></p>
То эти кнопки создаютса какбы за рамкой сверху страници.что с этим зделать?что бы при прокрутке страници когда она не на весь экран открыта все оставалось на месте? |
Сорри за критику, но если бы ты знал азы, то так бы не сделал:
<table> <div class='cont2' style="margin-left:180px"></div> <div id="id"> <hr> <div class='cont1' ></div> <div align="center" class='cont' ></div> <hr> <div class="bond1"></div> <div align="center" class='bond'></div> <hr> </div> </table> |
jsgeek,
Критика всегда уместна,без критики я бы думал что все круто.Не подскажеш как это сделать по другому(коректнее)? |
Vasy,
В тэг table непосредственно можно помещать только небольшое количество тэгов, как, напр. thead, tfoot, tbody, caption, но главное - tr (список не полный). Ни div ни hr непосредственно в table вставлять нельзя (но наверно можно в td и th) |
я уже убрал table
Но всеже кто-то покажет как это все делать коректно? |
скажите так будет корректно?
<body>
<form onsubmit="return checkAnswer()">
<tr>
<td>
<div id="id">
<div class='cont2' style="margin-left:156px"></div>
<hr>
<div class='cont1' ></div>
<div align="center" class='cont' ></div>
<hr>
<div class="bond1"></div>
<div align="center" class='bond'></div>
<hr>
</div>
</td>
<td>
<p style=" left:15px;position:relative"><button id="button" type="submit" ><div class='onki'></div></button> <button id="id2" type="reset"><div class='lolki'></div></button><button id="id1" type="reset"><div class='lolki1'></div></button></p>
<p style=" ;left:15px;position:relative"><textarea id="output" readonly></textarea></p>
</td>
</tr>
</form>
</body>
|
|
| Часовой пояс GMT +3, время: 04:58. |