I am trying to create a footer at the end of this website but for some reason it appears above the products :
And when I change the browser size :
But I want a footer like this :
Here is my code :
HTML :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
</head>
<body style="background-color: #36454F;">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
<div class="footer">
<h3>hello</h3>
</div>
</body>
</html>
CSS :
.card {
max-width: 400px;
margin: 0auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
top: 611px;
margin-bottom: 33px;
margin-right: 33px;
justify-content: center;
float: left;
}
.footer {
position: relative;
height: 130px;
clear: both;
background-color: red;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: palevioletred;
color: white;
margin: 0;
font-size: 17px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size:20px;
}
.card img {
height: 300px;
width: 300px;
}
}
I tried to set a negative bottom property to push it to the end :
.footer {
position: relative;
bottom: -674px;
height: 130px;
clear: both;
background-color: red;
}
But it didn't help. How can i solve the problem?
To set the footer to the bottom of the page, you need to use this CSS:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf; /* Set your own background */
}
If you want it to stay at the bottom of the page and stretch along the bottom, I'd do something like this with the CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: (whatever you want);
color: (color of the text, whatever you want);
text-align: center; /*unless you want the text aligned differently*/
}
Also look up how to use the grid-container if you want the items of the footer in rows like the example you gave.
You need the footer tag to do its job!
Read more about the footer tag here:
https://www.geeksforgeeks.org/html5-footer-tag/
Reference: https://code-boxx.com/keep-html-footers-at-bottom/
The easy ways to keep a footer at the bottom with modern CSS are:
Use footer { position: fixed} or footer { position: sticky } to
keep the at the bottom.
Use a flexbox layout that "stretches" the body section, keep the
footer at the bottom.
body{ display: flex; flex-direction: column; }
main{ flex-grow: 1; }
Lastly, use a grid layout to achieve the same "stretch body
section".
<header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>
html, body { height: 100%;}
body { disply: grid; grid-template-rows: auto 1fr auto; }
Related
I want to center the text "name" horizontally and vertically inside the div "firstquad". I want the div to have 100% width and 25% height. But the div has much more than 100% width. For the text, I have set the top and left as 50%. The text should be centered and the div should fit the page horizontally but its like this. Any help?
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
text-align: center;
background-color: blue;
}
#name {
position: relative;
top: 50%;
left: 50%;
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Both div and h1 are block level elements by themselves.
Block level elements behave in such a way that
they create a line break before and after themselves
they grab as much horizontal space as they can get
Which means that with <div><h1></h1></div> you have a div that grabs as much horizontal space as available (full page width). Inside it, the h1 behaves the same, consuming all horizontal space that the surrounding div allows.
Now with position: relative; left: 50%; you do not change the width of the h1 - you simply change the position, where its rendering starts. Obviously, this leads to the h1 moving partly outside the div. Add borders so you understand:
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; }
<div><h1>Test</h1></div>
Now move the h1 (only slightly, so the effect is visible better):
body { margin: 30px; }
div { border: 2px dotted grey; }
h1 { border: 2px dashed blue; position: relative; left: 20px; }
<div><h1>Test</h1></div>
css:
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 25%;
top: 0%;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
}
#name {
color: white;
}
body {
margin: 0%;
height: 100%;
background-color: cornsilk;
}
#firstquad {
height: 25%;
background-color: blue;
text-align: center;
}
#name {
color: white;
margin: 0;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
Is this what you are looking for?
Just change #name to #name {
color: white;
}
body {
padding: 0%;
margin: 0%;
height: 300%;
width: 100%;
background-color: cornsilk;
}
#firstquad {
position: relative;
width: 100%;
height: 50%;
text-align: center;
background-color: blue !important;
}
#name {
color: white;
}
<div id="firstquad">
<h1 id="name">ASEF DIAN</h1>
</div>
I'm new to CSS and I'm trying to place some dots at position 0,0 of it's parent div, but when I do so according to the below code, the dots disappear.
* CSS Code: *
.timeslot{
background-color: green;
border-top: solid gray;
}
.timeslot.selected{
border: #cc0000;
}
.timeslot.selected .dot{
background-color: #cc0000;
}
.timeslot .dot{
background-color: gray;
}
.dot {
position: absolute;
height: 25px;
width: 25px;
background-color: firebrick;
border-radius: 50%;
display: inline-block;
}
.square {
height: 25px;
width: 40px;
background-color: #555;
}
.dot .span {
padding-top: 8px;
}
.time-line-box {
height: 100px;
padding: 50px 0;
width: 100%;
/* background-color: burlywood;*/
}
.swiper-container {
width: 95%;
margin: auto;
overflow-y: auto;
}
.swiper-wrapper{
display: inline-flex;
flex-direction: row;
overflow-y:auto;
justify-content: center;
border-top-width: 20px;
}
.swiper-container::-webkit-scrollbar-track{
background:#a8a8a8b6;
}
.swiper-container::-webkit-scrollbar{
height: 2px;
}
.swiper-container::-webkit-scrollbar-thumb{
background: #4F4F4F !important;
}
.swiper-slide {
text-align: center;
font-size: 12px;
width: 50px;
height: 100%;
/*position: relative;*/
}
* HTML Code: *
<section class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div *ngFor="let time of dropDownArray" class="timeslot swiper-slide">
<div class="dot" [style.background-color]="getBackgroundColor(time)"><span>{{time.label}}</span></div>
</div>
</div>
</div>
</section>
I'm trying to place each dot at the absolute position of it's parent div timeslot . I might be missing something but I really tried everything I know. Hope to find some help.
Add position relative to your parent
.timeslot{
// ...
position: relative;
}
I'm using this grid as a top navabar and I want to make a few alterations:
How can I reduce the width of the input to 40% but still keep it right next to the logo? And how can I add a sign-in div at the right hand corner. But keep in mind that I want the entire header to remain responsive like it is now. If I do the following it looks good in a full screen but when the width of the screen is smaller the input becomes really small.
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 40%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div
</div>
</div>
You can either reduce the value of 40% in your CSS.
Or add new CSS for max-width:
.header > form > input {
max-width: 50px;
}
For your sign-in div, you can add this CSS:
.float-right {
float:right;
}
However your current class spells floar and not float, you should change that.
you can use this code
body {
margin: 0;
padding: 0;
}
.top_nav_menu {
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 0 8px 0 #eeeeee;
position: fixed;
top: 0px;
width: 100%;
height: auto;
background-color: #fafafa;
margin-right: 90px;
padding: 15px;
z-index: 2;
}
.header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
.header > form {
width: 65%;
margin-left: 25px;
}
.header > form > input {
width: 24%;
}
<div class="top_nav_menu">
<div class="header">
<img src="http://i.imgur.com/EFkps0m.png">
<form><input type="text"></form>
<div class="floar-right">Sign-in</div>
</div>
</div>
Positioning the <h1> to the position that I want.
Here's what I am trying to do: https://imgur.com/a/D0ief0a
CSS File and HTML File
#import url('https://fonts.googleapis.com/css? family=Montserrat:400,600');
body {
font-family: 'Montserrat';
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: antiquewhite;
}
.header img {
padding: 1em 2em;
width: 10%;
display: block;
border-radius: 80px;
}
.header h1 {
padding: 1em;
text-align: center;
font-size: 3em;
position: relative;
}
<header>
<div class="header">
<img src="../Welcome/images/123.jpg" alt="">
<h1> A Work In Progress</h1>
</div>
</header>
I tried everything that comes into my mind.
See if it helps :
JSFiddle DEMO
.header img {
padding: 1em 2em;
width: 10%;
border-radius: 80px;
position: fixed;
float: left;
display: inline-block;
}
Added float: left; and position: fixed;, also changed the display to inline-block
I think the best way to do this is use position:fixed:
.header h1 {
text-align: center;
font-size: 3em;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This will keep it centered regardless of device coming into your site.
Play the with parameters a bit to get the exact position you want, also you might want to do this to the background aswell.
I have a flex container, with few li elements inside. While adding more li elements inside, the container scretches together in above and down sides. I don't want it to move any further in up, only in down direction.
You can check it on my JSfiddle
Try to add few li elements, you will see that container is scretching. How to block it?
Try this out and see if it is what you are going for. If not I may need some additional info.
.mainContainer {
width: 100vw;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
}
.content {
min-height: 350px;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
position:relative;
margin:0 auto;
display:block;
top:50%;
margin-top:-25%;
}
First of all, I am using some Jquery here for adding new elements:
So I removed min-height for content
Reset the ul margin-bottom to zero.
The new items are added via JS and are positioned absolutely:
ul.list-group {
margin-bottom: 0;
position: relative;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
The new items are listed one below the other giving the margin-top property:
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
Let me know your feedback on this. Thanks!
var newItems = 0;
$('.fixed_btn').click(function(event) {
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
newItems++;
});
* {
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
-webkit-font-smoothing: antialiased;
font-family: Raleway;
}
.mainContainer {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
/*min-height: 350px;*/
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
.list-group-item {
height: 100px;
}
ul.list-group {
margin-bottom: 0;
position: relative;
}
.fixed_btn {
position: fixed;
top: 0;
left: 0;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="mainContainer">
<div class="content">
<ul class='list-group'>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
</ul>
</div>
</div>
<button class="btn fixed_btn">+ Add</button>
If you change your .mainContainer CSS so that the height is auto. Now the list will not move up, but only will move down as you wanted as the height is flexible depending on the content:
.mainContainer {
width: 100vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
Also, if you change the .content CSS so that the min-height is auto it seems to look nicer when there are fewer li elements:
.content {
min-height: auto;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
Updated (again) Fiddle, try to add more li elements
If your looking for the list to stay in position, but when more elements are added to have a scroll but still be fixed see this other Fiddle