I need to stretch the borders of list elements all the way to the edge of the screen. Bellow is a picture of the project, the lists are in the yellow navigation bar. I am only allowed to use HTML, CSS and bootstrap. I would appreciate your help.
Thanks.[project]
#header-nav {
background-color: #DEB887;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 0rem;
padding-bottom: 0.5rem;
}
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
text-align: center;
color: blue;
font-family: cursive;
}
h4 {
text-align:center;
font-family: sans-serif;
padding-top: 2vw;
padding-bottom: 4vw;
}
h5 {
text-align: center;
}
#Chicken-tile {
background-color: #8FBC8F;
width: 100%;
margin-top: 5vw;
}
#Beef-tile {
background-color: lightpink;
width: 100%;
margin-top: 5vw;
}
#Sushi-tile {
background-color: blanchedalmond;
width: 100%;
margin-top: 5vw;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Module 3 Solution</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<div class="container-fluid">
<a class="navbar-brand fw-bold" c href="#">Food, LCC</a>
<button class="navbar-toggler d-lg-none d-md-none d-sm-none border-dark mb-1 mt-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-lg-0">
<li class="nav-item d-lg-none d-md-none text-center fw-bold border border-dark">
<a class="nav-link" href="#">Chicken</a>
<li class="nav-item d-lg-none d-md-none text-center fw-bold border border-top-0 border border-dark">
<a class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item d-lg-none d-lg-md-none text-center fw-bold border-top-0 border border-dark">
<a class="nav-link" href="#">Sushi</a>
</li>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</nav>
</header>
</div>
<h4>Our Menu</h4>
<div class="container">
<div id="home-tiles" class="row g-1">
<div id="Chicken-tile">
<h5>Chicken </h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
<div id="Beef-tile">
<h5>Beef</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
<div id="Sushi-tile">
<h5>Sushi</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I need to stretch the borders of list elements all the way to the edge of the screen. Bellow is a picture of the project, the lists are in the yellow navigation bar. I am only allowed to use HTML, CSS and bootstrap. I would appreciate your help.
Thanks.[project]
Related
I am facing some issue with Bootstrap navbar. I am using Bootstrap v5.0.
Whenever the bootstrap navbar expands, the contents below it is also going down. I don't want that. I want the content not to go down.
I set the position: fixed but it didn't work and behaved abnormally. I want the nav to be fixed at the top.
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
/* .navbar {
position: fixed;
} */
#header-texts {
height: 90vh;
align-items: center;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<div class="sec-2">
architecto similique rerum, laborum impedit pariatur repudiandae iusto ducimus soluta inventore quibusdam excepturi. Hic similique autem iure distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis, numquam enim deleniti a, pariatur laboriosam fugiat dignissimos perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi. Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores, omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit explicabo delectus quos excepturi, aut nam incidunt eius voluptas non harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla, temporibus incidunt alias commodi inventore error eligendi libero ea atque.
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
To fix the header you can simply use
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
But in that case your main content will go beneath the header, to fix that add a top margin of YOUR_HEADER_HEIGHT to the main content, something like this
#header-texts {
margin-top: 60px; // your header height
height: 90vh;
align-items: center;
}
I have made some changes to you code. What I have done is wrapping your nav component in a navbar-holder class and adding necessary styles to the class which you can find in the code. Another suggestion from my side would be whenever you are going to scroll you should add another style to the navbar like adding a dark background because currently your navabr background is transparent and it would not look good when scrolled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./images/favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
.navbar-holder {
position: fixed;
top: 0;
width: 100%;
}
.with-bg {
background: #000000 !important;
}
header {
background: linear-gradient(
rgba(45, 44, 48, 0.753),
rgba(45, 44, 48, 0.753)
),
url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
/* .navbar {
position: fixed;
} */
#header-texts {
height: 90vh;
align-items: center;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="navbar-holder" id="navigation-holder">
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
id="navigation"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNavAltMarkup"
>
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col"></div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">
YOUR FAVORITE SOURCE OF FREE<br />BOOTSTRAP THEMES
</p>
<hr
class="mb-4"
style="
width: 5%;
margin: auto;
height: 5px;
border: none;
color: #ff0000;
background-color: #ff0000;
opacity: 1;
"
/>
<p id="header-texts-2">
Start Bootstrap can help you build better websites using the
Bootstrap<br />framework! Just download a theme and start
customizing, no strings attached!
</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<div class="sec-2">
architecto similique rerum, laborum impedit pariatur repudiandae iusto
ducimus soluta inventore quibusdam excepturi. Hic similique autem iure
distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo
cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam
ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem
velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae
quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius
laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum
est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis,
numquam enim deleniti a, pariatur laboriosam fugiat dignissimos
perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero
ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia
laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo
nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio
aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci
ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque
blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi.
Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium
aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores,
omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod
distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione
non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit
explicabo delectus quos excepturi, aut nam incidunt eius voluptas non
harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla,
temporibus incidunt alias commodi inventore error eligendi libero ea
atque.
</div>
<!-- ========================= JavaScript ========================= -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<script>
document.addEventListener("scroll", () => {
const { scrollTop } = document.documentElement;
const nav = document.querySelector("#navigation-holder");
if (scrollTop === 0) {
nav.classList.remove("with-bg");
} else {
nav.classList.add("with-bg");
}
});
</script>
</body>
</html>
Pretty confused - I am referring to the .grid2 section I've tried changing all of the classes and making them more or less specific Could this be to do with the grid wrapper on the outside? Strangely the section is going recognizing that there is a 3 column grid but not recognizing the rows (even when i define them) here is the code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Powerwashing</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul>
<li><a class="a" href="#">About us</a></li>
<li><a class="s" href="#">Services</a></li>
<li> <a class="l"href="#"></a><img src="wash.png" width=100px alt="Powerwashing services">
</a>
</li>
<li><a class="w" href="#">Why us</a></li>
<li><a class="c" href="#">Contact us</a></li>
</ul>
</div>
<div class="grid2">
<section class="se">
<h2>Services</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates minus molestias quaerat laudantium. Ab nihil eius velit nisi tempora quibusdam illo animi esse provident corporis fuga, minima, numquam obcaecati ut atque molestias cum. Tenetur magni adipisci porro eum mollitia, dolor dolorem repellendus aspernatur quibusdam architecto nobis, ab cum, aliquid nulla?
</p>
</section>
<section class="ab">
<h3>About us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eligendi, dolor obcaecati. Fuga corporis aliquid possimus, deserunt earum ut quod, quia maxime, optio dolorem laudantium soluta quae omnis pariatur iusto natus veniam rerum labore tenetur veritatis eius deleniti. Qui, tempora.
</p>
</section>
<section class="wh">
<h3>Why us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo exercitationem maiores excepturi vero asperiores, quaerat necessitatibus. Aspernatur, veniam voluptas earum esse rerum, expedita hic in quam alias sunt laudantium quisquam ducimus iste sit iusto quaerat labore molestias saepe quo.
</p>
</section>
</div>
</div>
</body>
</html>
CSS:
*{
margin:0px;
padding:0px;
}
.wrapper{
display: grid;
}
.header ul{
list-style-type: none;
background-color: green;
padding:20px;
text-align: center;
display:grid;
grid-template-columns: repeat(5,1fr);
grid-template-areas:
"a s l w c";
align-items: center;
}
.header a{
background-color: red;
font-size: 20px;
padding:5px;
}
a .a{
grid-area:a;
}
a .s{
grid-area:s;
}
a .l{
grid-area: l;
}
a .w{
grid-area:w;
}
a .c{
grid-area:c;
}
.grid2{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"se wh wh"
"se ab ab";
}
section .se h3 p{
grid-area: se;
}
section .ab h3{
grid-area: ab;
}
section .wh h3{
grid-area: wh;
}
So it seems that its because i was calling the section tags and each section had a seperate section tag, Im not sure why this wouldnt work though?
I am trying to program a website with HTML. This works very well, but I want the footer to be at the bottom of the website!
footer {
background-color: #F2F2F2;
border: 1px solid #DEDCD9;
border-radius: 5px;
clear: both;
}
no error
Here is a 2-column layout with the footer always at the bottom, also using Bootstrap 4 grid for responsiveness:
#wrapper {
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="wrapper" class="d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-9">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quas quae placeat non, eligendi odio, sit animi corporis unde fugiat ex est reprehenderit voluptas facilis quo amet nisi consequuntur perferendis.</p>
<p class="text-justify">Eius reiciendis, modi nam magni, vel et, labore sit perspiciatis obcaecati illo aspernatur laboriosam, sed veritatis nisi deleniti quae alias nesciunt. Et possimus, reprehenderit voluptatibus officiis consequatur illo architecto magnam!</p>
<p class="text-justify">Qui tempora deserunt, corrupti soluta obcaecati ab fugiat consectetur? Asperiores ullam aliquid recusandae doloribus voluptate ipsa. Reprehenderit aspernatur est dolore ipsum voluptatum doloribus atque suscipit. Quod voluptatum, facere temporibus
iure.</p>
<p class="text-justify">Ipsum quasi, iste fugit doloribus accusantium natus provident, dolorum molestiae alias. Quo earum explicabo corporis assumenda autem ratione ea corrupti tenetur, fugit esse doloremque, laborum, ab iste eum. Mollitia, consectetur!</p>
<p class="text-justify">Eligendi dolores nisi quibusdam, officia earum neque harum iure reprehenderit voluptates, veritatis quaerat deserunt ratione porro itaque rem voluptatum minima similique temporibus unde! Quaerat laborum ullam optio sequi quae quidem!</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-3 mb-3">
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</div>
</div>
<div class="footer mt-auto text-center p-2 bg-light">
© Lorem ipsum dolor sit amet
</div>
</div>
Hope it helps.
I have to design a "Rent A Flat" website as a school assignment using Dreamweaver and am having trouble finding my error. I added in a hover dropdown menu to a parallax design but it left all this white space next to the menu and put the image underneath the menu. Below is the code for my website. I don't know what to do anymore. I tried everything I could think of.
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #06106E;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {
display: inline-block;
}
.dropdown:hover .dropbtn {
background-color: #06106E;
}
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}
.pimg1{
background-image:url('../Renting A House/Homepage/Image/pexels-photo-932095.jpeg');
min-height:100%;
}
.pimg2{
background-image:url('../Renting A House/Homepage/Image/agenda-appointment-business-1020323.jpg');
min-height:400px;
}
.pimg3{
background-image:url('../Renting A House/Homepage/Image/pexels-photo-1061576.jpeg');
min-height:400px;
}
.pimg4{
background-image:url('../Renting A House/Homepage/Image/Use instead of checkout.jpeg');
min-height:400px;
}
.pimg5{
background-image:url('../Renting A House/Homepage/Image/pexels-photo-276641.jpeg');
min-height:400px;
}
.pimg6{
background-image:url('../Renting A House/Homepage/Image/stairs-home-loft-lifestyle.jpg');
min-height:100%;
}
.section{
text-align:center;
padding:50px 80px;
}
.section-light{
background-color:#000040;
color:#ddd;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}
.ptext .border{
background-color:#778899;
color:#000;
padding:20px;
}
.ptext .border.trans{
background-color:#C0C0C0;
}
#media(max-width:568px){
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6{
background-attachment:scroll;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Renting Your First Flat</title>
<link href="../Website Style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="../house-key.png">
<div>Icons made by Roundicons from www.flaticon.com is licensed by CC 3.0 BY</div>
</head>
<body>
<div class="dropdown">
<button class="dropbtn"><input type="image" width="30px" height="30px" src="../Burger Dropdown Icon Menu.png" class="burger-menu"/></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="pimg1">
<div class="ptext">
<span class="border">
Renting A Flat
</span>
</div>
</div>
<section class="section section-light">
<h2>Introduction?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eveniet dicta saepe mollitia nobis. Deleniti ratione dolor quas tempora quasi necessitatibus ipsa iusto voluptatibus sed veniam cum labore, excepturi reprehenderit odit accusamus dignissimos in modi culpa delectus, velit saepe repellat distinctio atque magnam quis. Accusantium enim voluptate quo delectus eveniet alias tempore temporibus maiores. Numquam, nostrum omnis vero dicta laboriosam ratione nisi pariatur veniam officiis quaerat dignissimos, sint cum obcaecati, sunt accusantium. Alias suscipit repellat mollitia, laboriosam, doloribus totam numquam sapiente quidem itaque eveniet iure sunt earum obcaecati vel! Vero quod unde officiis sit in facilis sed praesentium rem molestias.
</p>
<p>
About Us
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Money
</span>
</div>
</div>
<section class="section section-dark">
<h2>Rent, Afford to Leave, Buy Furniture, Insurance, Flatmate to Share Costs</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo perferendis, quo eaque facilis architecto aut qui esse, eveniet, magnam ratione voluptatum aspernatur. Facere nemo ut aut alias commodi consequuntur ipsa sed eveniet. Accusamus animi tempore obcaecati blanditiis veniam, quaerat perferendis inventore exercitationem expedita, dolorem dolores quod cupiditate laborum incidunt autem distinctio, quisquam labore explicabo delectus molestiae? Delectus aperiam quis quae at consequatur iusto corrupti! Voluptatibus, fuga. Fugiat, numquam, rerum! Porro aliquam temporibus adipisci facere harum labore.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
The Ins And Outs
</span>
</div>
</div>
<section class="section section-dark">
<h2>What Do You Need To Know?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ab maiores, dicta porro, omnis commodi corrupti quisquam nobis odit amet provident in quos libero deserunt non aut nesciunt ducimus laboriosam architecto ipsam quod repellat, incidunt animi sapiente cumque. Cumque, tempora expedita ab laborum. Possimus voluptatem dolorum ea magni facere, quod, atque vitae! Nemo consequuntur laboriosam maiores soluta consequatur culpa nulla maxime impedit inventore laborum voluptatibus eveniet molestiae quaerat suscipit adipisci repudiandae voluptatem iusto deserunt error architecto, ipsam nihil accusantium, cumque est vero. Impedit facilis aperiam hic eius voluptate rem atque numquam consequuntur, earum suscipit vero asperiores voluptates doloremque, laudantium temporibus.
</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border trans">
Availability
</span>
</div>
</div>
<section class="section section-dark">
<h2>What To Look For/Available Flats?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam quidem laudantium animi aut dolor distinctio cumque voluptate placeat iste esse eligendi, tempora accusantium repellat provident, mollitia cupiditate incidunt quasi perferendis alias laborum suscipit facere adipisci et facilis fugit. Quo sunt eos nam nulla nihil voluptates eius blanditiis consequuntur fuga, officia quaerat repellat, qui non repudiandae alias quod quis nostrum porro quia suscipit mollitia. Natus repudiandae fugiat sed enim vel repellat eligendi aperiam dolores necessitatibus suscipit iste dicta iusto dolorum quia, rerum, impedit, eum facilis? Quos vel consequuntur consectetur debitis, sed corporis quibusdam molestiae id quas. Dolore corporis aliquam a optio!
</p>
</section>
<div class="pimg5">
<div class="ptext">
<span class="border trans">
The Makings of a Flat
</span>
</div>
</div>
<section class="section section-dark">
<h2>Furnishing Your Flat?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis beatae reprehenderit, voluptatibus molestias odio doloribus minima vitae amet temporibus ab voluptatum adipisci ut nemo at possimus voluptates quae sit ea accusantium quidem quibusdam velit error asperiores ipsam, quam. Quia, iure at, sequi sit earum vero cupiditate est hic laboriosam atque voluptatem tempora modi enim fugiat, esse dolorem incidunt deserunt quidem eveniet, odio omnis. Officia iusto quod, enim soluta eos optio commodi ab. Quasi accusamus porro explicabo, a ducimus, amet labore alias atque consequatur molestiae, eius temporibus adipisci assumenda voluptas minus perspiciatis? Id rem quisquam explicabo fuga esse ipsum provident quo!
</p>
</section>
<div class="pimg6">
<div class="ptext">
<span class="border">
Real Estate
</span>
</div>
</div>
<div>Icons made by Cole Bemis from www.flaticon.com is licensed by CC 3.0 BY</div>
</body>
</html>
here is my try I am not sure is that what you want. Any more changes let me know. I have moved menubox on top of the background image.
I wrapped the .dropdown and .pimg1 with a div
<div class="header-wrapper">
<div class="dropdown">
<button class="dropbtn"><input type="image" width="30px" height="30px" src="http://placeholder.pics/svg/30" class="burger-menu"/></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="pimg1">
<div class="ptext">
<span class="border">
Renting A Flat
</span>
</div>
</div>
</div>
css
.header-wrapper{
clear: both;
position: relative;
}
.dropdown {
position: absolute;
display: inline-block;
z-index: 2;
}
live link: https://codepen.io/anon/pen/QxLReY?editors=1100
My bootstrap navbar-bottom covers content when I need to scroll the page. I've already tried to set the padding-bottom to 65px of the body but that didn't help.
My HTML
<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></li>
</ul>
</div> <!-- End container -->
</nav>
My CSS
body {
padding-bottom: 65px;
padding-top: 65px;
}
Could anyone help me out please :D Thanks in advance.
The existing answer doesn't work, but it is close. Instead of adding the margin to the html element or the body element (which include the footer and the overlapped content), it's necessary to add the margin to the element that contains the content, at the same level as the footer; the .main-content div.
.main-content {margin-bottom: 65px}
p {padding:2em; border: 1px dashed #CCC}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cotainer-fluid main-content">
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p>
<p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p>
<p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p>
<p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p>
<p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p>
</div>
</div>
<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></li>
</ul>
</div> <!-- End container -->
</nav>
Add bottom margin to HTML instead of padding to body. This will prevent the footer from covering the content when scrolling to end of page. If you don't want the footer to cover at all then you'll have to use another approach instead of a fixed position.
html { margin-bottom: 65px }
jsFiddle: https://jsfiddle.net/azizn/b7Lq56kt/
html {margin-bottom: 65px}
p {padding:2em; border: 1px dashed #CCC}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cotainer-fluid">
<div class="container">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas beatae dolor consectetur ipsum minus impedit eaque reiciendis, quos vel ea eos? Inventore obcaecati laudantium incidunt quos ipsam. Optio, ipsa, tempora.</p>
<p>Maiores sed ab excepturi nobis exercitationem repudiandae dolores doloremque omnis. Reprehenderit placeat consequatur perferendis, aspernatur impedit eveniet odio ipsum, dignissimos libero qui omnis cum nihil non suscipit debitis repellendus autem.</p>
<p>Ipsum excepturi possimus pariatur enim mollitia repellat assumenda consequuntur. Maxime, amet, perspiciatis! Omnis praesentium sequi illum quisquam, perferendis doloremque possimus nihil facilis ipsum nam amet eos neque voluptates, dignissimos corrupti.</p>
<p>Reprehenderit possimus autem itaque eligendi inventore modi, temporibus consequatur tempore a magni! Sed soluta, minima quidem molestias animi accusamus voluptas nobis vel libero, natus voluptatum tempora magnam, labore, repellendus iste!</p>
<p>Eaque rem earum tenetur debitis consequuntur voluptate nobis numquam possimus temporibus, voluptas unde adipisci quisquam delectus corporis aliquam ut itaque! Rem minus accusamus ex, est sed molestias ipsa quae aspernatur.</p>
</div>
</div>
<!-- FOOTER -->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<ul class="nav navbar-nav">
<li><i class="fa fa-facebook-official" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true" id="socialMedia"></i></li>
<li><i class="fa fa-youtube-square" aria-hidden="true" id="socialMedia"></i></li>
</ul>
</div> <!-- End container -->
</nav>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-bottom">
...
</nav>
</div>
.container {
padding-top: 65px;
}
Wrap the nav with class .fixed-bottom with a .container <div> and give the parent <div> .padding-top.