С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
khrustal
2 / 2 / 0
Регистрация: 26.11.2013
Сообщений: 234
1

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

24.11.2015, 22:45. Просмотров 489. Ответов 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
Ответы с готовыми решениями:

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

Позиционирование image по центру внутри блока
Добрый день. Подскажите, как решить эту проблему. Есть блоки размером 300 на...

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

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

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

7
Julieta
6 / 6 / 1
Регистрация: 19.12.2013
Сообщений: 161
24.11.2015, 23:01 2
Поставьте у .wrapper - position:relative;
а у картинок position:absolute и позиционируйте относительно этого блока (top и left)
0
khrustal
2 / 2 / 0
Регистрация: 26.11.2013
Сообщений: 234
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
2 / 2 / 0
Регистрация: 26.11.2013
Сообщений: 234
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
2 / 2 / 0
Регистрация: 26.11.2013
Сообщений: 234
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

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

Как закрепить кнопку внизу блока
Всем доброго времени суток.Есть блок товара,есть ссылка кнопки.Как Закрепить ее...

Как сделать позиционирование текста по центру страници
Здравствуйте. Не могу выставить позиционирование текста в css. Уже и ...


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

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

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