Как расположить блоки горизонтально css

Идеальные горизонтальные блоки в HTML & CSS

Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS.

Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100% адаптацией и кроссбраузерностью. В просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код.

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

Наша цель сделать 3-х колоночный сайт, блоки которого будут:

Уменьшаться в зависимости от размера экрана (т.е. не будут уходить вниз);
Растягиваться по всей ширине экрана (обычно это 2-х колоночный сайт);
Адаптироваться при уменьшении заданных размеров.

 left
 content
 right

Далее будет логично написать стили для этих классов, что мы и сделаем:

 html, body .main < margin:0 auto; /* Центрируем блоки */ width:100%; /* Задаем ширину 100%, чтобы сделать ее резиновой */ max-width:700px; /* Устанавливаем максимальную ширину */ >.inline div < display:inline-block; /* Делаем блоки по горизонтали */ display: -moz-inline-stack; /* Для FireFox 2, тот же самый, что и inline-block */ vertical-align:top; /* Выравниваем их сверху */ font-size:16px; /* Ставим дочкам размер шрифта, иначе примет значение родителя */ /* Для IE 6 и IE 7 чтобы блоки были по горизонтали*/ zoom: 1; *display: inline; >div.inline /* Ставим родителю значение 0, чтобы убрать отступы у блоков*/ .left-block < background:red; width:20%; /*Задаем ширину в процентах чтобы сделать ее резиновой*/ height:300px; /* Высота блока */ >.content < background:green; width:60%; height:300px; >.right-block

Размер окна браузера больше 900px

Размер окна браузера меньше 900px

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

Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px в классе main .

Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался добавляем в стили @media запрос:

/* Простой пример @media запроса*/ @media (max-width:600px) < .inline div< display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */ width:100%; /* Задаем на всю ширину экрана */ height:100px; >>

Как вывести несколько блоков горизонтально?

Имеем: регион футер, 2 (или более) блока, например Форма поиска и Кто на сайте.
Задача: разместить эти блоки в регионе, но так, чтобы они шли не по вертикали, а по горизонтали.
Вопрос: собственно — как это реализовать через css класс региона?
ЗЫ: заранее спасибо )))

Вложение	Размер
footer.png	26.43 КБ

Drupal6

Блог
Войдите или зарегистрируйтесь, чтобы отправлять комментарии

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

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Я понял.))
В теме добавить/править:

#regin_tot_samy .block <
position : relative ;
float : left ;
>

А так?
Но это плохой пример)) Лучше видел на хабре, как темизовать каждый регион)) очень понравилось темизация.

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Попробовал.. не получается. видимо руки совсем не оттуда растут ((

#region-content-bottom .block <
position : relative ;
float : left ;
>

Что-то мне подсказывает, что проблема в том, что в РНР у меня нет id и класс называется через пробел.

ЗЫ: это не стопроцентно моя тема — делаю надтему, хотелось бы с минимальным дописыванием сделать.

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

«Vydrin_AP» wrote:

Что-то мне подсказывает, что проблема в том, что в РНР у меня нет id и класс называется через пробел.

Читать:

Как убрать пароль с документа ворд

Так узнайте точно, есть ли у вас нужные классы

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

.region-content-bottom .block <
position : relative ;
float : left ;
>

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Спасибо всем большое! С этим разобрался, но почему-то мой футер не видит дивов, которые в него включены.
Ладно. буду копать. еще раз СПАСИБО ))

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Если я правильно понял — он не меняет высоту футера, тогда задай высоту сам или http://habrahabr.ru/blogs/css/48391/

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Когда я задаю высоту, тогда все нормально, но я же не могу знать заранее высоту тех блоков, которые будут помещены в футер. В общем не по силам оказалась задача для меня. бросаю. Спасибо за помощь и потраченное время!

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Мда дал же ссылку. Плохо гуглишь))
На держи!
Добавить в css:

.clearfix : after <
clear : both ;
content : ‘ ‘ ;
display : block ;
font-size : 0 ;
line-height : 0 ;
visibility : hidden ;
width : 0 ;
height : 0 ;
>

.clearfix <
display : inline-block ;
>

* html .clearfix <
height : 1% ;
>

.clearfix <
display : block ;
>

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Огромнейшее спасибо. Честно.. не понял как, но это работает )) Все хорошо, за исключением одной мелочи..
Блоки , которые попадают в футер должны получать какую-то ширину, сейчас они прижимаются к левому краю и занимают процентов 70-80 ширины футера, а хотелось бы распределить их равномерно. Делаю так:

.region-content-bottom .block <
position : relative ;
float : left ;
clear : none ;
width : auto ;
>

Но не получается (((
В общем сижу разбираюсь. А код, который Вы прислали просто СУПЕР! Я вообще-то программер со стажем, но пока в css не профи, потому для меня это по большей части МАГИЯ )))

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

.region-content-bottom .block <
position : relative ;
float : left ;
width : 100% ; /*для li помогало — но не уверен*/
>

Или юзай таблицы со 100% шириной, но тогда модуль http://drupal.org/project/blocktheme придётся юзать. чтобы сделать блок в виде столбцов))

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

100% ширина не подошла.
В общем решил сделать так:

.region-content-bottom .block <
position : relative ;
float : left ;
clear : none ;
margin-left : 2% ;
margin-right : 2%
>

Не совсем красиво, но это хоть как-то.

ЗЫ: оказалось, что в теме, которую я взял за основу уже был класс clearfix )) и я просто использовал его )))
За код ОГРОМНОЕ спасибо. Пусть даже и не получилось так, как хотелось на 100%, но зато приобретен новый опыт, а он бесценен!

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Чтобы не было траблов с высотой и соответственно с работой margin если у вас задан float:left, следует использовать display: inline-block; Но тут проблема с кроссбаузерностью

Нужно хитрить, вот хороший способ

display : -moz-inline-stack ;
display : inline-block ;
zoom : 1 ;
* display : inline ;
_overflow : hidden ;
width : 200px ; /* ваша ширина */
height : 200px ; /* ваша высота */
background : #fff ;
margin : 1px ;

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Это же гениально.
Работает отлично, только я тут немного «похитрил» )) некоторые строки закомментил, и при этом все работает. Вот код:

/*display:-moz-inline-stack;*/
display : inline-block ;
/*zoom:1;
display:inline;*/
overflow : hidden ;
width : 200px ; /* ваша ширина */
height : 200px ; /* ваша высота */
background : #fff ;
margin : 1px ;

Может в будущем мне это аукнится? Просто сейчас работает отлично в FF и IE. Может расскажите о сакральном смысле строк, которые я исключил? )))

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Я там вроде писал выше про кроссбраузерность.

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Так в том-то и дело, что я их закоментил и у меня все работает в разных браузерах. может они мне и не нужны вовсе? ))

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

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

«kratkar» wrote:

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

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

Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Реакции

Идеальные горизонтальные блоки в HTML & CSS

Как вывести несколько блоков горизонтально?

Комментарии

Похожие записи