Не переносится блок через display: block. - HTML и CSS

Мaкс · 02.05.2020, 19:30

Прошу помочь с маленькой задачкой.
Снимок.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>
Спасибо заранее за любую помощь, весь интернет обшарил))

Arigato · 02.05.2020, 20:03

Цитата:

Сообщение от Мaкс

Он по моей идеи должен быть самым верхним и занимать всю ширину окна

Он и так занимает всю ширину, но другие блоки наложены на него сверху. Вместо top: 0px; пропишите top: 125px; и уберите отступы у body:

Код:

		body{
			margin: 0;
		}

Мaкс · 03.05.2020, 07:22

Цитата:

Сообщение от Arigato

Вместо top: 0px; пропишите top: 125px;

Я так и хотел сначала, но мне не нравится, то что это не адаптивно, потому что фиксированный размер, это минус большой. Можно ли это исправить?

Мaкс · 03.05.2020, 07:25

Что то у меня получилось

. Добавил position: relative в #view и получил это:
Снимок.jpg

Arigato · 03.05.2020, 10:53

Цитата:

Сообщение от Мaкс

мне не нравится, то что это не адаптивно, потому что фиксированный размер, это минус большой

Ну так вы сами position: absolute; выбрали...

Мaкс · 03.05.2020, 11:36

Цитата:

Сообщение от 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>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
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

03.05.2020, 07:25	#4
Мaкс Форумчанин Регистрация: 12.06.2018 Сообщений: 830	Что то у меня получилось . Добавил position: relative в #view и получил это: Снимок.jpg