Правильный способ оформления этой страницы без использования таблиц - PullRequest
Новая
       7

Правильный способ оформления этой страницы без использования таблиц

1 голос
/ 21 июня 2011

Вот что у меня есть.Я играл с тегами DIV, но до сих пор не могу понять, как их использовать для оформления этой страницы?

enter image description here

Одна из проблем, с которыми я сталкиваюсь, заключается в том, что я не могу правильно выровнять «псевдоним»"пометить его TextBox, который находится под ним ... и также поместить эти элементы управления в одну строку - например, Reference Sequence и Ancestry - это еще одна проблема, которую я пока не могу решить.

Ответы [ 3 ]

1 голос
/ 21 июня 2011

Переместите два верхних делителя (синий и зеленый), установите ширину для каждого из них и добавьте поле справа-справа к синему (или поле слева-слева от зеленого), чтобы получить желаемое красное пространство.Затем очистите нижний div, чтобы он перешел на следующую строку.

Что касается проблемы с меткой "Alias" и выравниванием, я бы предложил использовать неупорядоченный список с list-style:none.Каждый ярлык будет иметь свой собственный li, как и каждый вход.Это должно автоматически выровнять их по левому краю, как в случае с текущей формой.Плюс к этому преимущество заключается в том, что не нужно жестко устанавливать ширину (если это то, что можно назвать проблемой в данном случае).

пример разметки 

<li><label>Alias</label></li>
<li><input type='text'></li>
1 голос
/ 21 июня 2011

Попробуй это.Вполне вероятно, что это будет работать.Возможно, вам придется настроить несколько значений стиля для своих нужд. 

<div style="clear:both">
  <div id="topLeft" style="float:left;width:400px;padding:7px">

     <div style="clear:both;margin:5px 0">
       Gene Symbol
     </div>
     <div style="clear:both;margin:5px 0">
        //drop 'Gene Symbol Search Box' here
     </div>


     //repeat Gene Symbol like divs for other elements

  </div>

  <div id="topSeparator" style="float:left;width:10px">
    &nbsp;
  </div>

  <div id="topRight" style="float:left;width:400px;padding:7px">
     <div style="clear:both;margin:5px 0">
       Alias
     </div>
     <div style="clear:both;margin:5px 0">
        //drop 'Alias Box' here
     </div>


     //repeat Alias like divs for other elements

  </div>
</div>
<div style="clear:both;margin:10px 0 0 0;padding:7px">
  <div style="clear:both;margin:5px 0">
    //drop checkbox here
  </div>
  <div style="clear:both;margin:5px 0">
    //drop buttons here
  </div>
</div>
1 голос
/ 21 июня 2011

Таблицы не должны рассматриваться, если это действительно табличные данные. Я бы порекомендовал синим и зеленым пространствам быть div элементы с заданной шириной, плавающие влево. Серый цвет div должен быть очищен. Зеленая и синяя части кажутся разделенными для удобства макета и не связаны между собой, поэтому я бы не рекомендовал fieldset над div элементами.

Если вы задаете ширину элементов label и input / select и используете display: block, отображение метки не должно быть проблематичным. Ссылка и флажок «Не найдено», по-видимому, являются единственными уникальными частями формы.

...