Как перемещать изображение героя под навигацией?
Я пытаюсь расширить панель навигации, но она перекрывает изображение героя под ним:Текущее представление
Моя цель - полностью разместить панель навигации на голубом фоне. Вот мой текущий css навигации:
nav { text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav ul { list-style-type: none;
padding-left: 0;
border-top: 1px solid #EEEEEE;
background-color: #0170C0;
}
nav li { text-align: center;
padding-top: .5em;
padding-bottom: .5em;
}
nav a { text-decoration: none;
font-weight: bold;
}
Вот мой CSS для изображения героя:
#indexhero { height: 350px;
background-image: url(pictures/KIDS.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
Вот HTML-код страницы:
<div id="base">
<header>
<h1><a href="index.html">Introduction of Mac Miller</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="swimming.html">Swimming</a></li>
<li><a href="circles.html">Circles</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<br>
<div id="indexhero">
</div>
<div>
<piccaption> Mac Miller front and Center of his K.I.D.S. mixtape </piccaption>
</piccaption>
</div>
Если вам это нужно, вот "базовая" обертка (содержит обертку для навигации и изображения героя)
#base { background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 90%;
min-width: 400px;
padding-top: 0.2em;
box-shadow: 5px 5px 5px #A9BACE; }
Моя цель - получить что-то вроде этого:Пример конечной цели
Любая помощь приветствуется!PS Рабочий минимальный пример ниже. 1-й пример nav inline. Второй пример: навигация - это столбец (хотите сохранить встроенный код для экранов рабочего стола, хотите столбец для мобильных экранов, однако он выходит за пределы основного изображения), пытаясь получить мобильное представление для «Пример конечной цели», показанного выше.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swimming In Circles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box;
margin: 0; }
#indexhero { height: 350px;
background-image: url(pictures/KIDS.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#base { margin: auto;
width: 90%; }
nav { text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav a { text-decoration: none; }
nav ul { list-style-type: none;
padding-top:0.9em;
padding-bottom:0.9em; }
li { display: inline;
padding: 3em; }
</style>
</head>
<body>
<div id="base">
<header>
<h1><a href="index.html">Introduction of Mac Miller</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="swimming.html">Swimming</a></li>
<li><a href="circles.html">Circles</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<br>
<div id="indexhero">
</div>
<div>
<piccaption> Mac Miller front and Center of his K.I.D.S. mixtape </piccaption>
</piccaption>
</div>
<br>
<main>
<p>This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text</p>
</main>
</body>
Отображение столбца (не работает)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swimming In Circles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box;
margin: 0; }
#indexhero { height: 350px;
background-image: url(pictures/KIDS.jpg);
background-size: 100% 100%;
background-repeat: no-repeat; }
#base { margin: auto;
width: 90%; }
nav { text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav{ text-align: center;
background-color: #0170C0;
height: 50px;
font-weight: bold; }
nav ul { list-style-type: none;
padding-left: 0;
border-top: 1px solid #EEEEEE;
background-color: #0170C0;
}
nav li { text-align: center;
padding-top: .5em;
padding-bottom: .5em;
}
nav a { text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<div id="base">
<header>
<h1><a href="index.html">Introduction of Mac Miller</a></h1>
</header>
<nav>
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="swimming.html">Swimming</a></li>
<li><a href="circles.html">Circles</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
<br>
<div id="indexhero">
</div>
<div>
<piccaption> Mac Miller front and Center of his K.I.D.S. mixtape </piccaption>
</piccaption>
</div>
<br>
<main>
<p>This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text
This is textThis is textThis is textThis is textThis is text</p>
</main>
</body>