Хочу услышать мнение грамотных людей по поводу верстки одного из тестовых макетов.
Общие требования в верстке
1. Корректное отображение в браузерах: Internet Explorer 6 и выше, Firefox 3.5.* и выше, Google Chrome, Safari 5 и выше
2. Минимальное количество элементов в html разметке, минимальное количество стилей CSS, минимальное количество изображений для оформления (если вы используете изображения при реализации задачи), минимальное кол-во JavaScript'а (если вы используете JavaScript для реализации задачи, использование при этом JavaScript framework'ов /prototype, jQuery, и т.д./ приветствуется), использование тегов таблиц не желательно
Комментарии к макету для тестового задания
1. Фон заголовка (черный фон, белый текст) тянется в зависимости от ширины текста, если в одну строку не умещается - растягивается на всю ширину блока (как на блоке сверху справа)
2. Большой блок по высоте должен быть всегда равен высоте маленьких блоков справа, тянется светло-серая часть (где ссылка «ответить»).
3. Если высота маленьких блоков справа меньше высоты большого блока - тянется светло-серая подложка у маленьких блоков.
4. Блоки «Еще прокомментировали» тянутся только относительно своего наполнения (внутренние отступы всегда как на картинке)
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
IIAIIIA
Добрый день!
Хочу услышать мнение грамотных людей по поводу верстки одного из тестовых макетов.
Общие требования в верстке
1. Корректное отображение в браузерах: Internet Explorer 6 и выше, Firefox 3.5.* и выше, Google Chrome, Safari 5 и выше
2. Минимальное количество элементов в html разметке, минимальное количество стилей CSS, минимальное количество изображений для оформления (если вы используете изображения при реализации задачи), минимальное кол-во JavaScript'а (если вы используете JavaScript для реализации задачи, использование при этом JavaScript framework'ов /prototype, jQuery, и т.д./ приветствуется), использование тегов таблиц не желательно
Комментарии к макету для тестового задания
1. Фон заголовка (черный фон, белый текст) тянется в зависимости от ширины текста, если в одну строку не умещается - растягивается на всю ширину блока (как на блоке сверху справа)
2. Большой блок по высоте должен быть всегда равен высоте маленьких блоков справа, тянется светло-серая часть (где ссылка «ответить»).
3. Если высота маленьких блоков справа меньше высоты большого блока - тянется светло-серая подложка у маленьких блоков.
4. Блоки «Еще прокомментировали» тянутся только относительно своего наполнения (внутренние отступы всегда как на картинке)
Пример решения
Вот то, что я наваял - http://chebbasket.ru/test/test.html
Сам понимаю, что далеко от идеала - помогите, пожалуйста, разобраться, что можно было бы сделать лучше.
И особенно хочу обратить ваше внимание на комментарии №№2, 3. Как это можно было реализовать средствами html+css? я не понимаю...
ах да, забыл сказать, что этот макет не прокатил при собеседовании и меня не взяли на работу
цель этого сообщения - поднять свой уровень и уровень других начинающих верстальщиков благодаря толковым людям
Edited by IIAIIIALink to comment
Share on other sites
24 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.