HTML / CSS Query / Ошибка при создании заголовка на веб-странице

Хорошие люди,

Я выполняю проект для университета, создание веб-страницы. Я создаю заголовок, я хочу организовать его следующим образом:

Boceto header Как видите, заголовок состоит из 3 частей:

В части слева #logo_pagina будет логотипом страницы.

Справа от него остальная часть заголовка будет разделена на 2 части:

- В верхней части будет заголовок страницы и его правая ссылка на различные социальные сети (это будут просто значки Facebook, щебетать и т. д., и щелкнув ссылку на эти страницы).

- Что касается нижней части, там будет навигация, где различные ссылки будут внутри страницы.

Я думал сделать это в 2 блоках, один из которых содержит страницу с логотипом, а другой - весь блок справа, и, в свою очередь, блок справа состоит из 2 частей, одна с заголовком и ссылками, а другая с навигация.

Я приложил HTML-код:

header {
	height: 150px;
	width: 100%;
	background-color: #141414;
}

#header_logo {
	display: inline-block;
	width: 300px;
	height: 100%;
	border-right: 1px solid #b4b4b4;
}

#header_div{
	display:inline-block;
	width: calc(100% - 305px);
	height: 100%;
	
}

#header_div #header_title{
	width: 100%;
	height: 100px;
}

#header_div h1{
	display: inline;
}

#header_div #social_networks li{
	list-style:none;
    display:inline;
}

#header_div nav{
	width: 100%;
	height: 50px
}
<header>
	<img id="header_logo" src="/img/logo.png"/>
	<div id="header_div">
		<div id="header_title">
			<h1>TITULO PAGINA</h1>
			<ul id="social_networks">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
			</ul>
		</div>
		<nav></nav>
	</div>
</header>

У меня есть проблема, которую я не знаю, потому что второй блок, который я называю #header_div, когда он имеет контент, блок перемещается вниз.

Навигация по-прежнему не имеет содержимого, потому что я обнаружил ошибку до ее предоставления, но то, что она будет содержать, будет что-то вроде изображения.

Может быть, потому что я поместил это как встроенный блок?

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

Заранее большое спасибо.

Если у вас есть какие-либо вопросы по поводу кода, я с радостью на него отвечу.

0
задан 17.01.2017, 19:02
0 ответов

Проверь float:left и float:right, которые - это, чтобы упорядочивать в левую и прямую часть страницы соответственно.

header {
	height: 150px;
	width: 100%;
	background-color: #141414;
}

#header_logo {
	float:left;
	width: 300px;
	height: 100%;
	border-right: 1px solid #b4b4b4;
}

#header_div{
    float:right;
	width: calc(100% - 305px);
	height: 100%;
}

#header_div #header_title{
	width: 100%;
	height: 100px;
    color:#fff;
}

#header_div h1{
	display: inline;
}

#header_div #social_networks li{
	list-style:none;
    display:inline;
    background:red;
}
<header>
	<img id="header_logo" src="/img/logo.png"/>
	<div id="header_div">
		<div id="header_title">
			<h1>TITULO PAGINA</h1>
			<ul id="social_networks">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
			</ul>
		</div>
		<nav></nav>
	</div>
</header>
0
ответ дан 03.12.2019, 17:38

Теги

Похожие вопросы