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
Related
I know margin:0 auto; will center a div horizontal but I also want to center it vertically so I used this
vertical-align:middle;
top:50%;
transform:translate Y(-50%);
But when I run this code the div is centered vertically but it doesn't center horizontally. Please can someone give me a better clue on how to center a div both vertically and horizontally.
To center both vertically and horizontally following your attempt, try this:
// assumed positioned element
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Reference, and another good resource.
Flex has become extremely popular, I would recommend that because of its other capabilities.
Fiddle: https://jsfiddle.net/ne38nx7t/1/
HTML:
<div class="Aligner">
<div class="Aligner-item">Apples</div>
</div>
CSS:
.Aligner {
height: 100px;
border: 2px solid blue;
display: flex;
align-items: center;
justify-content: center;
}
Flex Vertical
I haven't seen your entire code feel free to post your code on to a fiddle, till then check the following fiddle I created to, center content horizontally and vertically, where in the content has a dynamic height
http://jsfiddle.net/Q92Lb/2/
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
</style>
</head>
<body>
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
</body>
</html>
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
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 a page with a main scrollable div like this:
<html>
<head>
<style type="text/css">
#mydiv{
overflow: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="mydiv">content</div>
</body>
</html>
How can I have a fixed margin (for example 30px) at the bottom of the page?
The div can have a small or big height (depending on the screen size), but the margin should be fixed.
Thanks in advice
You can create another div either inside your existing or outside depending on how you want your page to layout. Then apply this style to the div #myftr { margin: 30px; }
Something like this.
http://jsfiddle.net/rhoenig/XxuvE/
you can simply define the margin-bottom in your css like this :-
#mydiv{
overflow: auto;
width: 300px;
border:1px solid red;
margin-bottom:30px;
}
or see the demo :-http://jsfiddle.net/XxuvE/4/
I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px} but I can't see where or what do they do to centralise the main container.
Could anybody explain how?
Code example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
http://www.csszengarden.com/?cssfile=/179/179.css&page=4
Do not use the * selector as that will apply to all elements on the page. Suppose you have a structure like this:
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #content div using:
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; } snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
http://meyerweb.com/eric/tools/css/reset/
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
I would omit the * { text-align:center } declaration, as it sets center alignment for all elements.
Usually with a fixed width container margin: 0 auto should be enough