Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
Kit_Kat
0 / 0 / 1
Регистрация: 15.10.2012
Сообщений: 7
1

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

15.10.2012, 17:30. Просмотров 1051. Ответов 8
Метки нет (Все метки)

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

Помогите, please)

Резиновая верстка
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.10.2012, 17:30
Ответы с готовыми решениями:

Резиновая верстка
Подскажите, какими средствами можно решить такое задание: На странице расположены блоки-ячейки...

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

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

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

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

8
vantyz
54 / 54 / 2
Регистрация: 04.03.2012
Сообщений: 495
15.10.2012, 17:33 2
И ,чтобы при уменьшении размера страницы дивы боковые уезжали?
0
Kit_Kat
0 / 0 / 1
Регистрация: 15.10.2012
Сообщений: 7
15.10.2012, 17:38  [ТС] 3
так, чтобы расстояние между кнопками увеличивается/уменьшается, а кнопки не уезжали в строке должно быть 3 кнопки
0
vantyz
54 / 54 / 2
Регистрация: 04.03.2012
Сообщений: 495
15.10.2012, 17:41 4
Попробуйте указать для каждого div,а margin в процентах.
0
15.10.2012, 17:41
Kit_Kat
0 / 0 / 1
Регистрация: 15.10.2012
Сообщений: 7
15.10.2012, 19:20  [ТС] 5
а как вычеслить етот процент?
0
KOPOJI
15.10.2012, 21:48
  #6

Не по теме:

Цитата Сообщение от Kit_Kat Посмотреть сообщение
а как вычеслить етот процент
методом научного тыка ;)

0
anateron
20 / 21 / 3
Регистрация: 04.09.2011
Сообщений: 185
16.10.2012, 15:39 7
Создаешь div. У div класс
CSS
1
2
3
4
5
div.bottom_banner {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}
В div пихаешь картинки. У картинок класс:
CSS
1
2
3
img.bottom_banner {
    margin: 0 4%;
}
С "4%" можешь поиграться в зависимости от размера картинок.
0
Kit_Kat
0 / 0 / 1
Регистрация: 15.10.2012
Сообщений: 7
16.10.2012, 20:28  [ТС] 8
как правильно задать отступы между строками?

хорошо было бы верхний ряд кнопок прижать к верху, нижний ряд прижать к Starred Sets, а середний отделить от них margin'ом, ну что, у кого какие идеи?

HTML5
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
<div data-role="page" id="page1">
            <div data-role="content">
                <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <a id="dub" data-role="button" data-inline="true" href="#page1">
                            DUB
                        </a>
                    </div>
                    <div class="ui-block-b">
                        <a id="ind" data-role="button" data-inline="true" href="#page1">
                            IND
                        </a>
                    </div>
                    <div class="ui-block-c">
                        <a id="tek" data-role="button" data-inline="true" href="#page1">
                            TEK
                        </a>
                    </div>
                    <div class="ui-block-a">
                        <a id="tra" data-role="button" data-inline="true" href="#page1">
                            TRA
                        </a>
                    </div>
                    <div class="ui-block-b">
                        <a id="ths" data-role="button" data-inline="true" href="#page1">
                            THS
                        </a>
                    </div>
                    <div class="ui-block-c">
                        <a id="hus" data-role="button" data-inline="true" href="#page1">
                            HUS
                        </a>
                    </div>
                    <div class="ui-block-a">
                        <a id="amb" data-role="button" data-inline="true" href="#page1">
                            AMB
                        </a>
                    </div>
                    <div class="ui-block-b">
                        <a id="gam" data-role="button" data-inline="true" href="#page1">
                            GAM
                        </a>
                    </div>
                    <div class="ui-block-c">
                        <a id="com" data-role="button" data-inline="true" href="#page1">
                            COM
                        </a>
                    </div>
                </div>
                <div class="ui-grid-solo">
                    <div class="ui-block-a"><button type="v" data-theme="b">Stared Sets</button></div>
                </div>
                </div>
            </div>
        </div>

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
.ui-page {
    background:url("bg_color.png")!important;
}
 
.ui-grid-solo {
    width: 100%;
    position: absolute;
    bottom: 0;
    left:0;
}
 
.ui-btn-inner {
    padding:0 0 0 0 !important;
    color:#d9d9d9;
    background:url("ff.png");
}
 
.ui-btn-active {
    background: -moz-linear-gradient(#697985, #c6ccd1) repeat scroll 0 0 #c7cacd;
    cursor: pointer;
    text-shadow: 0 1px 1px #017cdd;
}
 
.ui-btn-corner-all {
    border-radius:0;
    background: #aeaeae;
    border: 1px solid #1B1B1B !important;
    color: #808080;
    text-shadow:
    -1px 0px black,
    0px -1px black,
    1px 0px black,
    0px 1px black,
    -1px -1px black,
    1px 1px black,
    -1px 1px black,
    1px -1px black,
    1px 0px 4px black,
    0px 0px 2px black,
    0px 0px 3px black,
    0px 0px 2px black,
    0px 0px 3px black,
    0px 0px 4px black,
    0px 0px 4px black,
    0px 0px 4px black,
    0px 0px 4px black,
    0px 0px 4px black;
    height: 28px;
    line-height: 28px;
}
 
.ui-block-b {
    text-align:center;
    margin:0 0 10% 0;
}
 
.ui-block-c {
    text-align:right;
}
 
#dub, #ind, #tek, #tra, #ths, #hus, #amb, #gam, #com {
    border: 2px solid #C7C7C7 !important;
    height:4.4em;
    width:4.4em;
    line-height:70px;
    text-align:center;
    font-size:16px;
}
0
StopSmell
291 / 167 / 29
Регистрация: 16.09.2012
Сообщений: 369
16.10.2012, 21:21 9
Цитата Сообщение от Kit_Kat Посмотреть сообщение
как правильно их сверстать для разных мониторов?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="buttonpage first">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="last-default"></span>
</div>
<div class="buttonpage second">
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="last-default"></span>
</div>
CSS
1
2
3
4
5
6
7
8
9
.buttonpage {
    text-align: justify;
}
    .buttonpage>span {
        display: inline-block;
    }
.last-default {
    width: 100%;
}
0
16.10.2012, 21:21
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
16.10.2012, 21:21

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

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

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


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

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

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