I need some tips about the best way to position one or more image at the bottom of the page or a container div. If possible css only.
The only way I can accomplish that is using jquery :(
Try position: fixed. That will position any block element (div, image) at a fixed location with respect to the page. The element will stay there when you scroll (except on tablet/mobile devices). For example:
div#bottom {
position: fixed;
bottom: 0;
/* And if you want the div to be full-width: */
left: 0;
right: 0;
}
you can use position: absolute for it. Demo: http://jsfiddle.net/R2V4U/
Position: 'absolute' is the answer, however you might want to set your body or a a div container for position: 'relative' to give a point of reference to the image.
I tried using this for footer at the bottom of a document and it worked only when I set my body for position: 'relative'. Having said that, it might not be the best practice to set body like this, so it is best to use a container with relative position for your whole page inside the body.
Had the same kind of problem and everything found on the web was either too complicated, or not not functionnal in some cases. The easiest way I found is like this :
<html>
<div style="width:100%;height:100%;">
<div style="width:100%;min-height:95%;">Content</div>
<div style="height:5%;position: relative;bottom:0px;">Footer</div>
</div>
</html>
Obviously you can extract the css in stylesheet and add "class" or "ID" to the divs.
#mydivid{
position : fixed;
bottom : 0;
}
would do the job.
I know this question is pretty old but I think my answer is the correct one if you don't want element to display over other elements when changing size of window.
So to accomplish this I created div container inside which I stored element I want to display at the bottom of the page, then I used flexbox to justify it.
https://jsfiddle.net/08xrab3w/9/
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
#bottom-of-page-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
}
#bottom-of-page {
border-top: 1px solid #e4e4e4;
width: 100%;
background-color: green;
height: 60px;
}
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
</div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
<div id="bottom-of-page-container">
<div id="bottom-of-page"></div>
</div>
</body>
</html>
Related
I would like to show a vertically centered loading spinner like one of these https://github.com/jlong/css-spinners in a web page. Follow the codepen.io link on that page to see them in motion.
How can I do this via CSS? Consider I am dealing with a Google App Engine application based on Python, Twitter Bootstrap and Polymer.
Let's assume you go with the "Plus" spinner. You can wrap this in a fixed position div that covers the whole page:
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
Since you might want to use different spinners at times, which have a different width, the CSS shouldn't hardcode the width. You can center an item vertically in a flexbox, and then use margin: 0 auto; on the item to be centered horizontally.
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
align-items: center;
top: 0;
}
.plus {
display: flex;
margin: 0 auto;
}
This way, you can even color the background, make it semi-transparent etc.
Here's a JSFiddle
I don't know anything about a google app engine I'm afraid but to centre an element that has a width and height is pretty easy.
I assume this is a fixed positioned element so just use top,right,left and bottom and then use margin:auto to center vertically and horizontally.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.spinner{
position:fixed;
z-index:99;/* make higher than whatever is on the page */
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
background:red;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
HTML
<div id="pluswrap">
<div class="plus">
Loading...
</div>
</div>
CSS
#pluswrap {
position: fixed;
width: 100%;
height:100%;
display: flex;
top: 0;
}
.plus {
margin: auto;
}
Only display:flex to parent and margin: auto will do the required thing.
Here is JS Fiddle
I've currently got this situation - two divs where the 1st is fixed on the left and the 2nd is fluid on the right. I need to switch the HTML position of the two divs, but leave the webpage appearance unchanged.
So,
<div id="fixed"></div>
<div id="fluid"></div>
needs to become:
<div id="fluid"></div>
<div id="fixed"></div>
But when the webpage is displayed, the fluid div needs to be on the right and the fixed on the left. I can't figure this out. Is there a way to do this?
There are various ways to do this. It's best to have both divs inside a container, even if set to width: 100%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.container {position: relative;}
#fixed
{
width: 300px;
height: 100px;
background: #111;
position: absolute;
top: 0; left: 0;
}
#fluid
{
height: 100px;
background: #555;
margin-left: 300px;
}
</style>
</head>
<body>
<div class="container">
<div id="fluid"></div>
<div id="fixed"></div>
</div>
</body>
</html>
A modern option is to use flexbox, but it's not reliably supported yet.
Add float: right to #fixed-div.
I've been working on a responsive site and have come to a bit of a problem with Image Maps. It seems that Image Maps don't work with Percentage based co-ordinates.
After a bit of googling I found a JS workaround - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html.
However I want the site to work with JS disabled.
So after exhausting those possibilities I decided to look into using relatively positioned Anchor tags over the images to do the same thing. This is a better option anyway IMO.
I've tried to place the anchor tags over the image with percentage based position and size, but whenever I rescale the browser the anchor tags move disproportionately to the image.
HTML:
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
CSS:
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
Here's a jsFiddle to describe what I mean - http://jsfiddle.net/wAf3b/10/. When I resize the HTML box everything becomes skewed.
Any help much appreciated.
You had a few problems with your CSS in the fiddle you posted (as well as a missing closing div tag). After making sure that #block was relatively positioned, not 100% height, and that your anchors were block/absolutely positioned, I was able to get the tags to move with the blocks.
Here is the updated fiddle:
http://jsfiddle.net/wAf3b/24/
CSS
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
</div>
</div><!--/content-->
</body>
</html>
One important thing to note with the new html is the use of DOCTYPE. For some reason, some browsers don't like it when it is not capitalized.
Absolutely-positioned elements are no longer part of the layout, so they cannot inherit relative dimensional properties from their parent. You'll need JavaScript to do what you want.
People who disable JS expect a degraded experience already.
I've been in the industry for many years, however for the last 10 years I haven't had to do much of the HTML myself. I've recently become the only developer at work and as such I have to do all of the HTML myself as well.
Normally this wouldn't be an issue, however I'm trying to stick with the same quality standards that I have for my PHP / MySQL / JavaScript / jQuery work that I do. So tables are definitely out of the question (the last time I had to write HTML/CSS myself was when nested tables was acceptable).
I've been toying around with HTML divs and CSS and I'm having some pretty major issues with it, and not finding much of anything online other than the crap posted at W3Schools doesn't help either.
Let's first take a look at some code I'm working on, here's the HTML:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}
#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}
header {
height: 160px;
width: 980px;
background: blue;
}
#content-wrapper {
background: green;
width: 100%;
}
footer {
height: 120px;
margin-top: -120px;
width: 980px;
background: orange;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
<link href="inc/css/style.css" rel="stylesheet">
</head>
<body>
<div id="page_wrapper">
<div id="content">
<header>this is the header...</header>
<div id="content-wrapper">sdasd</div>
<footer>
this is the footer
</footer>
</div>
</div>
</body>
</html>
I've attempted several variations of this, and I haven't been able to get it to look the way that it should. Note that I'm using background colors specifically to tell the positioning of everything because this is more of a learning exercise than a real-world example.
Many of the pages that I will have to create will have a background image in the body just like many websites these days. Then the content will be 980 pixels wide. My big problem with the code above, is that the content-wrapper div, needs to be 100% of the available space if the content isn't long enough to push it down.
When I add height: 100% to that declaration in the CSS it seems to render it just fine however it puts it to 100% of the window which makes it overlap the page_wrapper div that contains it.
I'd like to not use overflow declarations at all, as for some reason every time I do it screws everything else up.
So I guess the real question and/or request here would be:
How do I do what I would like to do in the above code?
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: gray;
}
#page_wrapper {
background: yellow;
height: 100%;
width: 100%;
}
#content {
width: 980px;
background: white;
height: 100%;
margin: 0 auto;
}
header {
height: 160px;
width: 980px;
background: blue;
}
#content-wrapper {
background: green;
height: 100%;
position:relative;
}
footer {
height: 120px;
width: 980px;
background: orange;
position:absolute;
bottom:0;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page Title</title>
</head>
<body>
<div id="page_wrapper">
<div id="content">
<div id="content-wrapper">
<header>this is the header...</header>
test
<footer>this is the footer</footer>
</div>
</div>
</div>
</body>
</html>
The body tag is already "100% of the available space if the content isn't long enough to push it down."
So just use that element for anything you need (background images, etc). Take a look at CSS properties such as background-position to control where something is visible inside the <body> tag.
Otherwise, I would go for min-height: 100%; on the wrapper but am not sure how compatible that is with older versions of IE. And it may or may not do funky things on a touchscreen devices.
In general however, HTML is not very good at vertical layout. Especially in relation to the browser window's height. Most of the issues can be worked around in modern browsers, but it's better to simply accept this constraint and design your website around the assumption that you have no control over the height. It's just not worth the headache.
You don't need the page wrapper or content div. You can just set the body width to 980px. You can also set your html and body to whatever color you want.
While W3Schools has gotten a deservedly bad rap, they've cleaned up quite a bit and aren't a bad, quick reference.
Beginning to wonder if I am missing something obvious but I have been searching for days now and still haven't been able to find a definitive answer.
What I am looking for is a Source ordered Content CSS layout for a two column page (menu to right) with header and sticky footer, and preferably no nasty hacks. Preferable Source order of:
{content}
{rightmenu}
{footer}
{header}
Like I say I'm not getting too far in trying to build this for myself, nor have I been able to find a suitable example anywhere. Any suggestions?
Thanks
content right, with sidebar left is perhaps the easiest floated layout to make, just float the content right with a width, let the left fill the space with overflow to avoid wrapping. footer goes below by clearing.
As for the header put a fake header div first in the source, presuming there may be a logo or something to go in it, even though you might not want hordes of links up there if there is a big dropdown menu to go in there or something like that. Anyway I'd make the "fake" header tall enough to create the space you need then put any actual content in it, then put the content you want to appear top only in a div at the bottom and absolutely position it.
here's a fiddled mockup
This is the best I can come up with at the moment. Bit of a mixture of relative and absolute positioning but seems to work. Can anyone see any problems with this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.container {
min-height: 100%;
/*height: auto !important;*/
height: 100%;
margin: 0 auto -2em;
}
.content{
float: left;
width: 80%;
}
.menu{
margin-left: 80%;
}
.header{
position: absolute;
top: 0px;
height: 3em;
width: 100%;
}
.clearheader{
height: 3em;
}
.footer, .clearfooter {
height: 2em;
clear: both;
}
.container {
background: grey;
}
.header{
background: cyan;
}
.clearheader{
background: cyan;
}
.footer{
background: blue;
}
.clearfooter {
background: lightblue;
}
</style>
<link rel="stylesheet" href="NJC layout2.css" ... />
</head>
<body>
<div class="container">
<div class="clearheader"></div>
<div class="content">Content</div>
<div class="menu">menu</div>
<div class="clearfooter"></div>
</div>
<div class="header">header</div>
<div class="footer">Footer</div>
</body>
</html>
If I understand your question right, this should be your answer:
http://www.positioniseverything.net/ordered-floats.html
I actually think this article is explaining everything quite nice.