I'm trying to put together a page that has a Header, navigation tabs that float over the bottom of the header, body content and then a footer. This should be fairly easy, but I'm running into a strange result.
The menu has to float over the header image, as that image may be static, or it may be a slider... or it may be an embedded Google map.
I've mocked up the code below and essentially the CSS for it. The problem is that even though I have the footer set to the bottom, when I view the page and the body has enough content, the footer seems to be floating over the body content and the body content extends past the bottom of the footer.
Here is my code.
Would appreciate someone smarter than me looking at this and making any suggestions.
<style>
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
.mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
}
.mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
z-index: 100;
color: #fff;
margin-top: 310px;
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
.mynavigation li.is-active {
color: #474747;
background-color: #fff;
}
.mynavigation li a{
color: #fff;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
</style>
<div id="header">
<img src="/images/myimage" />
</div>
<div id="mynavigation">
<!-- css makes this a tab menu and it needs to position at the bottom of the image <div> -->
<!-- so it looks like a white tab that is merged wit the whit body to look as if they are whole/together -->
<ul>
<li>Home</li>
<li>Examples</li>
<li>Other</li>
<li>Last</li>
</ul>
</div>
<div id="bodycontent">
<!-- page content goes here and has a white background -->
</div>
<div id="footer">
<!-- footer content here -->
</div>
Working Fiddle http://jsfiddle.net/u2qL4j8a/2/ You had wrongly mentioned the CSS selector for navigation and footer as classes whereas in the HTML you have mentioned these as IDs.
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
padding:0;
margin: 0;
}
#header > img{
width: 100%;
}
#mynavigation{
margin-left: auto;
margin-right: auto;
color: #fff;
position: fixed;
top: 0;
left: 0;
}
#mynavigation li {
display: inline-block;
text-decoration: none;
padding: 15px 25px 30px 25px;
/*z-index: 100;
color: #fff;
margin-top: 310px;*/
font-family: avenirltstd-black;
text-transform: uppercase;
letter-spacing: 5px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #474747;
text-align: center;
}
Make your HTML structure like so:
<html>
<head>
</head>
<body>
<div id="header"></div>
<div id="mynavigation"></div>
<div id="content">
<!-- CONTENT STUFF -->
</div>
<div id="footer"><!-- FOOTER STUFF --></div>
</body>
</html>
...And your CSS like so:
html{
padding: 0;
margin: 0;
}
body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#header{
width: 100%;
height: 350px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#mynavigation{
position: absolute;
top: 350px;
height: 50px;
width: 100%;
}
#content{
position: absolute;
top: 350px;
bottom: 100px;
width: 100%;
overflow: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
Related
I'm building my first actually decent website basically and I'm creating a background atm with some css and an image and I want to do it just as it is in the picture
.
(accomplished already) but it's not responsive probably because of position: absolute property and I want to make it properly responsive.
Here is the HTML code I am using for the background
.bg {
background: #9359C7;
color: white;
display: grid;
text-align: center;
height: 764px;
width: 1280px;
}
.content {
position: relative;
}
.content img {
width: auto;
height: auto;
position: absolute;
right: -178px;
bottom: 0;
}
<div class="bg">
<div class="content">
<h1>Lol</h1>
<img src="https://www.pikpng.com/pngl/m/69-698658_yami-ygi-y-gi-yu-gi-oh.png" alt="Yugi">
</div>
</div>
EDIT: I put my whole site on this patebin since idk it wouldn't let me upload it on here the snippet I was given did not work for me at least.
This should do the trick:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.hero {
position: relative;
overflow-x: hidden;
}
header {
position: relative;
background: black;
padding: 40px 0;
z-index: 5;
}
.content {
position: relative;
z-index: 5;
color: white;
text-align: center;
width: 70%;
height: 100vh;
max-height: 768px;
background: #9359C7;
padding: 20px;
}
img {
width: auto;
height: 98%;
position: absolute;
right: 30%;
bottom: 0;
transform: translateX(50%);
padding-top: 80px;
z-index: 10;
}
h1 {
margin: 0;
}
<div class="hero">
<header></header>
<div class="content">
<h1>Lol</h1>
</div>
<img src="https://ms.yugipedia.com//c/c4/YamiYugi-DULI.png" alt="Yugi">
</div>
I'm learning now CSS and i'm creating a portfolio page as part of it.
I've created this page: link to the codepen
The thing is, the footer is not sticks to the bottom of the page, can some one tell me how can i fix it? so it will be after the <div id="contact">
Iv'e noticed that when I do put it in the <div class="content"> it does work, I tried to figure out why and I didn't got it.
Thanks.
CSS & HTML are here:
html,
body,
main {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: "Alef";
}
header {
position: fixed;
top: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav {
width: 960px;
height: 70px;
margin: 0 auto;
}
nav ul {
margin: 10px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 40px 0 0;
}
a {
color: #4d4d4d;
line-height: 42px;
font-size: 18px;
padding: 10px;
text-decoration: none !important;
}
.active {
color: #004cc6;
font-weight: bold;
font-size: 20px;
background: #f9fafc;
}
.content {
margin-top: 70px;
width: 100%;
height: 100%;
}
.content > div {
width: 80%;
height: 50%;
margin-left: auto;
margin-right: auto;
color: white;
font-size: 25px;
}
#home {
background: #0f5fe0;
}
#portfolio {
background: #129906;
}
#about {
background-color: #a00411;
}
#contact {
background-color: black;
}
:target:before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
footer {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
<header>
<nav>
<ul>
<li><a class="active" href="#home">My Page</a></li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<div class="content">
<div id="home">
<p>#home</p>
</div>
<div id="about">
<p>#about</p>
</div>
<div id="portfolio">
<p>#portfolio</p>
</div>
<div id="contact">
<p>#contact</p>
</div>
</div>
</main>
<footer>
Fotter
</footer>
Remove height: 50%; from .content > div if you want to put footer just after contact.
Codepen
If you want to stick footer to the bottom of the browser window, then add this to your css:
footer {
position: fixed;
bottom: 0px;
}
Codepen
Change footer value like below
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background-color: #dbdbdb;
text-align: center;
height: 70px;
width: 100%;
}
you can use vh instead of percentage to set the min-height of main, then you need to remove the height
.main {
min-height: 100vh; // Change as per your requirement
}
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
I am working on a new version of a layout for one of my current websites. I have set up the following example for as far as I have gotten: http://jsfiddle.net/ckdm1m7q/
html:
<body>
<nav><ul><li>Home</li></ul></nav>
<header>
<img src="http://rockstartemplate.com/headerdesign/banner_green.jpg" />
</header>
<div id="wrapper">
<section id="left_col"></section>
<section id="right_col"></section>
<main id="main_content">
</main>
</div>
<footer>
© blah blah
</footer>
</body>
css:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
nav {
position: fixed;
background: #000;
height:27px;
width: 100%;
}
nav ul, nav li {
margin: 0;
padding: 0;
}
nav li {
display: inline;
line-height: 27px;
}
nav a {
color: #fff;
display: block;
padding-left: 15px;
padding-right: 15px;
}
header img {
width: 100%;
max-width: 1024px;
display: block;
}
#wrapper {
position: relative;
top:0;
height: 100%;
}
#left_col {
position: absolute;
top: 0;
left: 0;
width: 240px;
bottom: 0;
background: #eee;
overflow:auto;
}
#right_col {
position: absolute;
top: 0;
right: 0;
width: 240px;
bottom: 0;
background: #eee;
overflow:auto;
}
#main_content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #666;
margin-left: 240px;
margin-right: 240px;
overflow:auto;
}
footer {
height:20px;
line-height:20px;
background: #000;
color: #fff;
}
I would like #left_col, #right_col and #main_content to only fill the viewport area available (100% - 27px - [header.height] - 20px) and be scrollable within that area.
This is difficult as the height of header will change on smaller resolutions.
Is this possible in pure html+css? And if so, how could I achieve it?
edit: To explain my aim a bit better:
#main_content needs to be scrollable without moving , #left_col, or #right_col.
#left_col and #right_col need to be scrollable individually, if they extend past the bottom of the viewport
footer can be moved to the bottom of #main_content if that makes things easier
header does not have to be visible upon scrolling down.
I would like to know how to make main content appear in front of background in the middle of the page below header and above footer. Like on this site for example. http://cdn.webfactore.co.uk/web_design_example_551_large.jpg I am not sure if it deals with heights and widths or anything else. Help me please. How do I make main content appear in front of background in middle?
Here's a quick HTML5 skeleton
<!doctype html>
<html>
<head>
</head>
<body>
<header>
<div id="header-wrapper">
</div>
</header>
<div id="content">
</div>
<footer>
<div id="footer-wrapper">
</div>
</footer>
</body>
</html>
html,
body {
background: #ccc;
font: 62.5% Arial, Helvetica, sans-serif; /* --- Setting body font at 62.5% makes 1.2em equal to 12px --- */
line-height: 1.7em;
letter-spacing: 1px;
color: #222;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
header {
background: #555;
position: relative;
width: 100%;
height: 60px;
margin: 0;
padding: 0;
}
#header-wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
padding: 0;
}
#content {
background: #fff;
position: relative;
width: 960px;
height: auto;
margin: 0 auto;
padding: 0;
}
footer {
background: #555;
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
}
#footer-wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
padding: 0;
}