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

HTML, CSS

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

Позиционирование блока по центру и внизу - HTML, CSS

24.11.2015, 22:45. Просмотров 424. Ответов 7
Метки нет (Все метки)

Здравствуйте, помогите пожалуйста понять, как можно позиционировать блоки

CSS
1
2
3
4
5
6
7
8
9
10
11
.wrapper {
    width: 100%;
    height: 100vh;
    background: url(fon.jpg);/*[url]http://sarkissian.ru/images/1600.jpg*/[/url]
    background-repeat: no-repeat;
    background-position: center top;    
    background-size:100% 100% ;
}
.topp { position:absolute; top:0; left:0; width:100%; height:50%; padding:0;  margin:0}
.topp img.a {width:25%}
.topp img.b {width: 25%}
Как позиционировать картины a и b по центру блока топп, а - выровнить по нижнему краю, b - по-вертикали middle.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.11.2015, 22:45
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Позиционирование блока по центру и внизу (HTML, CSS):

Позиционирование блока по центру - HTML, CSS
Как ровнять блок по центру?:help:

Позиционирование image по центру внутри блока - HTML, CSS
Добрый день. Подскажите, как решить эту проблему. Есть блоки размером 300 на 450 пикселей с свойством overflow:hidden. Внутри этих блоков...

Абсолютное позиционирование по центру - HTML, CSS
Доброй ночи, не поделитесь интересными решениями разместить элемент по середине (горизонтали) родителя, имея абсолютное позиционирование, а...

Позиционирование логотипа по центру - HTML, CSS
Доброго времени суток всем! Помогите пожалуйста нубчику=)! Скачал шаблон, начал его изменять как мне нужно, и тсолдкнулся с такой...

Разместить закладки из кнопок социальных сетей внизу сайта ucoz по центру - HTML, CSS
Добрый день. Нужна ваша помощь ребята. Нужно разместить закладки из кнопок социальных сетей внизу сайта ucoz по центру. вот html...

Ссылка с картинкой по центру(вертикальное позиционирование) - HTML, CSS
Есть div блок со стилем: display: inline-grid; margin: 0 6px 12px; padding: 3px; text-align: left; width:...

7
Julieta
6 / 6 / 1
Регистрация: 19.12.2013
Сообщений: 161
24.11.2015, 23:01 #2
Поставьте у .wrapper - position:relative;
а у картинок position:absolute и позиционируйте относительно этого блока (top и left)
0
khrustal
1 / 1 / 0
Регистрация: 26.11.2013
Сообщений: 225
24.11.2015, 23:10  [ТС] #3
Julieta, дело в том, что wrapper это блок, покрывающий весь экран (это нужно для того, чтобы получить фон картинкой на весь экран) topp- это блок, покрывающий верхнюю половину экрана. Картины должны быть внутри topp.
html имеет такой вид:

HTML5
1
2
3
4
5
6
7
8
9
10
<body>
<div class="wrapper">
 
<div class="topp">
 
<img class="а" src="а.gif" />
<img class="b" src="b.gif" />
</div>
</div>
<body>
0
Julieta
6 / 6 / 1
Регистрация: 19.12.2013
Сообщений: 161
24.11.2015, 23:16 #4
Зачем вам блок для фона сайта? Укажите фон у body
CSS
1
2
3
body {
background: url(fon.jpg);
}
0
khrustal
1 / 1 / 0
Регистрация: 26.11.2013
Сообщений: 225
24.11.2015, 23:19  [ТС] #5
Julieta, нужно растянуть эту катину для фона на весь экран
background-position: center top;
background-size:100% 100% ;
0
Julieta
6 / 6 / 1
Регистрация: 19.12.2013
Сообщений: 161
24.11.2015, 23:21 #6
а что за картинка?
- можете использовать repeat
-можете использовать cover
в зависимости какая у вас картинка
0
khrustal
1 / 1 / 0
Регистрация: 26.11.2013
Сообщений: 225
24.11.2015, 23:22  [ТС] #7
папиросная дымка
0
Julieta
6 / 6 / 1
Регистрация: 19.12.2013
Сообщений: 161
24.11.2015, 23:23 #8
Если как по ссылке:
то используйте cover.

http://htmlbook.ru/css/background-size
0
24.11.2015, 23:23
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.11.2015, 23:23
Привет! Вот еще темы с ответами:

Как закрепить кнопку внизу блока - HTML, CSS
Всем доброго времени суток.Есть блок товара,есть ссылка кнопки.Как Закрепить ее внизу блока position:absolute;bottom:0; пытался,но тогда...

Позиционирование текста списка к центру своего маркера - HTML, CSS
&lt;ul&gt; &lt;li class=&quot;clli&quot;&gt;Какой-то текс&lt;/li&gt; &lt;li class=&quot;clli&quot;&gt;Тоже какой-то текс&lt;/li&gt; &lt;li class=&quot;clli&quot;&gt;Ещё текст какой&lt;/li&gt; &lt;/ul&gt; ...

Как сделать позиционирование текста по центру страници - HTML, CSS
Здравствуйте. Не могу выставить позиционирование текста в css. Уже и text-align: center пробовал но текст идёт в одну линию и выходить...

Как разместить элемент внизу блока <div> - HTML, CSS
Здравствуйте. Я использую блочную верстку сайта. У меня блок правого столбика под навигацию с помощью js ровняется с блоком контента. В...


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

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

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