My content div that overlaps the header div in my CSS code as per the attached image. Both the content and side-nav divs should be below the header section.
I tried changing the value of position property for the elements but it doesn't work. I also tried introducing top property to the content section to be as same as the side nav but it didn't work too
body {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 400;
color: #777;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: orangered;
margin: 0;
max-width: 100%;
width: 100%;
}
#media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.header {
font-size: 1.4rem;
height: 8vh;
background-color: #3394e3;
border-bottom: var(--line);
top: 0px;
position: fixed;
width: 100%;
/*
display: flex;
justify-content: space-between;
align-items: center;*/
}
.side-nav {
position: fixed;
margin: 0px auto;
height: 100%;
float: left;
top: 8vh;
clear: both;
background-color: #fff;
bottom: 0;
}
.content {
background-color: #f4f4f4;
min-height: 93vh;
width: 85%;
float: right;
}
.footer {
background-color: green;
height: 7vh;
width: 85%;
float: right;
color: red;
}
<div class="container">
<div class="header-fixed">
<header class="header">
</header>
</div>
<nav class="side-nav">
</nav>
<main class="content">
</main>
<footer class="footer">Footer</footer>
</div>
Your .header has a position:fixed which takes it out of the normal flow of a webpage. So since it is taken out (essentially placed on a different layer of the page flow), your content is relatively positioned in the normal flow. As the .header is taken out of the flow, the .content is technically the first item in the flow of the page now.
So you will just need to give the .content a margin-top that is equivalent to the height of your .header.
Your .sidebar also has a position:fixed, so it's on a different layer, so it doesn't care about where it is placed in relation to the .header. So that's why you had to manually position it and give it a top:8vh to put it 8vh down from the top of the window.
Related
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; }
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I have an h1 inside a nav that is currently centering based on the width of the h1. How would I use text-align so that the title is centered based on the width of the nav?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: 100%;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Thank you in advance for your help!
You can set your nav to have a position of relative which means that any inside absolute element will be within the bounds of this element. Then set the h1 to have a position of absolute this will remove the element from the normal flow of the page and have it flow with the parent element with the position of relative. From there you can center it using margin: 15px auto;, left: 0 and right: 0 this will make the h1 element 100% width of the nav thus centering it correctly.
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
margin: 0;
padding: 0;
}
h1 a {
color: inherit;
text-decoration: none;
}
.logo {
height: 100%;
}
nav {
background-color: black;
display: flex;
height: 90px;
position: relative;
width: 100%;
}
nav h1 {
color: white;
flex: 1 0 auto;
font-size: 44px;
left: 0;
line-height: 55px;
margin: 15px auto;
position: absolute;
right: 0;
text-align: center;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Now this method also has its fallback, you will lose the ability to click on the logo, but this can be remedied by setting a position of relative and z-index: 2 so the logo element will be higher up than the h1 making it clickable.
Flexbox is perfect approach, and you were nearly there.
I added an empty div with class .ghost to act as a counter balance to the logo. Since I know the logo is 90px wide I set the ghost div to the same, and both the ghost div and the logo get similar flex settings:
.logo {
height: auto;
width: 90px;
flex: 0 0 90px; // same
}
.ghost {
width: 90px;
flex: 0 0 90px; // same
}
Now, with the <h1> allowed to grow (flex: 1 0 auto), it will take up all the rest of the space naturally and remain perfectly centered thanks to the ghost div flanking the right side.
* {
margin: 0;
padding: 0;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: auto;
width: 90px;
flex: 0 0 90px;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
.ghost {
width: 90px;
flex: 0 0 90px;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1>The Novel Column</h1>
<div class="ghost"><!-- nothing here --></div>
</nav>
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 want to center text in my header, the header takes up 100% of the view height and 100% of the width and does only consist of a solid color. When i center the text (Hello) the header is "pushed" down leaving white space and i have no clue how to fix this.
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
}
#body {
margin: 0;
}
<header id="mainHeader">
<p id="hello">
<Hello>
</p>
</header>
(The text needs to be centered vertically when window is zoomed by default)
I made a jsfiddle and I saw the white box above the header. I added a margin-top: 0 to the css at #hello and it seems to work for me. Test it out!
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin-bottom: 0;
text-align: center;
margin-top: 0;
}
#body {
margin: 0;
}
EDIT:
To fix what he wanted to do I used the flex-property to allign the items in the middle of the header like this:
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
display: flex;
justify-content: center; (vertical center)
align-items: center; (horizontal center)
}
Maybe you can play with the padding-top property! Of course, I've deleted the margin top that the <p> adds by default...
#mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
}
#hello {
padding-top: 100px;
color: #f2f2f2;
font-size: 200px;
font-family: monospace;
margin: 0 auto;
text-align: center;
}
#body {
margin: 0;
}
The white space has nothing to do with centring text. That is the combination of the default margin-top that applies to paragraphs and collapsing margins.
Add margin-top: 0 to the rules for #hello.