Как сделать мини-контейнер с изображением и описанием, расположенный внизу или в конце панели навигации / заголовка? - PullRequest
Новая
       1

Как сделать мини-контейнер с изображением и описанием, расположенный внизу или в конце панели навигации / заголовка?

1 голос
/ 11 февраля 2020

Как разместить контейнер ui-thumbnails ui-content внизу, ниже, чем navbar или header, не оставляя контейнер снаружи.

Как вы можете видеть аспект дизайна, где мини-изображения и Описание этого контейнера оставляет пробел внизу на дизайне фонового изображения navbar, которое вы можете увидеть в следующем полном коде: 

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: Ubuntu;
	font-size: 15px; /*0.9rem;*/
	line-height: 1.6rem;
}
*, ::after, ::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font-family: Ubuntu;
	font-size: 1.0rem;
	line-height: 1.6rem;
	color: #363535;
	background-color:#f5f5f5;
}

/************MENU NAVEGATION******************/
.navbar{
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(https://i.imgur.com/NU3T1ef.jpg);
	background-size: cover;
	height: 800px;
	width: 100%;
	color: #333;
}
.nav-club {
	padding: 0.3em;
	height: 60px;
	width: 80%;
	background: #fff;
}

.club-site {
	display: inline-block;
}
.club-site h4 {
	color: #267788;
	font-size: 1.1rem;
	line-height: 5rem;
}
.nav {
	background: linear-gradient(45deg, rgba(58, 134, 68, 0.9), rgba(86, 184, 98, 0.72)), url(https://i.imgur.com/VTrnpmb.png);
	background-position: center bottom;
	width: 100%;
	height: 4.5rem;
	background-size: cover;
}

.logo {
	height: 6rem;
	top: 0px;
	left: 0;
	position: relative;
}

.logo img {
	max-height: 100px;
	position: absolute;
	bottom: 0;
	left: 0;
}
.navigation {
	padding-left: 17rem;
	float: left;
	color: #000;
}

.navigation ul li {
	padding: 1em;
	display: inline-block;
}


/**********GALLERY**********/
img {
	max-width: 100%;
}
.gallery {
	width: 90%;
	height: 85%;
	overflow: hidden;
}
.ui-big-images {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: -webkit-box;
	display: flex;
	/*flex-direction: column-reverse;*/
}
.ui-big-image {
	width: 100%;
	margin-right: -100%;
}
.ui-big-image img {
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center 30%;
	object-position: center 30%;
	width: 100%;
	height: 100%;
	display: block;
}
.ui-thumbnails {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #fff;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	flex-direction: row;
	-webkit-box-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	align-items: center;
	padding: 0 1rem;
	padding-top: .5rem;
	padding-right: 45%;
	padding-right: calc( 45% + .5rem);
}
.ui-thumbnail {
	display: block;
	margin-right: .5rem;
	padding: .5rem 0;
	cursor: pointer;
}
.ui-cuticle {
	background-color: #D4A12D;
	/*position: absolute;*/
	bottom: 0;
	height: .25rem;
	width: 100%;
}
.ui-thumbnail>img {
	width: auto;
}
.ui-content {
	position: absolute;
	width: 40%;
	right: 5%;
	bottom: 0;
}
.ui-articles {
	background: #493e56;
	color: white;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: stretch;
	align-items: stretch;
	overflow: hidden;
}
.ui-article {
	padding: 1.5rem;
	width: 100%;
	margin-right: -100%;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	-webkit-box-pack: center;
	justify-content: center;
}
.ui-paragraph {
	margin: 0;
	font-size: .7rem;
	line-height: 1.7;
}
.ui-nav {
	position: absolute;
	right: 0;
	bottom: 100%;
	background: inherit;
}
.ui-nav button {
	display: unset !important;
	background: #493e56;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: .5em;
	width: 2em;
	color: #FFF;
	font-family: monospace;
	-webkit-transition: inherit;
	transition: inherit;
	-webkit-transition-duration: 300ms;
	transition-duration: 300ms;
}
.ui-nav button:hover,
.ui-nav button:focus {
	background: #D4A12D;
	outline: none;
}
.ui-nav button:active {
	outline: none;
	-webkit-transform: translateY(0.25em);
	transform: translateY(0.25em);
	-webkit-transition-duration: 100ms;
	transition-duration: 100ms;
}
.ui-heading {
	margin: 0;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	font-weight: normal;
}
.ui-heading:before {
	content: 'Animator';
	font-size: .5rem;
	text-transform: uppercase;
	display: block;
	margin-bottom: .5rem;
	letter-spacing: 1px;
}
/* ---------------------------------- */
.ui-big-image {
	opacity: 0;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.ui-big-image.show {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.ui-big-image img {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}
.ui-big-image[data-active]~.ui-big-image {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.ui-big-image[data-active] {
	opacity: 1;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}
.ui-big-image[data-active] img {
	-webkit-transform: scale(1);
	transform: scale(1);
}
/* ---------------------------------- */
.ui-article {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.ui-article.show {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.ui-article:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #D4A12D;
	opacity: 1;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
	z-index: 1;
}
.ui-article.show:before {
	opacity: 0;
}
.ui-article[data-active]~.ui-article {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.ui-article[data-active] {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
}
.ui-article[data-active]:before {
	opacity: 0;
}
/* ---------------------------------- */
.ui-thumbnail>img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;
}
.ui-thumbnail:active>img {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transition-duration: 100ms;
	transition-duration: 100ms;
}
.ui-thumbnail:focus {
	outline: none;
}
.ui-cuticle {
	display: none;
}
.ui-cuticle.show {
	display: block;
}
.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}
.ui-thumbnail[data-active] .ui-cuticle {
	display: block;
}
<div id="header">
		<div class="navbar">
			<div class="container">
				<div class="row">
					<div class="maximum">

						<div class="nav clear">
							<div class="logo">
							</div>
						</div>

						<div class="gallery" data-state="0">
							<div class="ui-big-images">
								<div class="ui-big-image" data-key="0">
									<img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
								</div>
								<div class="ui-big-image" data-key="1">
									<img src="https://picsum.photos/1200/1200/?image=804" alt="" />
								</div>
								<div class="ui-big-image" data-key="2">
									<img src="https://picsum.photos/1200/1200/?image=838" alt="" />
								</div>
								<div class="ui-big-image" data-key="3">
									<img src="https://picsum.photos/1200/1200/?image=832" alt="" />
								</div>
								<div class="ui-big-image" data-key="4">
									<img src="https://picsum.photos/1200/1200/?image=836" alt="" />
								</div>
								<div class="ui-big-image" data-key="5">
									<img src="https://picsum.photos/1200/1200/?image=823" alt="" />
								</div>
							</div>
							<div class="ui-thumbnails">
								<div class="ui-thumbnail" tabindex="-1" data-key="0">
									<img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
									<div class="ui-cuticle" data-flip-key="cuticle"></div>
								</div>
								<div class="ui-thumbnail" tabindex="-1" data-key="1">
									<img src="https://picsum.photos/1200/1200/?image=804" alt="" />
									<div class="ui-cuticle" data-flip-key="cuticle"></div>
								</div>
								<div class="ui-thumbnail" tabindex="-1" data-key="2">
									<img src="https://picsum.photos/1200/1200/?image=838" alt="" />
									<div class="ui-cuticle" data-flip-key="cuticle"></div>
								</div>
								<div class="ui-thumbnail" tabindex="-1" data-key="3">
									<img src="https://picsum.photos/1200/1200/?image=832" alt="" />
									<div class="ui-cuticle" data-flip-key="cuticle"></div>
								</div>
								<div class="ui-thumbnail" tabindex="-1" data-key="4">
									<img src="https://picsum.photos/1200/1200/?image=836" alt="" />
									<div class="ui-cuticle" data-flip-key="cuticle"></div>
								</div>
								<div class="ui-thumbnail" tabindex="-1" data-key="5">
									<img src="https://picsum.photos/1200/1200/?image=823" alt="" />
									<div class="ui-cuticle" data-flip-key="cuticle"></div>
								</div>
							</div>
							<div class="ui-content">
								<nav class="ui-nav">
									<button id="prev" tabindex="-1" title="Previous">&lt;</button>
									<button id="next" tabindex="-1" title="Next">&gt;</button>
								</nav>
								<div class="ui-articles">
									<article class="ui-article" data-key="0">
										<h2 class="ui-heading">Stephen Shaw</h2>
										<p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
									</article>
									<article class="ui-article" data-key="1">
										<h2 class="ui-heading">David Khourshid</h2>
										<p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
									</article>
									<article class="ui-article" data-key="2">
										<h2 class="ui-heading">Coding Compadre</h2>
										<p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
									</article>
									<article class="ui-article" data-key="3">
										<h2 class="ui-heading">Boolean Buddy</h2>
										<p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
									</article>
									<article class="ui-article" data-key="4">
										<h2 class="ui-heading">Animation Amigo</h2>
										<p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
									</article>
									<article class="ui-article" data-key="5">
										<h2 class="ui-heading">Keyframe Companion</h2>
										<p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
									</article>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

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

Что я хочу сделать Достигните, чтобы показать контейнер мини изображений и, описание ui-thumbnails ui-content, которые всегда показываются внизу в конце, без переполнения от navbar или header, например:

enter image description here

А в ответ

enter image description here

1 Ответ

0 голосов
/ 11 февраля 2020

Я не уверен, каков будет ваш результат. Если я правильно понял, вы пытаетесь вывести информацию с мини-изображениями на том же уровне в конце вашего героя img. Итак, на данный момент у вас есть ui-thumbnails и ui-content как два разных элемента, расположенных абсолютно по отношению к вашему герою img. Я бы положил их обоих в обёртку div, которая затем должна установить абсолютную позицию для вашего героя img. так что ui-thumbnails и ui-content находятся внутри одного и того же div. Затем дайте ui-thumbails и ui-content желаемую ширину. А также добавьте максимальную высоту к вашим изображениям. Таким образом, ваша информация должна быть на одном уровне, и вы можете отрегулировать положение, захватывая div обертки.

Чтобы это переполняло вашего героя, вы должны сделать фон div-оболочки прозрачным и масштабировать свойство bottom вверх или вниз при проверке, где бы вы ни захотели.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...