What I want is to show "Loading..." as a simple text while page is loading and I want the text to be centered both - horizontally and vertically. I go through a lot of examples and now I have some sort of solution which seems to work, but I have some doubts that the effect will be the same all the time and that my code is even close to a good CSS.
What I have is a index.php page where right after the <body> tag I have this:
<body>
<div id="loading-standard-user">
<p id="loading-standard-user-text">Loading...</p>
</div>
Later on I have a function that take care for hiding the text when page is loaded, but what concern's me is the styling of the <div> and <p> tags.
Here is my CSS:
#loading-standard-user {
width: 100%;
}
#loading-standard-user-text {
position: fixed;
width: 100%;
text-align: center;
font-size: 40px;
font-family: arial;
top: 50%;
margin-top: -40px;
}
I'm pretty sure that I have some unnecessary code and at the same time I miss something, one thing that I wonder is that my font-size: 40px which would have to mean that if I want my code to be vertically centered later on my margin-top should have value equal to half the size of my font, but visually it looks centered when margin-top is with the size of the font.
Anyways any thoughts on the styling and where are my mistakes and how could I do it right?
Thanks
Leron
Your CSS code seems to do almost exactly what you want. The only problem with it that I can find is that your margin-top should be -50% of the height. Your div height is 40px (which is the font size), so your margin-top should be -20px to center it exactly.
In more detail: top: 50% sets the top of the text halfway the container. Then margin-top: -20px moves it up 20px to center it.
Edit:
If you want to use em, like suggested by #mgibsonbr, try the following CSS:
#loading-standard-user {
position: fixed;
width: 100%;
height:40px;
top: 50%;
margin-top: -2em;
}
#loading-standard-user-text {
width: 100%;
text-align: center;
font-size: 4em;
font-family: arial;
}
The #loading-standard-user seems unnecessary, your exampled worked fine (on Firefox and Chrome at least) with just the second rule. (the fact you're using position: fixed on the inner div makes where you place the outer irrelevant)
For the top and margin-top issue, it might look like it's centered, but that does not mean it actually is:
And if you're worried about resizing the text later, I'd suggest using em instead of px for setting your sizes, this way they will be automatically adjusted when the user resized the browser text. 1 em is the height of the uppercase "M", while 1 ex is the height of the lowercase "x".
(Unfortunatly, in practice I couldn't make it work with em while with px it worked just fine. Maybe I'm missing something?)
Related
I have 2 images left and right from center which are placed nicely, but when the screensize is < 1920px, a scrollbar is created because the right image is going "out of the Site". I just want it to be cut to the screensize / go over the side of the screen without widening it.
CSS of the images (simply placed in the body):
#fans_l {
position: absolute;
text-align: left;
margin-left: -955px;
margin-top: -228px;
z-index:3;
}
#fans_r {
position: absolute;
text-align: left;
margin-left: 399px;
margin-top: -228px;
z-index:3;
}
Body css:
body {
height: 100%;
width: 100%;
margin: 0px;
background-image:url(p/back.jpg);
background-repeat: repeat; text-align: center;
}
In this case, there are a few things you can do. The first two that come to mind are as follows:
You can declare in the body css that the overflow-x property be set to either none or hidden, effectively cutting off your excess pixels. Though, at a fixed image size, this may not be desirable on smaller browsers. Keep in mind that many people have monitors smaller than 1920px.
You can use a nifty little tool present in CSS3 called Media Queries. With them, you can change css rules based on a monitor width or height. Using this method, you can ensure that it appear full on all sizes of browser windows.
I am trying to center a element with text over an image and my code works fine everywhere, except on Safari (for windows, if that means anything), it even works on Internet Explorer 9!
Here is a fiddle: http://jsfiddle.net/keleturner/b7DeH/
The only way I have found is to give the .main a set height, but I can't do this for various reasons. Is there a way to get it the text to overlay in the middle of the image with a height: auto;?
I'm not sure if you have a specific reason for the heavy div nesting, but I've cleaned it up here: http://jsfiddle.net/b7DeH/3/
HTML:
<div class="main">
<span>Text</span>
<img src="http://placekitten.com/300/200?image=3" />
</div>
CSS:
span {
position: absolute;
width: 100%; top: 50%;
/* and other prefixes */
transform: translateY(-50%);
font-size: 20px; font-weight: 700;
color: red; text-align: center; }
The problem, as you noticed, seems to stem from a height issue. You have height: 100% for .in and .out but without any parent/ancestors to tell it what that height is 100% of, it'll just keep going, and I imagine it's basically taking the 100% height of the document, hence why it centers to the page and not the divs.
Try using absolute positioning for your span too.
span {
position: absolute;
}
I want to create an header image for my website.
I would like the image is always in the middle would have standing. When someone's browser reduced, the image in the center stand. Now I have an example that this site contains only get there no matter how this is done.
http://aarkcollective.com/
#Leeish has the right idea.
Another way is to use the following css
.center_element {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* half of the height of the header */
margin-left: -150px; /* half of the width of the header*/
}
With the HTML:
<img class="center_element" src="images/header_image.jpg" width="300" height="100">
div{
margin: 0 auto;
width: [whatever]%;
}
As long as your image/div has a fixed width or percent so it scales, it will stay centered with a left and right margin of auto. This is probably a duplicate question so you should probably look around for another answer.
EDIT
I am editing my answer based on your comments. I made this fiddle to do what I was talking about. http://jsfiddle.net/P8eDT/ I put two divs in it. One with an image and one without so you can see. The inner div is flexible width, set height, and stays centered. The image inside the second one is "responsive" in that it will always match the width of the div. As far as I can tell this is exactly what they are doing in your example site you posted. Posted below is the code for the INNER div (The one that is the image).
#inner {
width: 50%;
height: 100px;
margin: 0 auto;
background-image: url(/path/to/image.jpg);
background-size: cover;
background-position: center;
}
Please note you will need a javascript fall back for older versions of IE that do not support background-size:cover. I've done this before and I just use javascript to measure the width/height and which ever is longer I just set that one.
you can use position:fixed in your css
say that your header has a class of .header and a width and height of 800x50
in your css try:
.header{position:fixed; top:50%; left:50%; margin:-25px 0 0 -400px;}
edit if you do not want it to center vertically Leeish has the better solution
I'm trying to think of a clever way to deal with a part of a webpage where the image is going to be swapped out with different images (of varying widths, max being 620px wide), and a text caption is absolutely positioned over it. I want the text to absolutely position based on the width of the image rather than the width of the relatively positioned container.
I was thinking maybe something with background-image, rather than an image itself, but then I have to deal with the fact that it's an empty div with a background image, so I'd have to hardcode a height, which wouldn't work since some of these images would be taller than others.
Any solutions you guys can think of would be greatly appreciated. Thanks!
I'm not sure if I'm following 100%, but here's how to do what I think you're trying to do.
Create your container with position relative, set your widths and heights, and set overflow to hidden:
.container-outer {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
Next, create an inner container inside of it that simply has position: absolute
.container-inner {
position: absolute;
}
Finally, create your overlay text style to be 100% width and center horizontally (or however you want it to be positioned)
.overlay {
position: absolute;
text-align: center;
width: 100%;
margin: 0;
}
Here's the jsfiddle with an example: http://jsfiddle.net/BGvca/1/
Good luck!
I raise the previous answer with some more CSS
<div class="imageholder">
<div class="caption">Simon & Garfunkel</div>
<img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>
.imageholder{
position: relative;
float: left;
}
.caption{
position: absolute;
top: 0;
left: 0;
right: 0;
font-family: Helvetica,sans-serif;
font-size: 1em;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 1em 2em;
}
See the jsFiddle for reference.
If you make the div containing the image inline-block, its width will scale to the size of its content, ie your image.
Once the container is sizing correctly, you can center other child elements, like your caption, inside it using a wrapper with text-align: center, or no wrapper and value of auto for the left and right margins.
Here's an example: http://jsbin.com/uyajaw/3/edit (with ugly borders and backgrounds to show where stuff is)
Click the image to resize it and see the caption still centered.
Note that if your caption is likely to be larger than your image, it will probably expand the width of the container div, throwing off the center alignment. You can avoid this by making the setting position: absolute; left: 0; right: 0; on the caption, or by giving it a width that you know will always be smaller than your image.
I don't know if I'm over-thinking this, but here's a way to do it. If you specifically don't want to align the caption with the wrapper div, then you'll need to also account for the imagesLoaded event (jQuery plugin). Otherwise, you will either have an img width of 0 if not loaded, or you'll have the previously loaded img width in there (unless you go back to it).
Take a look at this Fiddle that shows a fixed width wrapper div and the caption centered on it.
my question is more or less self-explanatory, I am trying to find a standard dynamic way to centralize an element in the y-axis, much like the:
margin: auto;
For the x-axis. Any ideas?
I am talking about the following piece of code, empty page, align one image in the center.
<div id="main" style="display: block;">
<img style="margin: auto; display: block;"
src="http://www.example.com/img.jpg" />
</div>
Any help will be appreciated! :)
Just give up and use tables on this one, with vertical-align: middle. You can get away with just a single-row, single-cell table without feeling too guilty (I sleep like a baby about it). It's not the most semantic thing in the world, but what would you rather maintain, a tiny one celled table, or figuring out the exact height and doing absolute positioning with negative margins?
If you know the height of the element that you're trying to center, you can do this:
img {
display: block;
height: 500px;
position: absolute;
top: 50%;
margin-top: -250px; /* 50% of your actual height */
}
I know only one way for that:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}
This is for x and y axis - but width/height and margins have to be changed for every element. I hate it :-)
Additionally you get problems if the element is larger than the browser-window.
The best known method is to use absolute positioning. You set the top amount to 50% and then set a margin top of minus half of the element.
#main {
position: relative;
}
#main img {
position: absolute;
top: 50%;
margin-top: -(half your image height)px;
}
Here is a variation using vertical-align
http://jsfiddle.net/audetwebdesign/r46aS/
It has a down side in that you need to specify a value for line-height that will also define the height of the containing element that acts like the viewport (outlined in blue).
Note: You may be able to get around the window height issue by setting a height to the body or html element (100%) but you would need to try it out (see 3rd reference).
However, the good thing is that you don't have to do some math based on the dimensions of the image.
Here are some references related to vertical alignment:
http://css-tricks.com/what-is-vertical-align
http://blog.themeforest.net/tutorials/vertical-centering-with-css
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
and sometimes I have to remember the basics so I reread:
http://www.w3.org/TR/CSS21/visudet.html
This may not solve OP's problem, but may be useful in other contexts.
Using #menu img { vertical-align: middle; } in my style sheet works great for the latest versions of FireFox, Opera, Safari and Chrome, but not in IE9. I have to manually add style="vertical-align: middle" to every line of img code. For example:
<li><a href="../us-hosts.php">
<img src="../images/us-button.png" width="30" height="30"
alt="US Hosts" style="vertical-align: middle;"/> US Hosts</a>
</li>
Try this css:
margin-top:auto;
margin-bottom:auto;
display:block;