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
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


блочные элементы и так на всю ширину тянутся. сложность не в том, что чего-то надо растянуть, а том, чтобы решить (с заказчиком!), что и на сколько должно тянуться.
допустим, макет имеет 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
Сообщений: 3544
Регистрация: 30.6.2011
Из: Железнодорожный (Балашиха)
Поблагодарили: 2881 раз
Репутация:   294  


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

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


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


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

Группа: Active User
Сообщений: 1434
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 641 раз
Репутация:   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
Сообщений: 1434
Регистрация: 21.7.2012
Из: Украины
Поблагодарили: 641 раз
Репутация:   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, если честно не знаю, как это правильно называется, но факт тот, что для большинства макетов этот метод приемлем больше. Проверено на практике.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужна верстка со знанием php
4 Nemo 403 22.5.2018, 7:14
автор: Nemo
Открытая тема (нет новых ответов) Психологический форум ( нужна оценка )
6 priest 1511 18.5.2018, 23:10
автор: Libby
Открытая тема (нет новых ответов) Очень нужна работа
Желательно на постоянной основе
14 Yuliya_Klim 3144 10.5.2018, 17:59
автор: Yuliya_Klim
Горячая тема (нет новых ответов) Уникальные статьи от опытного автора
Нужна статья? Обращайтесь!
70 Kiloan_Frost 10244 3.5.2018, 19:09
автор: Kiloan_Frost
Открытая тема (нет новых ответов) Ищу дорвейщика опытного или начинающего
0 alhimiya 618 2.5.2018, 22:36
автор: alhimiya


 



RSS Текстовая версия Сейчас: 26.5.2018, 18:35
Дизайн