NordicSakura
@NordicSakura
Начинающий веб-фрилансер.

Как запретить перекрытие в моём случае?

d68861e1a9444618b628bfb8530ab4df.png
Задача: контент должен заканчиваться там, где начинается портфолио, а не "подныривать" под него. Я даже не знаю, что и юзать, магию z-index или как-то с height разбираться.
Если это поможет, этот сайт гарантировано будет поддерживать JavaScript.
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Nordic Sakura</title>
		<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
		<style>
			@import "normalize.css"; /* ! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
			body { background-image: url("images/background1.jpg"); background-position: center center; background-attachment: fixed; background-size: cover; }
			#noscript { position: absolute; z-index: 1000; height: 100%; width: 100%; background-color: White; }
			#header { background-color: rgb(50,50,50); padding-left: 10px; }
			#header a { font-family: 'Lora', serif; font-size: 18px; color: rgb(200,200,200); text-decoration: none; cursor: pointer; }
			#navel1, #navel2, #navel3, #navel4 { display: inline-block; padding: 10px; }
			#navel1:hover, #navel2:hover, #navel3:hover, #navel4:hover { background-color: Black; }
			#navel1:hover a, #navel2:hover a, #navel3:hover a, #navel4:hover a { color: white; }
			#content { background-image: url("images/background0.png"); background-position: center center; background-attachment: fixed; background-size: cover; width: 100%; height: 100%; position: fixed; right: 0px; }
			#portfolio { background-color: Black; opacity: 0.5; height: 150px; width: 100%; position: fixed; bottom: 20px; }
			#cellar { background-color: Black; color: rgb(75,75,75); height: 20px; width: 100%; position: fixed; bottom: 0px; text-align: right; }
			#cellar a { color: rgb(75,75,75); text-decoration: none; cursor: pointer; }
		</style>
		<script>
			
		</script>
	</head>
	<body>
		<noscript id="noscript">
			У Вас не работает JavaScript! Сайт работать не будет!<br />
			Включена альтернативная текстовая версия сайта.<br /><br />
		</noscript>
		<div id="header">
			<div id="navel1"><a>Главная</a></div>
			<div id="navel2"><a>О разработчике</a></div>
			<div id="navel3"><a>Услуги</a></div>
			<div id="navel4"><a>Калькулятор</a></div>
		</div>
		<div id="content">
			
		</div>
		<div id="portfolio">
			
		</div>
		<div id="cellar">
			Разработчик: <a>NordicSakura.ru</a>. Все права принадлежат: <a>NordicSakura.ru</a>.
		</div>
	</body>
</html>
  • Вопрос задан
  • 413 просмотров
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
В статусе написано "Начинающий разработчик", так вот...
Плохое начало. Верстка в принципе не сложная, даже для новичка.
Другое дело, что не хочется возиться в вашей простыне кода.
Оформите нормально в песочницу ( jsfiddle.net например )
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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