Возможно ли в данном случае подвинуть фон кнопки, осуществленный через first-child?

Question

[burninglikefire]

1. Задача сделать, чтобы это выглядело так:
.

Код документа в лайв-версии здесь.

Фон кнопки реализован через first-child, который принимает позицию самого текста. Сделать фон чуть выше у меня не получается. Как поднять фон выше текста без самого передвижения текста?
Придется переписывать конструкцию?

2. Как правильно сверстать страницу, чтобы кнопки при растягивании окон страницы располагались вдоль правой границы обертки (wrapper), как изображено здесь (красными линиями изображен враппер, на скриншоте футера нет, на странице есть).

Сейчас конструкция выглядит таким образом:
Хэдер с вложенным списком (), в котором состоят элементы ссылок (<а>);
Вторая серая линия в виде отдельного элемента;
Враппер и в него вложен главный блок.

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

Спасибо.

Comments

[Вячеслав]

дайте ссилку на сайт

Answer 1

[dmit8815]

1. как вариант:
padding-top: 10px;
margin-top: -10px;

2. не вижу у вас в верстке вообще какого либо wrapperа, вложите его в header задайте нужную ширину и пропишите margin: 0 auto

3. ul предполагает наличие li внутри

4. конструкция вида header > ul > a:first-child избыточна, используйте header ul a:first-child

5. к тому же не очень понятно как вы хотите реализовать меню с помощью first-child, а если будет выбран второй пункт?

6. советую для начала ознакомиться с азами вот тут htmlbook.ru/samhtml htmlbook.ru/samcss

Comments

[burninglikefire]

2. Для хэдера создал враппер уже.

3. Спасибо, с этим были проблемы.

4. Странно, когда переписывал так не писал. Невнимателен. Спасибо.

5. Пункты не выбираются, просто пункт для входа будет выделен таким образом.

6. Спасибо.

Answer 2

[burninglikefire]

Для создания прибитого к полу футера нужно в html и body указать height: 100%, поэтому не удастся нарисовать горизонтальную полосу так, как указано в варианте работы Evansive.

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

Comments

[burninglikefire]

Сейчас попробую создать отдельный класс и вставить его в header и центрировать через margin: 0px auto.