X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Нужна помощь опытного верстальщика., "Резиновая" верстка
booogabooo
booogabooo
Topic Starter сообщение 30.4.2013, 8:32; Ответить: booogabooo
Сообщение #1


клоновод
***

Группа: Banned
Сообщений: 208
Регистрация: 21.3.2012
Поблагодарили: 20 раз
Репутация:   4  


Столкнулся на днях с данной проблемой. Какие параметры задать у сайта (ширина), чтоб на всех экранах он растягивался по ширине на 100%. Не могу с этим разобраться.

Как правильно верстать макеты? Допустим, вам дали макет 1080х960, а вам нужно на другой экран (расширение экрана не знаете). Как начинать верстку в таком случае?


--------------------
клоновод
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4ipusik
4ipusik
сообщение 30.4.2013, 9:43; Ответить: 4ipusik
Сообщение #2


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 18.8.2012
Поблагодарили: 2 раза
Репутация:   0  


(booogabooo @ 30.4.2013, 8:32) *
Какие параметры задать у сайта (ширина), чтоб на всех экранах он растягивался по ширине на 100%


width:100% плюс можно min-width:npx использовать в том или ином случае.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 30.4.2013, 9:53; Ответить: x64
Сообщение #3


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3432
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2750 раз
Репутация:   289  


блочные элементы и так на всю ширину тянутся. сложность не в том, что чего-то надо растянуть, а том, чтобы решить (с заказчиком!), что и на сколько должно тянуться.
допустим, макет имеет 2 колонки: левая с меню и правая с контентом. должна ли быть колонка с меню фиксирована? или у неё должен быть размер 20% от ширина экрана? или ещё какие-то дополнительные правила (допустим, меню должно оставаться на одном месте)?
в зависимости от ситуации задействуются min-width, max-width, width, margin-left, position:fixed, и т. д. и т. п.
в качестве единиц измерения: %, px, em


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
devuser
devuser
сообщение 30.4.2013, 12:48; Ответить: devuser
Сообщение #4


Все будет тип-топ
*****

Группа: Active User
Сообщений: 713
Регистрация: 5.12.2012
Из: Online
Поблагодарили: 342 раза
Репутация:   52  


Генератор вам в помощь


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
booogabooo
booogabooo
Topic Starter сообщение 30.4.2013, 18:24; Ответить: booogabooo
Сообщение #5


клоновод
***

Группа: Banned
Сообщений: 208
Регистрация: 21.3.2012
Поблагодарили: 20 раз
Репутация:   4  


Тогда объясните что я буду иметь, если поставлю
min-width: npx
max-width: npx


Просто подскажите, как сверстать. У меня есть макет ширинов в 1100px...как сделать, чтоб у всех он был на полный экран?


--------------------
клоновод
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x64
x64
сообщение 30.4.2013, 21:24; Ответить: x64
Сообщение #6


F.A.L.L.O.U.T.
*******

Группа: Super Moderator
Сообщений: 3432
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2750 раз
Репутация:   289  


(booogabooo @ 30.4.2013, 18:24) *
Просто подскажите, как сверстать

как-как... руками
htmlbook.ru в помощь


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 1.5.2013, 20:49; Ответить: andreykashops
Сообщение #7


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


как сделать, чтоб у всех он был на полный экран?

Если чисто резина: width: 100%;
В чем сложность?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
brome
brome
сообщение 3.5.2013, 11:01; Ответить: brome
Сообщение #8


Бывалый
****

Группа: User
Сообщений: 253
Регистрация: 25.7.2012
Поблагодарили: 100 раз
Репутация:   17  


Обычно макеты не растягивают на 100%, а делают примерно так:

body {
   min-width:900px;
   max-width:1600px;
   margin:0 auto;
   }

Значения могут быть другие. Суть в том, что body (или другой элемент, в который обёрнута страница) будет тянуться максимум до ширины 1600 пикселей, а на бОльших экранах отцентрируется по середине. Аналогично, если ширина экрана будет меньше 900 пикселей, страница перестанет тянуться и появится горизонтальная прокрутка.
Максимальная ширина указывается потому что в большинстве случаев (есть исключения), если растянуть макет например на экран больше 2000 пикселей, получится ужас). с минимальной шириной то же самое.

Сообщение отредактировал brome - 3.5.2013, 11:02


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops
andreykashops
сообщение 3.5.2013, 11:46; Ответить: andreykashops
Сообщение #9


WordPress is my Life..
******

Группа: Active User
Сообщений: 1427
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 633 раза
Репутация:   139  


brome, по моему это называется полурезиновой версткой(кстати я ее тоже уважаю больше).

Сообщение отредактировал andreykashops - 3.5.2013, 11:46


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
brome
brome
сообщение 3.5.2013, 23:27; Ответить: brome
Сообщение #10


Бывалый
****

Группа: User
Сообщений: 253
Регистрация: 25.7.2012
Поблагодарили: 100 раз
Репутация:   17  


andreykashops, если честно не знаю, как это правильно называется, но факт тот, что для большинства макетов этот метод приемлем больше. Проверено на практике.


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Безвозмездная помощь в социальных сетях
Инвайты, посты, репосты, лайки и тп
9 PostBrigada 2298 16.12.2017, 15:47
автор: WildWeb8
Открытая тема (нет новых ответов) Нужна помощь в активации аккаунта AdSense
10 dimaguru 2606 15.12.2017, 11:12
автор: Ley
Открытая тема (нет новых ответов) Очень нужна работа
Желательно на постоянной основе
11 Yuliya_Klim 1734 11.12.2017, 19:26
автор: beliaev
Горячая тема (нет новых ответов) Уникальные статьи от опытного автора
Нужна статья? Обращайтесь!
59 Kiloan_Frost 7723 8.12.2017, 14:25
автор: Kiloan_Frost
Открытая тема (нет новых ответов) [Срочно] Ищу верстальщика Wordpress
поправить готовый шаблон
3 frion-seo 578 29.11.2017, 20:06
автор: frion-seo


 



RSS Текстовая версия Сейчас: 18.12.2017, 5:59
Дизайн