Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 02.05.2020, 19:30   #1
Мaкс
Форумчанин
 
Регистрация: 12.06.2018
Сообщений: 831
Вопрос Не переносится блок через display: block.

Прошу помочь с маленькой задачкой.
Снимок.jpg
Посмотрите, хочу обратить внимание на лаймовый блок. Он по моей идеи должен быть самым верхним и занимать всю ширину окна, а она почему то в один ряд с другим блокам "view". Что не так?
Код:
<!doctype html>
<html>
<head>
	<style>
		#cap {
			width: 100%;
			height: 125px;
			background-color: yellowgreen;
			display: block;
		}
		#view {
			display: block;
		}
		#menu {
			position: absolute;
			left: 0%;
			top: 0px;
			width: 30%;
			min-height: 500px;
			background-color: yellow;
		}
		#content {
			position: absolute;
			left: 30%;
			top: 0px;
			width: 35%;
			min-height: 800px;
			background-color: orange;
		}
		#news {
			position: absolute;
			left: 65%;
			top: 0px;
			width: 25%;
			min-height: 650px;
			background-color: red;
		}
		#bottom {
			
		}
	</style>
</head>

<body>
	<div id="cap"></div>
	<div id="view">
		<span id="menu"></span>
		<span id="content"></span>
		<span id="news"></span>
	</div>
</body>
</html>
Спасибо заранее за любую помощь, весь интернет обшарил))
Мaкс вне форума Ответить с цитированием
Старый 02.05.2020, 20:03   #2
Arigato
Высокая репутация
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Сообщений: 16,216
По умолчанию

Цитата:
Сообщение от Мaкс Посмотреть сообщение
Он по моей идеи должен быть самым верхним и занимать всю ширину окна
Он и так занимает всю ширину, но другие блоки наложены на него сверху. Вместо top: 0px; пропишите top: 125px; и уберите отступы у body:
Код:
		body{
			margin: 0;
		}
Arigato вне форума Ответить с цитированием
Старый 03.05.2020, 07:22   #3
Мaкс
Форумчанин
 
Регистрация: 12.06.2018
Сообщений: 831
По умолчанию

Цитата:
Сообщение от Arigato Посмотреть сообщение
Вместо top: 0px; пропишите top: 125px;
Я так и хотел сначала, но мне не нравится, то что это не адаптивно, потому что фиксированный размер, это минус большой. Можно ли это исправить?
Мaкс вне форума Ответить с цитированием
Старый 03.05.2020, 07:25   #4
Мaкс
Форумчанин
 
Регистрация: 12.06.2018
Сообщений: 831
По умолчанию

Что то у меня получилось . Добавил position: relative в #view и получил это:
Снимок.jpg
Мaкс вне форума Ответить с цитированием
Старый 03.05.2020, 10:53   #5
Arigato
Высокая репутация
СуперМодератор
 
Аватар для Arigato
 
Регистрация: 27.07.2008
Сообщений: 16,216
По умолчанию

Цитата:
Сообщение от Мaкс Посмотреть сообщение
мне не нравится, то что это не адаптивно, потому что фиксированный размер, это минус большой
Ну так вы сами position: absolute; выбрали...
Arigato вне форума Ответить с цитированием
Старый 03.05.2020, 11:36   #6
Мaкс
Форумчанин
 
Регистрация: 12.06.2018
Сообщений: 831
По умолчанию

Цитата:
Сообщение от Arigato Посмотреть сообщение
Ну так вы сами position: absolute; выбрали...
Причём тут те блоки с absolute? Они вообще ни причём. "position: relative" добавил к индефикатору view.
Код:
<!doctype html>
<html>
<head>
	<style>
		#cap {
			width: 100%;
			height: 125px;
			background-color: yellowgreen;
			display: block;
		}
		#view {
			position: relative;
			display: block;
		}
		#menu {
			position: absolute;
			left: 0%;
			top: 0px;
			width: 25%;
			min-height: 550px;
			background-color: yellow;
		}
		#content {
			position: absolute;
			left: 25%;
			top: 0px;
			width: 55%;
			min-height: 550px;
			background-color: orange;
		}
		#news {
			position: absolute;
			left: 80%;
			top: 0px;
			width: 20%;
			min-height: 550px;
			background-color: red;
		}
		#bottom {
			
		}
	</style>
</head>

<body>
	<div id="cap"></div>
	<div id="view">
		<span id="menu"></span>
		<span id="content"></span>
		<span id="news"></span>
	</div>
</body>
</html>
Мaкс вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS: Позирование элементов через display: inline-block. Мaкс HTML и CSS 1 01.05.2020 18:34
Как обойти display:block !important ? Capoeirista HTML и CSS 3 13.03.2016 00:57
Проблема с display: inline-block KaMaKaDzA HTML и CSS 1 11.03.2016 23:19
Меню: display: block, padding-top и bottom keen_ HTML и CSS 0 17.03.2012 09:36
Display block не block mrgrudge HTML и CSS 2 25.12.2010 11:10