Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Henior
57 / 74 / 15
Регистрация: 24.11.2010
Сообщений: 501
Записей в блоге: 14
1

Резиновая верстка сайта

16.11.2015, 17:50. Просмотров 249. Ответов 2
Метки нет (Все метки)

Сделал сайт для ПК, теперь пробую адаптировать его и под мобильники. Получилось во такое изящество:

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
@media screen and (max-width: 480px) {
 
    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }
 
    /* main nav */
    #
    #nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
    
       /* Главное контейнер
    #container {
        max-width: 100%;
        height: auto;
    }
    
    #content img {
        max-width: auto;
        height: auto;
    }
    
    table {
        max-width: 100%;
    }
    /*table thead {
        display: none;
      }
      
    table td {
        display: block;
        width: 100%;
        position: relative;     
    }*/
 
}
Получается вот такое безобразие (см. изображение). Как это исправить?
0
Миниатюры
Резиновая верстка сайта  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.11.2015, 17:50
Ответы с готовыми решениями:

Резиновая (адаптивная) верстка сайта на css
Доброе время суток!, в этом разделе я хочу поделиться с вами тем что я знаю о резиновой...

Резиновая верстка
как сделать чтоб блоки при увеличении и уменьшении экрана не убегали вниз и вверх, а оставались на...

резиновая верстка
прилагаю дизайн страницы, в качестве примера конечно же. Хочется узнать ответы на такие вопросы:...

Резиновая верстка
Такая вот проблема, есть 6 кнопок фиксированного размера.., как правильно их сверстать для разных...

Резиновая верстка
Добрый день! Нужно резиново спозиционировать div относительно wraper. Чтобы при уменьшении размера...

2
Almag13
27 / 28 / 15
Регистрация: 18.10.2015
Сообщений: 187
16.11.2015, 19:15 2
Это у вас таблицей сверстано, вероятно поэтому, контент не помещается в таблицу и поэтому выходит за рамки...
Переверстайте списком или блоками и тогда блоки спадут вниз
0
Henior
57 / 74 / 15
Регистрация: 24.11.2010
Сообщений: 501
Записей в блоге: 14
17.11.2015, 09:24  [ТС] 3
ничего переверстывать не нужно, я сделал так

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@media screen and (max-width: 480px) {
 
    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }
 
    #container {
        max-width: 100%;        
    }
    
    #content {
        padding: 0 10% 0 0;
    }
            
    #header {
        padding: 0;
    }
    
    #logo {
        text-align: center;
        float: none;
    }
    
    #place {
        float: none;
        padding: 0;
        text-align: center;
    }
    
    #phone{
        float: none;
        padding: 0;
        text-align: center;
    }
    
    table {
        max-width:100%;
        height: auto;
    }
    
    table td {
        display: block;
        width: 100%;
        position: relative;
        text-align: center;
        margin: 0;
        padding: 0;
        float: left;
    }
    
    table th {
        max-width: 100%;
    }
    
    /* main nav */
    #navigation {
        max-width: 100%;
        /*border-radius: 0;*/
    }
    
    #modal-window {
        width: 100%;
        height: auto;
    }
    
    #navigation li {
        display: block;
        width: 100%;
        position: relative;
        text-align: center;
        border-radius: 5px 5px 5px 5px;
    }
    
    #navigation a {
        font-size: 90%;
        padding: 10px 8px;
    }
    
    iframe {
        max-width: 100%;
        height: auto;
    }
 
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.11.2015, 09:24

Резиновая верстка
Допустим есть блок: <div class="content"> <div> И стиль: .content { height:450px;

Резиновая верстка
Здравствуйте. Верстаю одностраничник по готовому дизайну. Ширина шаблона 1903.Из этого расчета и...

Резиновая верстка
Подскажите пожалуйста, возможно ли средствами html, css и, возможно, javascript, сделать сайт,...


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

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

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