Границы jQuery Theme Div и проблемы с сеткой 960

Я внедряю систему сетка 960 на свой уже существующий сайт. Я использую тему jQuery, что означает, что каждому элементу div с содержимым назначается класс ui-widget-content, который, как часть темы, дает границу в 1 пиксель. Мне нравится этот дизайн границы, так как мои разделы контента белые, а фон моего сайта не совсем белый, что придает ему приятный визуальный контраст.

Однако проблема заключается в том, что с этими границами в 1 пиксель я не могу расположить элементы div по горизонтали, поскольку они слишком велики. Например, если я сделаю это:

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

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

.border-fix {
    border-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; }

а затем добавить это в div grid_10, например:

<div class="grid_16 alpha omega">
  <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
    <div class="grid_5 omega">some stuf...</div>
  </div>
  <div class="grid_6 omega">
    more stuf...
  </div>
</div>

Теперь, однако, два моих внутренних элемента div grid_5 сжимаются так, что теперь они располагаются друг над другом, а не рядом, поскольку по горизонтали недостаточно места (поскольку элемент div grid_10 на 2 пикселя уже, чем должен быть с границы внутри, а не снаружи)

Итак, как мне это исправить (или это поправимо)? Мне нравится стиль с рамкой на div, так как она красиво отделяет содержимое от фона. Но с рамкой ширина моего div испорчена. Я предпочитаю не заставлять его дополнительным столбцом, как это предлагается в этом вопросе.

Какие-нибудь магические трюки, которые я мог бы попробовать?

Спасибо


css jquery-ui 960.gs
person Garfonzo    schedule 04.12.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Как правило, вы не должны комбинировать другие классы со стилем с контейнерами, которые используются для сетки, чтобы предотвратить такое поведение. Система сетки должна быть принята как есть, и если вам нужны границы и используются разные отступы или поля, вы должны обернуть содержимое внутри ячейки сетки в другой div и применить стиль к этому элементу, иначе вы сломаете сетку.

Я знаю, что это создает дополнительные элементы div, но это помогает поддерживать согласованное поведение. Если вы используете сетки фиксированного размера (определенные в пикселях вместо %), вы можете вычесть 2 пикселя из ширины и добавить границу в 1 пиксель к каждой ячейке, чтобы выровнять, так что вы получите тот же размер и тот же макет.

person nxtwrld    schedule 04.12.2012
comment
Спасибо за комментарий, не дающий стиль контейнера div. Я все еще новичок в системе сетки и не думал, что стилизация контейнера будет плохой практикой. Я изменю это и посмотрю, что получится. - person Garfonzo; 04.12.2012

arrow_upward
0
arrow_downward

Почему бы вам просто не переопределить стиль grid_10, сделав его на 2 пикселя меньше, чем раньше? (было ли это 580? 580-2=578)

<style>
.grid_10 {width:578px}
</style>

<div class="grid_10 alpha ui-widget-content">

Или, если вы не можете переопределить его для всего сайта, просто зайдите и посмотрите, какие стили применены к grid_10, клонируйте их в новый стиль my_smaller_grid_10_with_borders

Хотя я это, я все еще семантически задаюсь вопросом, в чем разница между чем-то вроде этого:

<div class="grid_16 alpha omega">
    <div class="grid_10 alpha ui-widget-content border-fix">
    <div class="grid_5 alpha">some stuf...</div>
...

и что-то вроде этого:

<table><tr><td>some stuf...</td>...

Я говорю о том, что система 960grid отстой настолько же, насколько отстойны таблицы. Разве мы не должны писать семантически правильные читаемые документы?

(хорошо, просто отступление, надеюсь, решение сработает)

person FrancescoMM    schedule 04.12.2012
comment
Танки за комментарий. Я не решаюсь возиться с определениями пикселей системы сетки только для того, чтобы иметь дело с границами. Вместо этого я сделаю так, как предлагает nxtwrld, и не буду стилизовать контейнеры div. Интересно, что вы считаете сетку отстойной - каждому свое. Мой первоначальный дизайн на самом деле включал только таблицы, без элементов div. Я обнаружил, что макет выходит из-под контроля и его слишком сложно реализовать с помощью таблиц, поэтому мне пришлось перейти к разделам для правильного макета. Но это только я :) - person Garfonzo; 04.12.2012
comment
@Garfonzo ха-ха, без сомнения, таблицы отстой :), я только говорил, что писать class="grid_10" не намного лучше, чем писать width="580" в HTML. В идеале (в идеальном мире, где браузеры просто работают) было бы писать HTML без информации о положении и размерах и обрабатывать их в CSS. - person FrancescoMM; 04.12.2012
comment
А, я понимаю, что вы имеете в виду. Я согласен с вами, система сетки не слишком отличается от простого выполнения width=580. Тем не менее, это все другие причудливые вещи, которые облегчают жизнь с сеткой. Я обнаружил, что создание моей собственной структуры CSS с предопределенной шириной работает не слишком гладко. Для меня эта система сетки 960 сделала выравнивание и организацию моих страниц довольно простым и последовательным. - person Garfonzo; 04.12.2012

arrow_upward
0
arrow_downward

Я придумал решение, которое, как я считаю, работает, которое не нарушает систему сетки, мне не нужно редактировать какие-либо размеры div для учета границы, а также мне не нужно добавлять какие-либо странные поля или отступы в 1 пиксель. Возможно, это немного хакерски, но все, что я сделал, это создал новый класс, подобный этому:

.border-fix {
    border: 0px;
    box-shadow: 0px 0px 3px grey;
}

и добавил этот класс в любой div, который я хотел иметь границы. Это переопределит класс ui-widget-conent, чтобы удалить границу и добавить тень к блоку. Дизайн тени, который у меня есть, говорит о смещении по горизонтали на 0 пикселей, смещении по вертикали на 0 пикселей и размытии тени на 3 пикселя. С серым цветом это выглядит почти так же, как обычная граница, не влияя на ширину моего div.

Опять же, я думаю, что это может быть немного хакерский способ делать что-то, но он кажется хитроумным, если я сам так не говорю: P

person Garfonzo    schedule 04.12.2012