psywalker
-
Posts
13,707 -
Joined
-
Last visited
-
Days Won
58
Content Type
Profiles
Forums
Calendar
Store
Everything posted by psywalker
-
Контейнеру overflow: hidden; срочно.
-
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Да неее, откуда там, я что-то могу сделать, на самом начальном уровне, но дальше моих мозгов не хватает к сожалению А вот смотри в общем вариант, даже не обязательно инпуты отделять от лейблов, всё семантично и без лишнего кода. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bg</title> <style type="text/css"> *{ margin: 0; padding:0} html, body { background: #999; height: 100%; } div { padding: 5px 5px 30px; background: #fff; width: 100px;} img { margin-top: 20px; border: 1px solid #000; padding: 3px; } label { } </style> </head> <body> <form action="#" id="form"> <fieldset id="checkbox"> <input type="checkbox" id="check1" /> <label for="check1"><img src="img1.png" /></label> <input type="checkbox" id="check2" /> <label for="check2"><img src="img2.png" /></label> <input type="checkbox" id="check3" /> <label for="check3"><img src="img3.png" /></label> </fieldset> <fieldset id="radio"> <input type="radio" id="radio1" /> <label for="radio1"><img src="img1.png" /></label> <input type="radio" id="radio2" /> <label for="radio2"><img src="img2.png" /></label> <input type="radio" id="radio3" /> <label for="radio3"><img src="img3.png" /></label> </fieldset> </form> <script> var divCheckbox = document.getElementById('checkbox') var divRadio = document.getElementById('radio') var imgCheckbox = divCheckbox.getElementsByTagName('img') var inputCheckbox = divCheckbox.getElementsByTagName('input') var imgRadio = divRadio.getElementsByTagName('img') var inputRadio = divRadio.getElementsByTagName('input') for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)} for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)} function test(node){ for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i) for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k) if(node.input.type == 'checkbox'){ if(node.input.checked){ node.input.checked=false }else{node.input.checked=true} } if(node.input.type == 'radio'){ for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false if(node.input.checked == true){ node.input.checked=false }else{node.input.checked=true} } } </script> </body> </html> -
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Смотри медведь, можно же в моём варианте посемантничать, например сделать одну общую форму и в ней уже филдсетами разделить наши импуты и картинки на нужные части. Далее также картинки засунуть в лейблы. По правилам неважно где находятся лейблы и связанные с ним инпуты, на каком расстоянии и т. д., так как главное чтобы for/id. совпадало -
А я как увидел, что эта за жесть, сразу представил тебя
-
1) Возможно какие-то стили в движке переопределяют твои. 2) ИЕ6 не понимает display:table-cell;, Далее форму поиска в структуре поменяй местами со списком, Далее внизу в .wp-pagenavi { убери высоту.
-
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Готово Медведь, проверяй <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bg</title> <style type="text/css"> *{ margin: 0; padding:0} html, body { background: #999; height: 100%; } div { padding: 5px 5px 30px; background: #fff; width: 100px;} img { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;} </style> </head> <body> <div id="checkbox"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <img src="img1.png" /> <img src="img2.png" /> <img src="img3.png" /> </div> <div id="radio"> <input type="radio" /> <input type="radio" /> <input type="radio" /> <img src="img1.png" /> <img src="img2.png" /> <img src="img3.png" /> </div> <script> var divCheckbox = document.getElementById('checkbox') var divRadio = document.getElementById('radio') var imgCheckbox = divCheckbox.getElementsByTagName('img') var inputCheckbox = divCheckbox.getElementsByTagName('input') var imgRadio = divRadio.getElementsByTagName('img') var inputRadio = divRadio.getElementsByTagName('input') for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).onclick=function(){test(this)} for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).onclick=function(){test(this)} function test(node){ for(var i = 0; i<imgCheckbox.length;i++)imgCheckbox.item(i).input = inputCheckbox.item(i) for(var k = 0; k<imgRadio.length;k++)imgRadio.item(k).input = inputRadio.item(k) if(node.input.type == 'checkbox'){ if(node.input.checked){ node.input.checked=false }else{node.input.checked=true} } if(node.input.type == 'radio'){ for(var i = 0; i<inputRadio.length;i++)inputRadio.item(i).checked=false if(node.input.checked == true){ node.input.checked=false }else{node.input.checked=true} } } </script> </body> </html> -
Удачи тебе...хаха
-
У меня тоже самое, но я заставляю себя думать, и стараюсь делать, делать, пока не сделаю.
-
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Да, вариант рабочий. Нравится тем, что на странице могут находится и работать чекбоксы и радиобатонны вместе. А не нравится тем, что и правда громоздкий какой-то. Но задача интересная, я тоже попробую решить, только позже. -
Ага, понял тебя. Ну тут уже посложнее дубового метода. Поэтому на это нужно время.
-
Аа, типа клоны? Из одного шаблона?
-
Я по такому принципу и делал дружище
-
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
А что если так сделать, например если радиобатонны, то будет так, а если чекбоксы, то по другому и в целом, как нужно у каждого, в зависимости от того, что ты поставишь. Замени радиобатонны на чекбоксы и посмотри чё будет. Короче протести так и так. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bg</title> <style type="text/css"> *{ margin: 0; padding:0} html, body { background: #999; height: 100%; } div { padding: 5px 5px 30px; background: #fff; width: 100px;} img { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;} </style> </head> <body> <div id="conteiner"> <input type="radio" /> <input type="radio" /> <input type="radio" /> <img src="img1.png" /> <img src="img2.png" /> <img src="img3.png" /> </div> <script> var div = document.getElementById('conteiner') var img = div.getElementsByTagName('img') var input = div.getElementsByTagName('input') for(var i = 0; i<img.length;i++)img.item(i).onclick=function(){test(this)} function test(node){ for(var i = 0; i<img.length;i++)img.item(i).input = input.item(i) if(node.input.type == 'checkbox'){ if(node.input.checked){ node.input.checked=false }else{node.input.checked=true} } if(node.input.type == 'radio'){ for(var i = 0; i<input.length;i++)input.item(i).checked=false if(node.input.checked == true){ node.input.checked=false }else{node.input.checked=true} } } </script> </body> </html> -
Дружище, вот попробуй такой вариант, подойдёт? Скажи, чё не так? <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Content</title> <style type="text/css"> *{ margin: 0; padding:0} ul { list-style: none; overflow: hidden;} ul li { float: left;} ul li a { display: block; padding: 10px 30px; background: red; font: bold 14px Verdana, Geneva, sans-serif; text-decoration: none; color: #300; } div#block div { display: block; background: #CFC; margin-bottom: 3px;} div#block div.active { display: block;} div#block div.none { display: none;} ul li.active a{ background: #993;} </style> </head> <body> <ul id="menu"> <li class="active"><a href="#" onclick="test(0); return false;">Overview</a></li> <li><a href="#" onclick="test(1); return false;">Requirements</a></li> <li><a href="#" onclick="test(2); return false;">Step By Step</a></li> <li><a href="#" onclick="test(3); return false;">Notes</a></li> </ul> <div id="block"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> <div>Content 4</div> </div> <script> var block = document.getElementById('block') var blockDiv = block.getElementsByTagName('div') for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none' blockDiv.item(0).className = 'active' function test(number){ var menu = document.getElementById('menu') var li = menu.getElementsByTagName('li') var block = document.getElementById('block') var blockDiv = block.getElementsByTagName('div') for(var i = 0; i<li.length;i++) li.item(i).className = '' for(var k = 0; k<blockDiv.length;k++) blockDiv.item(k).className = 'none' li.item(number).className = 'active' blockDiv.item(number).className = 'active' } </script> </body> </html>
-
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Погоди, т.е. если я правильно понимаю, то у тебя задача такова: Если это радиобатонны, то мы можем по клику на картинки выбирать их сколько угодно, а если это чекбоксы, то по клику на картинку только один? А так же если это чекбоксы, то при Отжатии они должны выключатся? -
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Да хрен его знает, твои отличия, ты мне сказал как сделать, я сделал. Ставь задачу и всё, а дальше я сам. радиобатонны - это когда мы один выбираем вариант, а чекбоксы- это если несколько. -
Ну да, я давно работал над ним, и вот наконец...
-
На начальном уровне разбираюсь, не больше.
-
Да уж, не для слабонерных штуковина конеш))
-
А всё оказалось так легко.
-
Понял что именно?
-
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Аа, ну так бы и сказал, ща попробуем. Лови, не вопрос <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bg</title> <style type="text/css"> *{ margin: 0; padding:0} html, body { background: #999; height: 100%; } div { padding: 5px 5px 30px; background: #fff; width: 100px;} img { display: block; margin-top: 20px; border: 1px solid #000; padding: 3px;} </style> </head> <body> <div id="conteiner"> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <img src="img1.png" /> <img src="img2.png" /> <img src="img3.png" /> </div> <script> var div = document.getElementById('conteiner') var img = div.getElementsByTagName('img') var input = div.getElementsByTagName('input') for(var i = 0; i<img.length;i++)img.item(i).onclick=function(){test(this)} function test(node){ for(var i = 0; i<img.length;i++)img.item(i).input = input.item(i) if(node.input.checked==false){ for(var i = 0; i<input.length;i++)input.item(i).checked=false node.input.checked=true }else{node.input.checked=false} } </script> </body> </html> -
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Ну вот же, то что ты хотел, нажимаешь на чекбокс, галочка появляется, отжимаешь - убирается, что ещё нужно? -
Можно ли посавить метку <label> на изображение?
psywalker replied to M_A_X's question in HTML Coding
Ну скорее всего я, да ерунда, ты объясни, чё нужно сделать, мне тока за радость потренироваться. -
Видимо да.