#html #css
#HTML #css
Вопрос:
Проверьте эти фотографии: 1 2 3 и то же самое относится к нижнему колонтитулу
это мой html, DIV, о котором я говорю, содержит информацию о классе. Если я его удалю, все будет в порядке. Но я не могу понять, как поместить его на страницу таким образом, чтобы панель навигации и нижний колонтитул не занимали пробел справа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="navbar-brand">
<a href="#"><img class="logo" src="img/logo.png" alt="logo nordic barista cup"></a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
<div class="d-lg-flex flex-column align-items-end ml-md-auto form-search pt-1">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<input id="search" type="text" class="form-control" placeholder="Search">
</div>
<div class="reponsive-links">
<ul class="navbar-nav ml-auto" id="navbar-collapse">
<li class="nav-item">
<a class="nav-link pt-0" href="#">ABOUT NBC</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" href="#">2011 EVENT</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" href="#">NORDIC ROASTER</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" href="#">RESULTS</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" href="#">LINKS</a>
</li>
<li class="nav-item">
<a class="nav-link pt-0" href="#">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- cover -->
<section class="cover">
<div class="coffe-images jumbotron m-0 rounded-0">
</div>
<div class="social d-flex justify-content-aound p-4">
<div class="quote">
<h3><q>To create an environment in which knowledge about coffee and its sphere can be obtained</q></h3>
</div>
<div class="col-md-4 social-links d-flex justify-content-center align-items-center">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-meetup"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
</div>
</div>
</section>
<!-- articles -->
<section class="container-fluid d-flex justify-content-between section-articles p-0">
<div class="articles col-lg-8 col-md-12 pt-4">
<div class="card-article mb-2">
<img src="img/kbh.jpg">
<div class="card-article-infos">
<h4>Wonderful Copenhagen 2011</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas vitae scel<span id="dots1">...</span><span id="more1" style='display:none'>I hope I get the internsip. Maecenas nisl est,
ultrices nec congue eget, auctor vitae massa.Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta.</span></p>
<div class="d-flex justify-content-end align-items-end">
<button onclick="myFunction(1)" id="myBtn1">Read more</button>
</div>
</div>
</div>
<div class="card-article mb-2">
<img src="img/kbh.jpg">
<div class="card-article-infos">
<h4>Wonderful Copenhagen 2011</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem
egestas vitae scel<span id="dots2">...</span><span id="more2" style='display:none'>I hope I get the internsip. Maecenas nisl est,
ultrices nec congue eget, auctor vitae massa.Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor
porta.</span></p>
<div class="d-flex justify-content-end align-items-end">
<button onclick="myFunction(2)" id="myBtn2">Read more</button>
</div>
</div>
</div>
<div class="card-article mb-2">
<div class="card-image"><img src="img/kbh.jpg"></div>
<div class="card-article-infos">
<h4>Wonderful Copenhagen 2011</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem
egestas vitae scel<span id="dots3">...</span><span id="more3" style='display:none'>I hope I get the internsip. Maecenas nisl est,
ultrices nec congue eget, auctor vitae massa.Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor
porta.</span></p>
<div class="d-flex justify-content-end align-items-end">
<button onclick="myFunction(3)" id="myBtn3">Read more</button>
</div>
</div>
</div>
</div>
<div class="information col-md-4 col-s-12 pt-4">
<div class="single-info">
<h3>NBC Shop</h3>
<p>Your shopping cart is empty <br><a href="url">Visit the shop</a></p>
</div>
<div class="single-info">
<h3>Next Event</h3>
<p>NORDIC BARISTA CUP 2011 <br> Copenhagen, Denmark <br> Dates: 3<sup>rd</sup> - 27<sup>th</sup> August 2011 <br> Theme: SENSORY</p>
</div>
<div class="single-info">
<h3>Scoreboard</h3>
<p>List of winner from the past years</p>
<p>2011 - ? <br> 2010 - Sweden <br> 2009 - Denmark <br> 2008 - Norway <br> 2007 - Sweden <br> 2006 - Norway <br> 2005 - Denmark </p>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container footer">
<div class="row d-flex justify-content-around">
<div class="col-md-4 segment-one py-3">
<h3>About Nordic Barista Cup</h3>
<p>The vision within the Nordic Barista Cup is:</p>
<p><q>To create an environment in which knowledge about coffee and its sphere can be obtained</q></p>
<p>'..create an environment..'<br>Combined with personally absorption having the opportunity to see and experience
countries,
people, traditions etc. will always serve as a source of inspiration in our daily work. The organization behind the
Nordic Barista Cup see it as its main purpose
to be a part of creating this forum in which people can meet, bond and achieve further knowledge </p>
</div>
<div class="col-md-4 segment-two py-3">
<h3>NBC Flickr Stream</h3>
<div class="container pl-0">
<div class="row p-0 m-0">
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
</div>
<div class="row p-0 m-0">
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
</div>
<div class="row p-0 m-0">
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
<div class="coffee-box m-0 p-1"> <img src="img/coffee.jpg" alt="cofee grid image"></div>
</div>
</div>
</div>
<div class="col-md-4 segment-three py-3">
<h3>Contact</h3>
<p><strong>Nordic Barista Cup</strong></p>
<p>Amagertorv 13, 1160 Copenhagen K <br> 45 33 12 04 28 <br> CVR: 11427693 <br> Email: bbrend@nordicbaristacup.com</p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-meetup"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="js/scripts.js" ></script>
</body>
</html>
мой CSS для панели навигации:
.navbar {
background-color: #111111;
color: white;
}
.logo {
width: 330px;
height: auto;
}
.has-search .form-control {
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
.has-search input {
border-radius: 20px;
}
@media (min-width: 320px) and (max-width: 376px) {
.logo{
width: 270px;
}
.navbar-toggler-icon {
font-size: 0.8em;
}
.has-search .form-control{
display: flex;
justify-content: flex-start;
margin-top: 0.5rem;
height: 2.1rem;
border-radius: 50px;
padding-left: 2.375rem;
}
.has-search .form-control-feedback {
padding-left: 0.4em;
}
}
@media (max-width: 320px) {
.logo{
width: 220px;
}
}
МОЙ CSS для основного:
@import "navbar.css";
@import "footer.css";
/* cover image section */
.jumbotron {
background-image: url("../img/coffee1.jpg");
background-size: cover;
height: 80vh;
background-position: center;
}
.cover {
background-color: #111111;
color: #646668f3;
}
.cover h3 q {
font-size: 1.4rem;
font-weight: 500;
}
.social-links a {
background-color: #303234;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
display: inline-block;
margin: 0.2em;
}
.social-links a i {
color: #bab8b6;
font-size: 1.3em;
padding: 0.5em 0.5em;
}
/* articles section */
.information {
background: linear-gradient(rgb(228, 225, 224), white);
}
.card-article .card-article-infos {
padding: 16px;
}
#more {display: none;
}
.card-article {
overflow: hidden;
background: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
display: flex;
align-items: flex-start;
}
.card-article img {
height: 100%;
width: 200px;
object-fit: cover;
}
.card-article p {
line-height: 1.4;
}
.card-article{
position: relative;
}
.card-article >div>div{
position:absolute;
bottom: 20px;
right: 20px;
}
@media (min-width: 320px) and (max-width: 376px) {
.social .quote h3 q {
font-size: 1.250rem;
text-align: center;
}
.section-articles, .social {
display: flex;
flex-direction: column;
}
.social-links {
padding-top: 1rem ;
}
@media (max-width: 320px) {
.social .quote h3 q {
font-size: 1.15rem
}
}
}
МОЙ CSS для нижнего колонтитула:
footer {
background-color: #111111;
color: white;
}
.segment-one p, .segment-three p {
color: #646668f3;
}
.segment-one q {
color: #bab8b6;
}
.segment-two img {
width: 100%;
height: auto;
}
.segment-three strong {
color: #bab8b6;
}
.segment-three a {
background-color: #303234;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
display: inline-block;
}
.segment-three a i {
color: #bab8b6;
font-size: 1.3em;
padding: 0.5em 0.5em;
}
@media (max-width: 992px){
.footer p {
font-size: 0.5rem;
}
.footer h3 {
font-size: 1.3rem;
}
.segment-two img {
width: 50px;
height: 50px;
}
.segment-three a {
width: 1.875em;
height: 1.875em;
display: inline-block;
}
.segment-three a i {
color: #bab8b6;
font-size: 1.1em;
padding: 6px 6px;
}
}
Комментарии:
1. Я не вижу пробелов, можете ли вы опубликовать изображение или уточнить его подробнее?
2. Я добавил фотографию по этому вопросу
3. похоже, что информация div не включена в страницу
4. другими словами, несмотря на то, что div (информация) находится внутри тега раздела, на веб-странице они отображаются снаружи и рядом с элементом раздела?
5. попробуйте overflow-x: hidden; для тела.