Top.Mail.Ru
Ответы

Как увеличить секцию и нормализовать текст? HTML, CSS

Использую section id

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
 @charset "UTF-8"; 
body{ 
	margin: 0; 
	padding: 0; 
} 
section{ 
	position: relative; 
	width: 100%; 
	height: 850px; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-size: 5em; 
	font-weight: 800; 
} 
section:nth-child(odd){ 
	background: #FFFFFF; 
} 
section:nth-child(even){ 
	background: #8ED7FF; 
} 
nav{ 
	position: fixed; 
	top: 0; 
	width:100%; 
	text-align: center; 
	background: #083353; 
} 
nav a{ 
	position: relative; 
	color: aliceblue; 
	text-decoration: none; 
	padding: 8px 25px; 
	font-size: 1.5em; 
	text-transform: uppercase; 
	display: inline-block; 
} 
nav a: hover, 
section#n1:hover~nav a[href="#n1"], 
section#n2:hover~nav a[href="#n2"], 
section#n3:hover~nav a[href="#n3"], 
section#n4:hover~nav a[href="#n4"], 
section#n5:hover~nav a[href="#n5"], 
section#n6:hover~nav a[href="#n6"] 
{ 
	background: #A8E9F1; 
	color: #0E3E44; 
} 
nav a: active{ 
	background: #94FAB3; 
} 
123456789101112131415161718192021222324
 !DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<link  rel="stylesheet" type="text/css" href="style.css"> 
		<title> Проект </title> 
	</head> 
	<body> 
	<section id="1"><sup>Вот тут не мло текста</sup>></section> 
	<section id="2">Вторая секция</section> 
	<section id="3">Третья секция</section> 
	<section id="4">Четвёртая секция</section> 
	<section id="5">Пятая секция</section> 
	<section id="6">Шестая секция</section> 
	<nav> 
		<a href="#n1">Первая Секция</a> 
		<a href="#n2">Вторая секция</a> 
		<a href="#n3">Третья секция</a> 
		<a href="#n4">Четвёртая секция</a> 
		<a href="#n5">Пятая секция</a> 
		<a href="#n6">Шестая секция</a> 
	</nav> 
	</body> 
</html> 
Дополнен

Как растянуть секцию исходя из текста и изображения?

По дате
По рейтингу
Аватар пользователя
Новичок

Убрать из CSS фиксированный размер секции. Хочешь ограничить размер снизу - min-height, сверху - max-height. А height: 850px; - это всегда 850px: не меньше, и не больше.

Удаленный ответ Ответ удалён