14.09.2009

Блочная верстка (div-верстка) видеоурок #10

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

В этом уроке сверстаем вертикальное меню изменяющийся высоты. Я покажу как пользоваться CSS-свойством z-index и различные другие хитрости.

Долой слова, переходите к просмотру.

Видео на RuTube

Первая часть видео на YouTube

Вторая часть видео на YouTube

Третья часть видео на YouTube

И, наконец, последняя четвертая часть видео на YouTube

Из-за дурацких алгоритмов сжатия видео на сервисах YouTube и RuTube серьезно страдает его качество. Поэтому, если вам плохо видно происходящее, не поленитесь, скачайте видео в лучшем качестве с DepositFiles (*.wmv 61.4 МБайт).

У меня есть еще много уникальной информации по блочной верстке сайта. Поэтому, чтобы не пропустить следующие части видеокурса, подписывайтесь на RSS или получайте обновления блога на эл. почту.

С уважением, Андрей Морковин.

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

Метки: Верстка видеокурс

Верстка

Отзывов: 13 на «Блочная верстка (div-верстка) видеоурок #10»

Автор: Валерий, 15.09.2009 в 14:44

))) Спасибо за объяснение как делать резиновый блок.
У меня тут проблема немного побольше с резиновым блоком, просто тут рамка сделана вокруг блока навороченная, и как эту штуку верстать даже ума не приложу, может надо как то эти блоки связывать? Если да то помогите маленьким намечечком.

Ответить
- Автор: Андрей Морковин, 15.09.2009 в 16:01
  
  Я не вижу тот блок, о котором вы говорите, поэтому не знаю в чем заключается навороченность рамки.
  
  Если в раме встречается периодическая структура, то просто вырезаете вертикальный кусок высотой в один период (в результате может быть нестыковка с нижней частью рамки, но это фиг его знает, что у вас там за рамка); если навороченность – это градиент (вертикальные бока рамки имеют градиент в горизонтальном направлении), то вырезаете кусочек градиента (1пксл высотой и длинной, соответственно, в градиент), а потом ставите в качестве фона в блок с повторяемостью по оси Y.
  
  Ответить
  - Автор: Валерий, 15.09.2009 в 16:07
    
    Спасибо!
    Щяс попробую реализовать свой блок, такое на таблицах делаю легко а вот див в первый раз.
    
    На счет z-index реально полезная штука!
    
    Ответить
Автор: mall, 15.09.2009 в 15:50

про z-index очень интересно было узнать, большое спасибо =)

Ответить
- Автор: Андрей Морковин, 15.09.2009 в 16:03
  
  Да, z-index часто используем при верстке сложных страниц, нужная вещь.
  
  Ответить
Автор: Валерий, 15.09.2009 в 16:34

Верстальщики, помогите пожалуйсто, вот я создал div блок с длиной и шириной 100px,
вот когда я добовляю туда текст он выходит за пределы моего блока, как мне этого избежать?
Наверное есть какоето значение в Css, я просто новичек в див, помогите с проблемой

Ответить
- Автор: Андрей Морковин, 15.09.2009 в 16:45
  
  Вы создали блок фиксированной ширины и высоты, засунули в него текст шириной и высотой больше чем родительский блок. Естественно, он будет торчать (или обрезаться).
  
  Ответить
  - Автор: Валерий, 15.09.2009 в 16:57
    
    Получается не как нельзя сделать чтоб текст автоматом переходил на другую строчку?
    вот пример как выходит текст
    
    Документ без названия
    
    sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
    
    Ответить
    - Автор: Андрей Морковин, 15.09.2009 в 17:01
      
      Можно сделать, чтобы возникали полосы прокрутки.
      
      Ответить
Автор: Валерий, 15.09.2009 в 17:03

(((
Ну ладно, большое спасибо за помощь.

Ответить
Автор: Never Lex, 14.12.2009 в 16:37

Хм. Никогда не пользовался свойствами top, left и т.д. для блоков с позишн relative. Повод призадуматься.

А зачем див с классом title-vert-menu делать. Не лучше ли прописать там заголовок (например h3)? А для самих пунктов меню и подавно див не нужен. И код легче и читать проще. Вообще нужно стараться поменьше дивов использовать имхо.

В принципе, интересно наблюдать за реал-тайм вёрсткой. Куча банальных ошибок и багов головы. И так наверно у многих (у меня во всяком случае тоже часто проскакивает). Как от них избавиться неизвестно Подозреваю, что практика и ещё раз практика.

Ответить