Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Моя группа

Каким движком Вы предпочитаете пользоваться?

Пример создания Интернет-магазина на OpenCart 2.0

Получите это бесплатное видео, в котором с нуля создаётся Интернет-магазин на OpenCart 2.0.

Чтобы получить Видеокурс,
заполните форму

Другие курсы

Этапы создания и продвижения лендинга

После семинара:

- Вы увидите мои лендинги и их результаты.

- Вы узнаете, какие этапы создания и продвижения у лендингов.

- Вы получите 2 различных пошаговых бизнес-плана, основанных на создании лендингов.

- Вы узнаете, как автоматизировать продвижение: создали лендинг, настроили продвижение, и годами он работает уже без Вас.

Записаться

Другие курсы

Делай то, что в жизни тебе даётся легко, и делай это изо всех сил.

Неизвестный

Форум сайта MyRusakov.ru

Новая тема Ответить

15.07.2013 19:47:33 Резиновая верстка Сообщение #1

Дмитрий184

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Здравствуйте! Обычно резиновую верстку делают так - создают три колонки, левой и правой колонкам задают какую-то ширину (px или %), центральной колонке ширину не задают. Таким образом, при изменении размеров окна браузера, размер веб-страницы изменяется из-за того, что изменяется ширина центральной колонки. При этом во все три колонки можно поместить текст (или другую информацию).

Возник вопрос. Как сделать так, чтобы фиксированного размера была центральная колонка (например, width="900px"

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

Профиль Ответить

15.07.2013 20:58:17 Резиновая верстка Сообщение #2

Admin

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Попробуйте левой и правой задать width=50%, а центральной width=900px.

Профиль Ответить

15.07.2013 23:59:51 Резиновая верстка Сообщение #3

Дмитрий184

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Я так пробовал, но не помогает.

<head>
<style type="text/css">
#left,#center,#right {
height: 100px;
}
#left {
float: left;
width: 50%;
background: #ff0;
}
#right {
float: right;
width: 50%;
background: #ff0;
}
#center {
width: 900px;
}
</style>
</head>
<body>
<div id="left">1
</div>
<div id="right">3
</div>
<div id="center">2
</div>
</body>

Профиль Ответить

16.07.2013 07:09:55 Резиновая верстка Сообщение #4

samisite

Новичок

Дата регистрации:
10.03.2013 06:13:59

Сообщений: 7

Особенностью "плавающих элементов" при помощи float, является то, что помимо самого элемента float: left; /*положение слева*/всегда необходимо указывать ширину плавающего элемента , в данном случае, я указал эту ширину равной 150px в таблице стилей.
Смотри здесь:

http://samisite.ru/vhod_css/rez_v/maket.html

Профиль Ответить

16.07.2013 22:40:03 Резиновая верстка Сообщение #5

Дмитрий184

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

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

Профиль Ответить

<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

Форум сайта MyRusakov.ru

E-mail:
Имя: