Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Jhonnyhex
0 / 0 / 0
Регистрация: 06.04.2014
Сообщений: 3
#1

Настроить сжатие сайта только до определенных размеров - HTML, CSS

06.04.2014, 11:25. Просмотров 1102. Ответов 3
Метки нет (Все метки)

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

Добавлено через 1 минуту
Да и забыл указать сайт резиновый

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
html{
height:100%;
width:100%;
 
}
body {
height:94%;
width:94%;
 
}
body{
background-image:url(lal4.jpg);
background-position:center;
background-repeat:no-repeat ;
background-attachment:fixed;
}
 
#header{
height:5%;
width:60%;
background-color:gray;
margin-left:24%;
}
 
#rbar{
vertical-align:10px;
height:95%;
margin-left:24%;
width:15%;
float:left;
background-color:red;
 
}
#content{
height:95%;
width:45%;
float:left;
background-color:green;
 
}
#podval{
height:4%;
width:60%;
background-color:gray;
margin-left:24%;
clear: both;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.04.2014, 11:25
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Настроить сжатие сайта только до определенных размеров (HTML, CSS):

Пропорциональное изменение размеров сайта - HTML, CSS
Здравствуйте. Имеется следующая задача: Подогнать сайт под всевозможные разрешения. HTML страница<link rel="stylesheet"...

Сжатие background img на телефонах и планшетах в полной версии сайта? CSS - HTML, CSS
Сжимается background на телефоне и планшетах или на очень маленьких мониторах На сайте все нормально, а на телефоне,планшетах и т.д...

Задействовать CSS только для определенных блоков - HTML, CSS
У меня есть класс .masonry и внутри блоки с классом .item, и ещё несколько классов. Как заставить действовать .masonry, только на .item,...

Смещаются элементы сайта при изменении размеров окна - HTML, CSS
Здравствуйте. Появилась проблема, при уменьшении окна в оконном режиме съезжает дизайн. Вот скрины: Что можно сделать?

Настроить ширину сайта - HTML, CSS
Парни проблема, заметил не сразу, Скрин, у меня на сайте появилась горизонтальная полоса прокрутки, то есть как видно на скрине, справа от...

Сжатие из-за размеров экрана - OpenGL
Здравствуйте , форумчане :) Размеры окна(экрана) примерно 800 ширина и 480 высота. Проекция ортогональная,все стенки по 100 ,кроме...

3
Vladislav WebDev
324 / 214 / 76
Регистрация: 04.11.2012
Сообщений: 638
06.04.2014, 11:31 #2
Jhonnyhex, больше информативности! Пока могу посоветовать только юзать min-width, задавая минимальные размеры резинового сайта.
Цитата Сообщение от Jhonnyhex Посмотреть сообщение
сжатие наподобе vk.com
Что там за сжатие такое? Вроде вк сайт с фиксированными размерами.

Добавлено через 1 минуту
Цитата Сообщение от Jhonnyhex Посмотреть сообщение
html{
height:100%;
width:100%;
}
body {
height:94%;
width:94%;
}
Вот в этом проблема. Размеры сайта зависят только от размера окна браузера и не имеют нижних границ, при которых размер был бы фиксированным. Юзайте min-width и min-height.

Добавлено через 1 минуту
Например
CSS
1
2
3
4
5
6
body {
min-width: 480px;
min-height: 320px;
height:94%;
width:94%;
}
1
Jhonnyhex
0 / 0 / 0
Регистрация: 06.04.2014
Сообщений: 3
06.04.2014, 11:37  [ТС] #3
На сайте в вк он сжимается до определенного момента,а потом браузер накрывает половину сайта,и он не бьется)

Добавлено через 4 минуты
я проверил,понял в чем проблема,спасибо за решение.
0
Vladislav WebDev
324 / 214 / 76
Регистрация: 04.11.2012
Сообщений: 638
06.04.2014, 11:39 #4
Цитата Сообщение от Jhonnyhex Посмотреть сообщение
На сайте в вк он сжимается до определенного момента,а потом браузер накрывает половину сайта,и он не бьется)
Он там не сжимается, а выравнивается по центру. Вот так это делается для вашего случая
CSS
1
2
3
4
5
6
7
.wrapper {
margin: 0 auto;
min-width: 480px;
min-height: 320px;
height:94%;
width:94%;
}
И не задавайте размеров для body, лучше оборачивайте свою страницу в блок-обертку, например так:
HTML5
1
2
3
4
5
6
7
8
9
<!doctype html>
<head>
</head>
<body>
    <div class="wrapper">
        здесь размещаем весь код сайта
    </div>
</body>
</html>
0
06.04.2014, 11:39
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.04.2014, 11:39
Привет! Вот еще темы с ответами:

Сжатие, изменение размеров изображений - Visual Basic
Всем привет! Помогите разобраться как сжать изображение, т.е. есть рисунок безумного размера (к примеру 6000*4000 ) как его подогнать под...

Сжатие изображения в TImage до размеров контейнера - Lazarus
Вообщем такая проблема, нужно что бы изображение, которое загружаем на Timage сжималось до размеров Timage. Лазарус.

Считать строку определенных размеров - C++
Всем Привет! Не подскажите как с текстового файла считать нужное количество символов , указывая с какой по какой символ читать?

Timer, постепенно увеличивать / уменьшать картинку до определенных размеров - C#
мне задали создать программу,чтобы картинка постепенно увеличивалась до определенных размеров,затем придя к этим размерам-уменьшалась.Потом...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru