How to place 2 buttons at the bottom of a banner ?
I can do a padding: 462px, but I think that there is another solution?
Actually, I am looking for a solution with a clear code. If you know a property to solve my problem, I am interested.
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: 462px;
}
/*******************************/
/********* General CSS *********/
/*******************************/
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
transition: .3s;
color: black;
}
/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
position: relative;
height: 45px;
}
.container {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 80%;
}
.top-bar .top-bar-left {
display: flex;
}
.top-bar .text {
display: flex;
align-items: center; /* aligne les éléments sur la même ligne */
justify-content: center;
height: 50px;
margin-right: 10px;
}
.top-bar .text i {
color: #C22312;
margin-right: 5px;
}
.top-bar .text h2{
font-size: 14px;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase;
margin-right: 10px;
}
.top-bar .top-bar-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.top-bar .hyper-text {
display: flex;
align-items: center;
justify-content: center;
margin-right: 7px;
text-transform: uppercase;
}
.top-bar .hyper-text i {
color: black;
margin-right: 5px;
margin-left: 5px;
}
/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
position: relative;
}
.navbar .navbar-transparent {
background-color: #2a2a2a;
height:95px;
}
.navbar .navbar-brand {
padding: 20px 0;
}
.navbar .navbar-nav {
display: flex;
align-items: center;
justify-content: flex-end;
}
.navbar .navbar-nav a {
color: #fff;
text-transform: uppercase;
margin-left: 10px;
font-size: 14px;
border-radius: 3px;
padding: 7px 13px;
}
.navbar .navbar-nav a:hover {
background-color: #fff;
border-radius: 3px;
color: #2a2a2a;
}
.navbar .navbar-nav a.active {
background-color: #C22312;
transition: .5s;
color: #fff;
}
/*******************************/
/********** Money CSS ***********/
/*******************************/
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
height: 565px;
width: 100%;
background-size: cover; /* dézoomage */
}
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: auto 0;
}
#money .btn-money a {
color: #fff;
}
#money .btn-registrer {
background-color: #c22312;
padding: 8px 20px;
}
#money .btn-login {
background:rgba(0,0,0,0);
padding: 4px 20px;
border: 3px solid #fff;
}<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>title </title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
</head>
<body>
<!-- Top Bar Start -->
<div class="top-bar">
<div class="container">
<div class="top-bar-left">
<div class="text">
<i class="far fa-calendar"></i>
<h2>138 runnings days</h2>
</div>
<div class="text">
<i class="far fa-envelope"></i>
<h2>[email protected]</h2>
</div>
</div>
<div class="top-bar-right">
<div class="hyper-text">
<select name="language" id="language-select">
<option value="english">English</option>
<option value="french">French</option>
</select>
<a href="#"><i class="fas fa-angle-right"></i>Deposit</a>
<a href="#"><i class="fas fa-angle-right"></i>Paidout</a>
</div>
</div>
</div>
</div>
<!-- TOP Bar End -->
<!-- Nav Bar Start -->
<div class="navbar">
<div class="navbar-transparent">
<div class="container">
<div class="navbar-brand ">
<img src="https://zupimages.net/up/21/21/2bac.png" alt="Nav Image">
</div>
<div class="navbar-nav">
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Investment Plans</a>
<a href="#" class="nav-link">News</a>
<a href="#" class="nav-link">Faq</a>
<a href="#" class="nav-link">Rules</a>
<a href="#" class="nav-link">Contact Us</a>
</div>
</div>
</div>
</div>
<!-- Nav Bar End -->
<!-- Money Start -->
<div id="money">
<div class="btn-money">
<a href="#" class="btn-registrer">Register</a>
<a href="#" class="btn-login">Login</a>
</div>
</div>
<!-- Money End -->
</body>
</html>CodePudding user response：
You can do it by making the position of parent element relative :
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
height: 565px;
width: 100%;
background-size: cover; /* dézoomage */
position: relative;
}
and then you can make the position of child element absolute with bottom :0 and width : 100% :
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: auto 0;
position :absolute;
bottom : 0;
width: 100%;
}
/*******************************/
/********* General CSS *********/
/*******************************/
body {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
transition: .3s;
color: black;
}
/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
position: relative;
height: 45px;
}
.container {
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 80%;
}
.top-bar .top-bar-left {
display: flex;
}
.top-bar .text {
display: flex;
align-items: center; /* aligne les éléments sur la même ligne */
justify-content: center;
height: 50px;
margin-right: 10px;
}
.top-bar .text i {
color: #C22312;
margin-right: 5px;
}
.top-bar .text h2{
font-size: 14px;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase;
margin-right: 10px;
}
.top-bar .top-bar-right {
display: flex;
align-items: center;
justify-content: flex-end;
}
.top-bar .hyper-text {
display: flex;
align-items: center;
justify-content: center;
margin-right: 7px;
text-transform: uppercase;
}
.top-bar .hyper-text i {
color: black;
margin-right: 5px;
margin-left: 5px;
}
/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
position: relative;
}
.navbar .navbar-transparent {
background-color: #2a2a2a;
height:95px;
}
.navbar .navbar-brand {
padding: 20px 0;
}
.navbar .navbar-nav {
display: flex;
align-items: center;
justify-content: flex-end;
}
.navbar .navbar-nav a {
color: #fff;
text-transform: uppercase;
margin-left: 10px;
font-size: 14px;
border-radius: 3px;
padding: 7px 13px;
}
.navbar .navbar-nav a:hover {
background-color: #fff;
border-radius: 3px;
color: #2a2a2a;
}
.navbar .navbar-nav a.active {
background-color: #C22312;
transition: .5s;
color: #fff;
}
/*******************************/
/********** Money CSS ***********/
/*******************************/
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
height: 565px;
width: 100%;
background-size: cover; /* dézoomage */
position: relative;
}
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: auto 0;
position :absolute;
bottom : 0;
width: 100%;
}
#money .btn-money a {
color: #fff;
}
#money .btn-registrer {
background-color: #c22312;
padding: 8px 20px;
}
#money .btn-login {
background:rgba(0,0,0,0);
padding: 4px 20px;
border: 3px solid #fff;
}<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>title </title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Template Stylesheet -->
</head>
<body>
<!-- Top Bar Start -->
<div class="top-bar">
<div class="container">
<div class="top-bar-left">
<div class="text">
<i class="far fa-calendar"></i>
<h2>138 runnings days</h2>
</div>
<div class="text">
<i class="far fa-envelope"></i>
<h2>[email protected]</h2>
</div>
</div>
<div class="top-bar-right">
<div class="hyper-text">
<select name="language" id="language-select">
<option value="english">English</option>
<option value="french">French</option>
</select>
<a href="#"><i class="fas fa-angle-right"></i>Deposit</a>
<a href="#"><i class="fas fa-angle-right"></i>Paidout</a>
</div>
</div>
</div>
</div>
<!-- TOP Bar End -->
<!-- Nav Bar Start -->
<div class="navbar">
<div class="navbar-transparent">
<div class="container">
<div class="navbar-brand ">
<img src="https://zupimages.net/up/21/21/2bac.png" alt="Nav Image">
</div>
<div class="navbar-nav">
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Investment Plans</a>
<a href="#" class="nav-link">News</a>
<a href="#" class="nav-link">Faq</a>
<a href="#" class="nav-link">Rules</a>
<a href="#" class="nav-link">Contact Us</a>
</div>
</div>
</div>
</div>
<!-- Nav Bar End -->
<!-- Money Start -->
<div id="money">
<div class="btn-money">
<a href="#" class="btn-registrer">Register</a>
<a href="#" class="btn-login">Login</a>
</div>
</div>
<!-- Money End -->
</body>
</html>CodePudding user response：
Use Flexbox for this. Set the display of <div id="money"> to flex. Then you can position it with justify-content and align-items.
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
height: 565px;
width: 100%;
background-size: cover; /* dézoomage */
display: flex;
align-items: flex-end;
justify-content: center;
}
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
padding: auto 0;
}
CodePudding user response：
Using flexbox you can align the div .btn-money to the bottom of the parent element, I've added some margin to the child to avoid overflow.
The lines I've added
#money {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.btn-money {
margin-bottom: 30px;
}CodePudding user response：
You can use display: flex to position an element to the bottom.
#money .btn-money {
text-align: center;
text-transform: uppercase;
font-size: 26px;
flex: content;
align-self: end;
}
#money {
background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
background-size: auto;
height: 565px;
width: 100%;
background-size: cover;
display: flex;
}