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

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 41, средняя оценка - 4.71
shurik330
0 / 0 / 0
Регистрация: 02.09.2011
Сообщений: 34
#1

задать margin в процентах - HTML, CSS

16.11.2012, 16:54. Просмотров 6589. Ответов 7
Метки нет (Все метки)

Здравствуйте.
Подскажите, как правильно сделать отступ сверху в процентах?

задать margin в процентах

На скриншоте пример. Красную линию я выровнял с помощью margin-top:50%; Но на 50% это не похоже. Разрешение монитора 50%.
Если можно, то ссылки на мануал.
Заранее спасибо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.11.2012, 16:54
Здравствуйте! Я подобрал для вас темы с ответами на вопрос задать margin в процентах (HTML, CSS):

В блоках не хочет работать высота заданная в процентах. Если задать в пикселях, то работает. В чем ошибка? - HTML, CSS
В блоках не хочет работать высота заданная в процентах. Если задать в пикселях, то работает. В чем ошибка? ...

Margin-top и margin-bottom в ie6 не работает - HTML, CSS
#news1 > p { margin-top:15px; margin-bottom:15px; } пробовал ставить !important эффект один и тот же...(

Не смещается центр div c margin 0 auto, который в другом div'e с другим margin - HTML, CSS
<div style="margin-left: 100px"> <div style="margin: 0 auto;"><a href="" class="pageButton">1</a></div> </div> В первом диве...

Сайт в процентах - HTML, CSS
Создавал ли кто нибудь сайты без использования пикселей. Что бы все размеры width, font-size и т.д. задавались в процентах или em?? ...

Td height в процентах - HTML, CSS
Требуется сделать две строки в таблице, которые вне зависимости от контента (в одной из них он всегда будет выше) будут иметь одинаковую...

О процентах (30 + 70 > 100 ?) - HTML, CSS
Всем привет. Я не веб дизайнер, но когда я что-то делаю для себя (нет готового макета) то пытаюсь как-то стилизовать свои наброски, чтобы...

7
Taatshi
Администратор
11493 / 4963 / 253
Регистрация: 05.04.2011
Сообщений: 13,603
Записей в блоге: 2
16.11.2012, 17:57 #2
shurik330, выравнивание в 50% работает при условии фиксированной ширины и высоты для родителя
0
shurik330
0 / 0 / 0
Регистрация: 02.09.2011
Сообщений: 34
16.11.2012, 18:21  [ТС] #3
http://s-pic.ru/i/59344.jpg
Страница должна быть резиновой.
Ширина и высота серого div-а 100%, зеленого 700x400px, красного 200х60рх. Как красному div сделать отступ сверху 20%?
0
vantyz
54 / 54 / 2
Регистрация: 04.03.2012
Сообщений: 495
16.11.2012, 19:04 #4
CSS
1
margin-top:20%;
Если не помогло,то добавьте ко всем блокам
CSS
1
position: relative;
Добавлено через 37 секунд
Если и это не помогло дайте код,я пошаманю
0
SlavAz
ѪѦѢ
595 / 164 / 2
Регистрация: 19.08.2011
Сообщений: 666
Записей в блоге: 3
16.11.2012, 20:58 #5
а
CSS
1
html {height: 100%} body {height: 100%}
не поможет?
0
shurik330
0 / 0 / 0
Регистрация: 02.09.2011
Сообщений: 34
16.11.2012, 22:31  [ТС] #6
Цитата Сообщение от SlavAz Посмотреть сообщение
а
CSS
1
html {height: 100%} body {height: 100%}
не поможет?
это прописано. Не помогает

Добавлено через 6 минут
Цитата Сообщение от vantyz Посмотреть сообщение
Если и это не помогло дайте код,я пошаманю
CSS
1
2
3
4
5
6
7
8
9
10
html, body{height:100%;}
 
*{padding: 0;margin: 0px;}
/*------------------------ CONTAINER --------------------------*/
.container{margin:0 auto;background:#888;height:100%;min-height:400px;min-width:780px;max-width:1600px;position: relative;}
.main{background:green;height:400px;width:700px;position: relative;}
.line{background:red;height:60px;width:200px;margin-top:50%;position: relative;}
 
/*-------------------------------------------------------------*/
.clear{clear:both;height:1px;}
HTML5
1
2
3
4
5
6
7
8
<body>
    <div class="container">
        <div class="main">
            <div class="clear"></div>
            <div class="line"></div>
        </div>
    </div>
</body>
0
koza4ok
626 / 435 / 4
Регистрация: 19.09.2012
Сообщений: 1,633
17.11.2012, 09:29 #7
нужно помнить что margin,padding заданные в % ,равны % от ширины элемента а не от ширины родителя.

Добавлено через 11 минут
Посмотри http://www.xiper.net/collect/html-an...roditelya.html (последний способ)
1
_DmS_
25 / 25 / 0
Регистрация: 01.09.2012
Сообщений: 79
17.11.2012, 11:01 #8
Есть еще такой метод вертикального выравнивания по центру:
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
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" ="text/html; charset=UTF-8">
    <title>Hello CSS</title>
    <style type="text/css">
        * {margin: 0; padding: 0;}
        html, body { width: 100%; height: 100%; }
        body { background: #D3E7FF;}
        .spacer {
            float:left;
            height:50%;
            margin-bottom:-200px; /*margin-bottom: -200px; половина от высоты #content;/
        }
        #content {
            clear: both;
            position: relative;
 
            color: #840200;
            background: #BCFFA5;
            border: 2px solid #006B0A;
            text-align: center;
 
            height: 400px;
            width: 700px;
            margin: 0 auto;
            padding: 10px;
        }
        .inner {
            background: #FF7070;
            color: #7A0000;
            border: 2px solid #006B0A;
 
            position: relative;
            width: 200px;
            height: 60px;
            margin: 10% auto 0; /* margin-top: 10% - 70px от ширины parent div'а */
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="spacer"></div>
    <div id="content">
        <div class="inner"><p>Inner &lt; DIV &gt;</p></div>
    </div>
</body>
</html>
margin-top: 10% - от ширины #content
http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#margin-properties

В данном случае проценты пересчитываются в те же пиксели и можно задать фиксированное значение margin, так как parent элемент имеет фиксированные размеры.
0
17.11.2012, 11:01
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.11.2012, 11:01
Привет! Вот еще темы с ответами:

Height в процентах - HTML, CSS
Есть код html &lt;!DOCTYPE HTML&gt; &lt;html lang=&quot;ru&quot;&gt; &lt;head&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;&gt; ...

Margin-~ - HTML, CSS
Заказчик заказал строго по центру разместить его картинку на любом мониторе. Никогда такого не делал, всегда в % или пикселях от верха...

margin - HTML, CSS
Всем привет ув. Программисты помогить найти выход из решения Есть блоки &lt;div id=&quot;main&quot;&gt; &lt;div id=&quot;logo&quot;&gt;ЛОГОТИП&lt;/div&gt; ...

margin - HTML, CSS
Здравствуйте. Задаю элементу margin-bottom: 5px; margin-top: auto; А он не хочет отталкиваться от низа на 5пх, а все...


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

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

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