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.
Related
I'm not a css-smarty, I already tried some codes from the internet and stackoverf but still not helping.
How can I fix a div on the left side of page, image can be found down below.
Image: http://prntscr.com/fbhhdi (I selected position with red lines)
If the red outline in your screenshot is, for an example, a div with class="fix-this", then your css would be like this:
.fix-this {
position: fixed;
left: 0;
}
Position fixed will position your div relatively to the viewport.
Left: 0 will place it to the left.
Now, if you also want it to go full height, you can add:
.fix-this {
position: fixed;
left: 0;
top: 0;
bottom: 0;
}
I think it will solve your problem.
body {
background-color: #000;
height: 100%;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
#wrapper {
height: 100%;
}
.leftCol {
border: 2px solid red;
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: 250px;
}
.rightCol {
color: #fff;
float: left;
min-height: 400px;
height: 100%;
width: calc(100% - 254px)
}
<hr></hr>
<div id="wrapper" class="clearfix">
<div class="leftCol">
Content Here
</div>
<div class="rightCol">
Content Here
</div>
</div>
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 trying to make the footer stay at the bottom of the page, NOT the bottom of the screen (fixed) but at the bottom of the entire page, so you can only see it after scrolling to bottom. However, for some reason it stays above the bottom, and I can't seem to find the reason...
FIDDLE:
https://jsfiddle.net/okfudezn/
Image:
HTML (the div has no wrappers etc):
<div class="footer">
<a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
</div>
CSS:
.footer {
background-color: #4b4c46;
height: 55px;
line-height: 55px;
width: 100%;
text-align: center;
color: #e1dac5;
font-size: 14px;
}
Just change replace you content div height to auto
updated fiddle
.content {
position: relative;
width: 650px;
height: auto;
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
margin: 0 auto;
margin-bottom: 80px;
top: -100px;
}
I would try with:
.footer {
position: absolute;
bottom: 0;
}
Change this css
.content {
background-color: #e6e6e6;
border: 1px solid #bcbcbc;
/*height: 650px;*/ /*Remove this*/
margin: 0 auto 30px;/*Change this*/
overflow: hidden;/*Add this*/
position: relative;
/*top: -100px;*//*Remove this*/
width: 650px;
}
.grid {
width: 600px;
/*height: 1000px;*/ /*Remove this*/
margin: 0 auto;
padding-top: 30px;
}
https://jsfiddle.net/okfudezn/
Here you go!
html, body {
margin:0;
padding:0;
height: 100%;
}
#container {
position: relative;
height: auto;
min-height: calc(100% - 54px);
padding-top: 54px; /* Header & Footer */
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 54px;
background: red;
}
#content {
background: orange;
height: 100%;
}
#footer {
position: absolut;
bottom: 0;
width: 100%;
height: 54px;
background: yellow;
}
.simulateContent {
height: 1000px;
}
<div id="container">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT START
<div class="simulateContent"></div>
CONTENT END
</div>
<div id="footer">
FOOTER
</div>
</div>
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;
}
I have to centralize an image in both axis and then add a linkable area to that image's top left area. This works great for webkit and ff but ie fails. My html code is this:
<body>
<div class="content">
<img src="images/main_image.jpg" />
Logo
</div>
</body>
and my css code this:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
position: relative;
top: -50%;
}
div.content a {
width: 14%;
height: 9%;
display: inline-block;
position: absolute;
top: -42%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
}
this doesn't work for ie because i use an a tag displayed as inline-block positioned accordingly. Our friend ie doesn't show the linkable part in the screen at all because the text-indent. Can someone help a little bit? Thanks. This demo shall help you more i think.
Take a look at this demo (or results only here)
HTML is not changed. I assume that image has the same height/width as content div
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
}
div.content {
position: relative;
padding: 0;
border:solid 1px blue;
width: 1001px;
height: 626px;
/*below will center div on screen */
top: 50%;
margin: -313px auto 0;
}
div.content img {
margin: 0;
padding: 0;
display: block;
border:solid 1px white;
/*top:-50% removed. Assuming that image has the same height/width as content div*/
}
div.content a {
width: 14%;
height: 9%;
position: absolute;
/* top: -something changed. Remember that absolutely positioned div is always positioned from closest parent relative div*/
top: 10%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
text-indent: -9999px;
border:solid 1px green;
}
It looks a like you're creating a container, moving it to the bottom of the screen and then moving the image outside of it to the top-left corner of the screen. This last step is exactly what will fail in many cases. Child-elements usually will be hidden or cutted away when leaving their parent container. IE is more restrictive but correct in this case.
You can achieve your goal easier when you'll place the image outside the container. Keep in mind that body is a container by itself that is allways 100% wide and high (and cannot be changed to be 50% or whatsoever).
Here's the result on js-fiddle
The Html:
<body>
this is the body
<img class="my_image" src="images/main_image.jpg" />
<div class="content">
This is the container
<a href="#" >Logo</a>
</div>
</body>
CSS:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
color:silver;
}
div.content {
color:black;
background-color: silver;
position: relative;
width: 1001px;
height: 626px;
top: 50%;
margin: 0 auto;
padding: 0;
}
.my_image {
width:160px;
height:60px;
border:1px solid red;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
left:0;
}
div.content a {
color:red;
font-size:14px;
display: inline-block;
position: absolute;
top: 20%;
left: 7%;
text-decoration: none;
margin: 0;
padding: 0;
}
In general it's the best to avoid negative values. They're misinterpreted in many browsers and produce problems.