Блог. Я люблю CSS!

Блог о верстке сайтов. Для начинающих верстальщиков и верстальщиков-виртуозов. Только HTML и CSS, ничего лишнего.
Вы любите блочную верстку - тогда этот блог для вас!

Верстальщик-виртуоз. Задание 4 →

Когда я думал над новым заданием для конкурса, очень хотелось, чтобы его можно было применить на практике. Надеюсь, когда конкурс закончится и определится победитель, решение будет полезным для многих. Итак, поехали.
Необходимо придумать решение для фиксирования блока на странице, как показано на видео.

Верстальщик-виртуоз. Задание 3 →

Сверстать страницу по картинке. При верстке необходимо соблюдать условия:

  1. верстка должна в точности соответствовать рисунку (пиксельная точность)
  2. верстка резиновая. Левая колонка фиксированной ширины, правая — тянется
  3. минимальная ширина страницы 600px
  4. футер прижат к низу страницы
  5. колонки растягиваются на всю высоту экрана
  6. кроссбраузерность Internet Explorer 5.5 +, Mozilla Firefox 2.0 +, Opera 8.5 +, Google Chrome, Safari 3.0 +
  7. валидный HTML и CSS
  8. чистый HTML и CSS, без javascript, expression и др.

Верстальщик-виртуоз. Задание 2 →

Сверстать список товаров с описанием к ним. Если описание не вмещается в одну строку, оно должно обрезаться многоточием. При наведении на картинку и/или на текст, описание должно показываться полностью. Товар и текст с его описанием являются ссылкой.

Верстальщик-виртуоз. Задание 1 →

Сверстать список товаров каталога по картинке, используя следующий код html:

<ul>
    <li><mg src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
    <li><img src="img.gif" alt="" /></li>
</ul>

Блочная верстка CSS →

В прошлом месяце проводился конкурс на лучший дизайн для блочной верстки сайта. Прислано 28 макетов, из которых я выбрал один наиболее интересный, подходящий под мои требования. На примере этого макета, довольно простого, но «приятного на ощупь», мы разберем основы правильной css верстки сайта.

Увеличить

Подпишитесь!

Внимание! АКЦИЯ!

Вступите в группу Вконтакте и получите бесплатную консультацию по верстке. Расскажите друзьям про группу и получите 5% скидку на услуги Webmolot.com