Для желающих получить опыт вёрстки

Dimitry Wolotko · May 17, 2009

Предлагаю вот такую совсем простую форму.

Вкладки переключатся должны простым JS - без сторонних библиотек.

psywalker · May 17, 2009

Dimitry Wolotko

Отличная идея давать всякие задачки для нас, учеников, только у меня вопросы на будещее:

1) А если задания включают JS, то я могу без него делать задания, потому что я просто не знаю его?

1.1. вот в этой теме нужен JS например, я не знаю, как мне переключить Вкладки, можно я попробую сделать на CSS?

2) Задания можно делать таблицами, если так проще?

p.s. Дмитрий, выкладывайте побольше макетиков, да посложнее, будет интересно :blink:

Edited May 17, 2009 by psywalker

Dimitry Wolotko · May 17, 2009

На стилях ты это не сделаешь как надо. Тут JS примитивный.

Верстай как хочешь - в данном случае таблица вполне имеет место быть.

Много макетов не смогу выкладывать - но всё что смогу - всё будет.

psywalker · May 17, 2009

Dimitry Wolotko

1)

Тут JS примитивный.

Я даже примитивный не знаю))

2)

Верстай как хочешь - в данном случае таблица вполне имеет место быть.

ОК

3)

Много макетов не смогу выкладывать - но всё что смогу - всё будет.

Спасибо :blink:

Dimitry Wolotko · May 17, 2009

Наверстай две стороны формы, потом или я, или кто-нибудь ещё, научим тебя их переключать

psywalker · May 17, 2009

Dimitry Wolotko

С удовольствием :blink:

Clayton · May 17, 2009

О, Спасибо! Как раз с формами у меня большой пробел. Попробую сделать.

Dimitry Wolotko · May 18, 2009

Не за что Пробуйте.

belovres · May 18, 2009

А что на другой вкладке кто нить скажет?

psywalker · May 18, 2009

Dimitry Wolotko

Вобщем я сделал две формы http://psywalker.ru/Form/form.html во второй написал от фонаря ерунду, но суть не в этом, у меня есть вопросы:

1) Как средствами CSS сделать legend, как у вас на картинке, чтобы такой же был прямоугольный, с Бордером и при этом смотрелся одинаково во всех броузерах?

2) Как мне разместить рядом Две таблицы, как у вас на рисунке, тоесть получается, что нижняя как бы находиться под верхней, и при этом вкладочка для открывания Нижележащей находиться справа от legend, как у вас на рисунке?

3) В Форме я использую такую запись: <label for="house"><input type="radio" id="house" /> жилые дома</label>, тоесть в элемент label я помещаю <input type="radio" id="house" />, правильно ли я делаю, так вообще можно делать?

4) Я заворачиваю некоторые строки в Форме в <p></p>, ну например для разрывание строки, можно ли использовать в форме <p></p> или я делаю неправильно?

5) Ну и наконец интересно узнать, как всё таки переключать вкладки? :blink:

Dimitry Wolotko · May 18, 2009

А что на другой вкладке кто нить скажет?

Пусть будет тоже самое, но с другими названиями.

Dimitry Wolotko
Вобщем я сделал две формы http://psywalker.ru/Form/form.html во второй написал от фонаря ерунду, но суть не в этом, у меня есть вопросы:
1) Как средствами CSS сделать legend, как у вас на картинке, чтобы такой же был прямоугольный, с Бордером и при этом смотрелся одинаково во всех броузерах?
2) Как мне разместить рядом Две таблицы, как у вас на рисунке, тоесть получается, что нижняя как бы находиться под верхней, и при этом вкладочка для открывания Нижележащей находиться справа от legend, как у вас на рисунке?
3) В Форме я использую такую запись: <label for="house"><input type="radio" id="house" /> жилые дома</label>, тоесть в элемент label я помещаю <input type="radio" id="house" />, правильно ли я делаю, так вообще можно делать?
4) Я заворачиваю некоторые строки в Форме в <p></p>, ну например для разрывание строки, можно ли использовать в форме <p></p> или я делаю неправильно?
5) Ну и наконец интересно узнать, как всё таки переключать вкладки?

0. видишь, что радио-баттоны на три группы разбиты? ничего не навевает?

1. это не легенд, это чисто бордеры - ничего сложно, немного z-index и border-bottom:1px solid white;

2. не вкурил вопроса;

3. лучше всё-таки вот так - <input type="radio" id="house" /> <label for="house">жилые дома</label>

4. как угодно, я иногда тоже в параграфы вкладываю;

5. попозжа расскажу, не бойся, или даже покажу;

psywalker · May 18, 2009

Dimitry Wolotko

видишь, что радио-баттоны на три группы разбиты? ничего не навевает?

А чё с ними? что вы имеете ввиду?

1 )

1. это не легенд, это чисто бордеры - ничего сложно, немного z-index и border-bottom:1px solid white;

Как это Бордеры? можно поподробнее

2)

не вкурил вопроса;

Я имею ввиду у вас на рисунке Одна таблица, а вторая как бы под ней, которая должна открываться с помощью вкладки

Dimitry Wolotko · May 18, 2009

Что это три группы, в каждой из которых должен быть выбрал один лишь радио-баттон.

1. Думай, иначе не интересно.

2. Да, просто в самом начале одна из них будет с display:none;

psywalker · May 18, 2009

Что это три группы, в каждой из которых должен быть выбрал один лишь радио-баттон.

Аааа, это тоесть надо сделать отдельные Три формы?

Dimitry Wolotko · May 18, 2009

 <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>

Угадаешь откуда я это скопировал?

Форма должна быть одна.

psywalker · May 18, 2009

скопировал наверн у себя? из оригинала :blink:

Dimitry Wolotko · May 18, 2009

http://htmlbook.ru/html/input.html

psywalker · May 18, 2009

Dimitry Wolotko

Аа, я понял , что за тема, тада пойду переделывать

psywalker · May 18, 2009

Dimitry Wolotko

Готово, верхние две))

http://psywalker.ru/Form/form.html

Styx · May 18, 2009

А можно просто сюда выложу код своего варианта исполнения? Или обязательно надо где-то в интернете сделать страничку? Картинок-то все равно нет...

Dimitry Wolotko · May 18, 2009

Можно и сюда, но лучше всё-таки отдельную страницу.

Styx · May 18, 2009

Спасибо. Думаю, это только на первый раз. В следующий исправлюсь, сделаю на отдельной...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <title>Form</title>

   <style type="text/css">
	  * {
		 margin: 0px;
		 padding: 0px;
	  }
	  body {
		 font-family: Arial, Verdana;
		 font-size: 10pt;
		 padding: 30px;
	  }
	  input {
		 margin-right: 12px;
		 line-height: 20pt;
	  }
	  form {
		 font-weight: bold;
	  }
	  #main {
		 width: 440px;
		 height: 260px;
		 padding: 0px;
		 line-height: 20pt;
	  }
	  #tabLeft, #tabRight {
		 height: 30px;
		 text-align: center;
		 float: left;
	  }
	  #tabLeft a, #tabRight a {
		 height: 30px;
		 outline: none;
	  }
	  .activeTab {
		 width: 218px;
		 border-left: 1px solid #D0D0D0;
		 border-right: 1px solid #D0D0D0;
		 border-top: 1px solid #D0D0D0;
		 border-bottom: 0px;
	  }
	  .activeTab a {
		 color: #000000;
		 text-decoration: none;
		 cursor: default;
	  }
	  .inactiveTab {
		 width: 220px;
		 border-left: 0px;
		 border-right: 0px;
		 border-top: 0px;
		 border-bottom: 1px solid #D0D0D0;
	  }
	  .inactiveTab a {
		 color: #73A0C5;
		 text-decoration: none;
		 cursor: pointer;
		 border-bottom: 1px dashed #73A0C5;
	  }
	  #activeLeft, #activeRight {
		 border-bottom: 1px solid #D0D0D0;
		 border-left: 1px solid #D0D0D0;
		 border-right: 1px solid #D0D0D0;
		 clear: both;
	  }
	  #activeRight {
		 display: none;
	  }
	  .contLeft, .contRight {
		 float: left;
		 padding: 15px 0px 15px 25px;
		 width: 194px;
	  }
	  .contLeft p, .contRight p {
		 text-align: right;
		 color: #ACACAC;
		 letter-spacing: 2pt;
		 margin-right: 15px;
	  }
	  .contLeft div {
		 border-right: 1px solid #D0D0D0;
	  }
	  .area {
		 width: 149px;
		 height: 25px;
		 border: 1px solid #000000;
	  }
	  #footer {
		 background-color: #F0F0F0;
		 width: 420px;
		 height: 40px;
		 padding: 5px 10px;
	  }
	  #footer input {
		 background-color: #D1D1D1;
		 float: right;
		 font-weight: bold;
		 font-size: 12pt;
		 border: 0px;
		 width: 102px;
		 height: 32px;
		 left: 315px;
		 top: 5px;
	  }
   </style>

   <script type="text/javascript">
	  function changeTab(sender) {
		 var activeTab = sender.parentNode;
		 var isLeftSender = (activeTab.id == "tabLeft");
		 var inactiveTab = (isLeftSender) ? document.getElementById("tabRight") : document.getElementById("tabLeft");
		 activeTab.className = "activeTab";
		 inactiveTab.className = "inactiveTab";
		 document.getElementById("activeLeft").style.display = (isLeftSender) ? "block" : "none";
		 document.getElementById("activeRight").style.display = (isLeftSender) ? "none" : "block";
	  }
   </script>

</head>

<body>
   <form action="#" method="post">
	  <div id="main">
		 <div id="tabLeft" class="activeTab"><a href="#" onclick="changeTab(this);">Гражданское строительство</a></div>
		 <div id="tabRight" class="inactiveTab"><a href="#" onclick="changeTab(this);">Промышленное строительство</a></div>
		 <div id="activeLeft">
			<div class="contLeft">
			   <p>СФЕРА</p>
			   <div>
				  <input type="radio" name="sphere" value="houses" />жилые дома<br />
				  <input type="radio" name="sphere" value="admin" />административные<br />
				  <input type="radio" name="sphere" value="catering" />обществ. питание
			   </div>
			   <br clear="all" />
			   <input type="radio" name="bottomRadio" value="new" />новое<br />
			   <input type="radio" name="bottomRadio" value="reconstruct" />реконструкция
			</div>

			<div class="contRight">
			   <p>РЕЗУЛЬТАТ</p>
			   <div>
				  <input type="radio" name="sphere2" value="workdoc" />рабочая документация<br />
				  <input type="radio" name="sphere2" value="project" />проект<br />
				  <input type="radio" name="sphere2" value="workproj" />рабочий проект
			   </div>
			   <br clear="all" />
			   площадь застройки<br />
			   <input type="text" name="area" class="area" /><big>М<sup>2</sup></big>
			</div>
			<div style="clear: both;"></div>
		 </div>

		 <div id="activeRight">
			<div class="contLeft">
			   <p>SPHERE</p>
			   <div>
				  <input type="radio" name="sphere" value="houses" />houses<br />
				  <input type="radio" name="sphere" value="admin" />administrative<br />
				  <input type="radio" name="sphere" value="catering" />catering
			   </div>
			   <br clear="all" />
			   <input type="radio" name="bottomRadio" value="new" />new<br />
			   <input type="radio" name="bottomRadio" value="reconstruct" />reconstruction
			</div>

			<div class="contRight">
			   <p>RESULT</p>
			   <div>
				  <input type="radio" name="sphere2" value="workdoc" />documentation<br />
				  <input type="radio" name="sphere2" value="project" />project<br />
				  <input type="radio" name="sphere2" value="workproj" />work project
			   </div>
			   <br clear="all" />
			   site area<br />
			   <input type="text" name="area2" class="area" /><big>М<sup>2</sup></big>
			</div>
			<div style="clear: both;"></div>
		 </div>

		 <div id="footer"><input type="button" value="Рассчитать" onclick="return false;" /></div>
	  </div>
   </form>
</body>

</html>

s0rr0w · May 18, 2009

Двойка за неиспользование <label>

:blink:

Styx · May 18, 2009

s0rr0w, спасибо за замечание. Исправлю у себя.

s0rr0w · May 18, 2009

Работа одноразовая. Для применения кода во множестве похожих мест не годится.

Sign In

Для желающих получить опыт вёрстки

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information