h2 Перетяжка и Div позиционирования

Question

Может кто-нибудь взглянуть на следующей ссылке произведения в тестовой странице прогресса для моего нового сайта - http://goo.gl/YwGiB

Я новичок в CSS, и я наткнулся на некоторые вопросы, которые я не может понять без какой-либо экспертной помощи. Может ли кто-нибудь ответить мне на три вопроса и, возможно, объяснить, как их изменить?

1) Почему мой средний столбец по умолчанию разбит на разделы, тогда как мой правый столбец почти одинаковый, но не имеет разделов? Что я могу сделать, чтобы вызвать это значение по умолчанию в столбце справа?

2) Я ищу, чтобы в столбце справа стоял столбец с первым полем под заголовком «новости» в центральном столбце, а затем второй параллельный под ним (с полем под заголовком «блог», но он будет иметь неправильную длину.Каким будет лучший способ сделать это? Будет ли это иметь место для использования стандартных команд позиционирования для их замены на месте или есть лучший способ?

3) Я лишил отступы и поля из моих тегов h1-h3 (в частности, тег h2), но все же кажется, что над надписью находится пробел. Он более выражен при использовании шрифта MerceariaAntique, который станет окончательным шрифтом, но, к сожалению, я не могу изменить свой html-файл, чтобы показать это прямо сейчас. Я пытаюсь разрешить это, отрегулировав высоту линии, но я не получаю ничего согласованного. Есть ли что-то еще, что я могу сделать, кроме того, что вы делаете корректировки строк и полей?

Заранее спасибо

Answer 1

Во-первых, в вашей разметке вы разделили свои разделы, используя элемент <div>, что вполне приемлемо, однако вы использовали один и тот же идентификатор для идентификации каждого из них. Для этого нужны классы. Идентификаторы должны быть уникальными и использоваться только один раз на странице, классы могут использоваться для применения одних и тех же стилей к нескольким элементам.

Так что:

<div id="newsitem"> 

должен быть таким:

<div class="newsitem"> 

Ответы на актуальные вопросы сейчас!

1. По умолчанию в параграфе и заголовках установлены прокладки и поля. Причина, по которой ваши разделы имеют пробелы, не совпадает с маркой тега абзаца. Удаление этого объекта удаляет пространство, но также приносит текст вместе со следующим заголовком. Вы можете это сделать, указав поле <p> тегов 0 и давая им отступы или вместо этого добавляя дополнение к контейнеру секции.

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

   Из вашего описания, то вы должны иметь следующую структуру:

   средний столбец | правая колонка
   средняя колонка | правый столбец
   среднего столбца

   Чтобы сохранить цвет фона центральной колонки, можно применить свойство цвета фона в классе .centre или быть более конкретной .column.centre (этот тип селектора CSS не может работа в IE6, хотя).

3. Проблема с H2 снижается до высоты линии, каждый шрифт может иметь разную высоту линии, поэтому вам придется играть со значением, пока не получите его правильно. Если вы обнаружите, что получаете верхнюю позицию вправо, но текст под ним приближается или перекрывается, дайте Н2 значение нижнего предела.

Answer 2

Я вижу, вы используете h2 и h3, но я не могу найти h1, что вы упомянули. Я бы удалил параметр «line-height» из вашего css, чтобы предотвратить неправильный/неправильный интервал.

Чтобы выполнить параллельную параллель div, необходимо иметь одинаковые дополнения и поля на обоих div (слева и справа). Для этого просто создайте класс «floatingColumn», который будет плавать влево, и добавьте его в оба div со всеми полями и paddings.