проблемы рендеринга в (бесшовном) элементе из 3 столбцов - PullRequest
Новая
       34

проблемы рендеринга в (бесшовном) элементе из 3 столбцов

3 голосов
/ 05 июня 2011

Эта проблема беспокоит меня уже некоторое время, я не нашел решения и попробовал несколько подходов. Я стараюсь, чтобы моя разметка была семантической, насколько это возможно. Я искал похожие вопросы, но у меня возникли проблемы с абстрагированием моей проблемы, чтобы найти подходящее решение.

Я чувствую, что обо мне нужно, чтобы объяснить мой подход к проектированию. Для начала я не дизайнер. У меня нет формального обучения, но мне удалось найти себя программистом. Я занимался веб-работой с 11 лет (1997) и находился под сильным влиянием движения веб-стандартов в средней школе (2000-2004). И до тех пор, пока несколько месяцев назад, не думал о веб-работе с тех пор. Компания, в которой я работаю, заплатила дизайнеру за разработку дизайна в фотошопе и собиралась заплатить другому человеку за работу CSS. Это смутило меня до бесконечности, и я решил сделать шаг вперед и сделать снимок на работе, и пока все хорошо.

Однако я упустил ноющую проблему. у нас есть форма поиска, которая была разработана как поле из 3 столбцов. Из-за характера моей работы мне пришлось немного абстрагироваться. окно отображается правильно в webkit, но центральный столбец не будет правильно позиционироваться в Firefox, Opera и, особенно, IE (не изображен). В старых версиях этих браузеров выглядит хуже. Это может быть хорошее время, чтобы проверить живой пример: http://jsfiddle.net/KdFT7/

Cross Browser Differences

Я должен кратко объяснить некоторые из разметки. Когда вы нажимаете кнопку «добавить X», появляется модальное окно с вариантами выбора элементов X, это добавляется к элементу div с классом XChoice, а сумма, выбранная с помощью, добавляется к абзацу (

) с классом. X Выбрано ниже. В идеале было бы неплохо, чтобы окно начиналось с малого и увеличивалось по мере добавления элементов, но это вызывает у меня проблемы с тем, как обновить центральный столбец и поле для AddY. В целом, я недоволен дизайном, но моя работа - писать код, а не критиковать его.

Мне нужен свежий набор глаз. Как мне пометить это и применить правильные стили, которые позволяют 3 колонкам сидеть в одном месте в большинстве браузеров. Я понимаю, что многое могу переварить, но я очень ценю любой удар по проблеме. Разметка может измениться, CSS может быть переоборудован, но, к сожалению, дизайн должен быть таким же.

HTML 

<div class="rightCol">

    <div class="addX">
        <h2><span class="tiny">Add</span>X</h2>
        <span class="ui-corner-tl ui-widget-header ui-widget-borderfix"></span>
        <div class="innerContent ui-padding-med ui-widget-content">
            <form>
                <input type="radio" id="radio-0" name="radio" checked="checked" /><label for="radio-0" class="ui-spacer-med">And</label>
                <input type="radio" id="radio-1" name="radio" /><label for="radio-1" class="ui-spacer-med">Or</label><br />
            </form>
            <p class="descrip ui-spacer-med"> Click the button to lookup and select X for your search </p>
            <div class="XChoice"></div>
            <p class="xSelected"></p>
            <!-- brings up modal form -->
            <a href="addX.htm" class="addXButton">Add X</a>        </div>
        <span class="ui-corner-bl ui-widget-header ui-widget-borderfix"></span>
    </div>

    <div class="centerCol">
        <span class="ui-widget-header ui-widget-borderfix"></span>            
        <form class="clause ui-widget-content ui-padding-med">
            <input type="radio" id="radio-2" name="radio" checked="checked" /><label for="radio-2">And</label><br />
            <input type="radio" id="radio-3" name="radio" /><label for="radio-3">Or</label><br />
            <input type="radio" id="radio-4" name="radio" /><label for="radio-4">Not</label><br />
        </form>
        <span class="ui-widget-header ui-widget-borderfix"></span>
    </div>

    <div class="addY">
        <h2><span class="tiny">Add</span>Y</h2>
        <span class="ui-corner-tr ui-widget-header ui-widget-borderfix"></span>
        <div class="innerContent ui-padding-med ui-widget-content">
            <form>
                <input type="radio" id="radio-5" name="radio" checked="checked" /><label for="radio-5" class="ui-spacer-med">And</label>
                <input type="radio" id="radio-6" name="radio" /><label for="radio-6" class="ui-spacer-med">Or</label><br />
                <input type="input" value="Enter Y(s)" /><br />
            </form>
            <a href="#" id="example">example</a>
            <ol>
                <li> We should find an example to put here?</li>
                <li> Examples? </li>
                <li> Yes, perhaps 3 solid examples </li>
            </ol>
        </div>
        <span class="ui-corner-br ui-widget-header ui-widget-borderfix"></span>
    </div>
    <div class="addSubGroup ui-corner-all ui-widget-content">
        <a class="rg ui-icon ui-icon-circle-minus" title="Remove Sub Group">Remove Sub Group</a> <a class="ag ui-icon ui-icon-circle-plus" title="Add Sub Group">Add Sub Group</a>
    </div>
    <span class="sub-clause">
        <form class="ui-corner-all  ui-widget-content">
            <input type="radio" id="radio-7" name="radio" checked="checked" class="ui-spacer-med" /><label for="radio-7">And</label>
            <input type="radio" id="radio-8" name="radio" class="ui-spacer-med" /><label for="radio-8">Or</label>
            <input type="radio" id="radio-9" name="radio" class="ui-spacer-med" /><label for="radio-9">Not</label>
        </form>
    </span>
</div>

CSS 

* { margin: 0; padding: 0; zoom: 0; }
body, html {font: .9em/1.1em HelveticaNeue, Helvetica, Arial, sans-serif;}


.addY,
.addX{ float: left; max-width: 370px; min-width: 218px; width: 43%; }
.addSubGroup { float: left; margin: -1em 0 0 80%;   padding: .25em .5em;    width: 2.5em; }
.ag, 
.rg { float: left;}

.centerCol { float: left; margin-top: 3.05em; max-width: 66px; min-width: 46px; }
.clause { border-left: 1px solid #fff; border-right: 1px solid #fff;    height: 210px;  margin: 0 auto; }

#example { margin-left: 1em; }
#example+ol { display: none; line-height: 1.5em; margin-left: 2.5em; }
.rightCol { float: right; height: 350px; margin: -1em 1% 2%; width: 73%; }
.sub-clause { display: none; float: left; margin: 2% 0 1% 5%;   text-align: center; width: 80%; }
.ui-widget-borderfix { display: inherit; height: 1.25em; }
h2 { color: #222; font: 2.2em/1em Georgia, serif; }
.rightCol h2 { margin: .5em 0 -.25em .45em; }
.innerContent { height: 210px; }
.ui-widget-content { background: #eee; color: #000000; }
.ui-widget { font-family: Arial,sans-serif; font-size: .8em; }
.ui-padding-med { padding: .5em; }
.tiny { font-size: .65em }

снова живой пример можно найти здесь: http://jsfiddle.net/KdFT7/

PS.

Бонус, этот вопрос относится к другому, который я спросил, на который не было получено четких ответов: Клонировать и обновить атрибуты

1 Ответ

2 голосов
/ 06 июня 2011

Я проверял это только в Chrome, Firefox и IE8, но, похоже, это помогло.

Резюме: Я удалил h2 из потока, разместив их абсолютно, затем удалил вызванные ими различия в высоте ... для этого:

сделать addX, addY {position: relative;}, чтобы позиционированные h2 оставались относительно них

добавляет равное верхнее поле к addX, addY и centerCol (достаточно, чтобы поднять заголовки), и все это очищает все, что нужно

добавьте position: absolute к h2 и удалите из них все поля и отступы, затем присвойте им отрицательное верхнее значение, чтобы выскочить на верх ваших ящиков.

побочный эффект: .ui-widget-content также необходимо добавить position: relative; к нему, чтобы вернуть на вершину позиционированный addX и addY divs

Рабочий пример

...