I'm displaying some images on my page in Image Elements. However with different screen resolutions they move to different places on the page.
How should I write the below code so that my div/elements will remain absolutely positionned and won't change in different resolutions?
<div class='imageElement2'>
<a href='#' title=''><img alt='' height='364' src='http://farm8.staticflickr.com/7209/6978440877_10b1fcffc4_o.jpg' width='940'/></a>
</div>
<style>
.imageElement2 {
width:1020px; height:400px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left: -510px; margin-top:40px; text-align:center;
visibility:visible;}
</style>
Remove the
left: 50%; top: 0%;
and replace them with a fixed px levels like
left: 50px; top: 0px;
because 50% means the position at 50% of the width of the browser area.
So you see, on a 1024 screen the div will be at 512 and on a 1366 screen the div will be at 683.
HINT: Never use % if want an "absolute" positioning on any browser.
HINT: if you are trying to position the div in the middle of the screen just apply these styles
width: your-desired-width-on-any-browser px;
margin: auto; //to bring it middle
//additionally you can add "top: X px/%/em; to position it vertically.
Have a good day.
If I understand it correctly, the best way would be to make a wrapper div with at width and height, elements in this div will not be affected by changing page width, you will just get a scroll.
This should do the trick, just append it to a wrapper element.
.imageWrapper { width: 500px; }
However a screendump of what you want, would be great!
Related
Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/
.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}
Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen.
Thanks.
You have either the CSS unit vh that is in centieth of viewport height. In which case you would write:
height: 100vh;
Or you can force the div to stick to top and bottom of the closest positioned parent (so give position:relative or position: absolute to a parent that has the appropriate height):
position: absolute;
top: 0;
bottom: 0;
tell me if you need more details
div{
margin:0px auto;
width:100%;
height:100%;
}
I am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:
http://jsfiddle.net/f9krj/2/
HTML
<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>
CSS
a.image_container {
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
}
a.image_container img {
width: 100%;
}
As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?
Original Answer:
If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
Your need, HTML:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
And CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/
Explanation
DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.
The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. min is the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;
Now image, this is set to an absolute position with left:50% and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.
Magic moment:
transform: translate(-50%, -50%);
Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.
Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.
This is just a tricky way to figure out centroid of the image and the parent DIV and match them.
Apologies for taking too long to explain!
Resources to read more:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
https://css-tricks.com/centering-css-complete-guide/
Change your code:
a.image_container img {
width: 100%;
}
To this:
a.image_container img {
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
}
http://jsfiddle.net/f9krj/5/
Use max-width property of CSS, like this :
img{
max-width:100%;
}
you can use flex box for it.. this will solve your problem
.image-parent
{
height:33px;
display:flex;
}
If you take answer's Shekhar K. Sharma, and it almost work, you need also add to your this height: 1px; or this width: 1px; for must work.
For me the easiest way to do it without using position absolute, translate.
<div class="img-container">
<img src="yoururl" />
</div>
the CSS should look like this :
.img-container {
height:100px;
width:100px;
overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}
If all your trying to do is fill the div this might help someone else, if aspect ratio is not important, is responsive.
.img-fill > img {
min-height: 100%;
min-width: 100%;
}
I have two images which need to be over each other. The images have to also be responsive and therefore have a percentage width and height.
<div class="container">
<img src="res/bigger.png/>
<img src="res/smaller.png class="icon"/>
</div>
.container {
width:100%;
height:100%;
background-color:blue;
postion:relative;
}
.container img {
max-width:100%;
max-heihgt: 100%;
height: auto;
width: auto;
}
.icon {
position: relative;
top: -70%;
left: 20%;
z-index: 50;
width: 10% !important;
height: auto !important;
}
As the two images do not have the same proportions when re-sized the smaller image which is on top of the bigger image will lose its position relative to the bigger image. How could I maintain the position of the smaller image relative to the bigger image when I re-size the page?
An example of this problem could be found here http://jsfiddle.net/5YQFV/
How about, instead of using two images you would replace the largest image with a container like this
<div class="the-gang">
<img src="res/smaller.png" />
</div>
And then set the position of the container to position:relative but the position of the smaller image to position:absolute like this
.the-gang{
position:relative;
width:100px;
height:75px;
}
.the-gang img{
position:absolute;
top:10px;
left:10px;
}
This way the smallest image will always stay where you place it, as the absolute position will be relative to it's container.
The possible disadvantage is that you have to set minimal height and width of the parent container, but the advantage is that it will be done purely in CSS and no javascript will have to be used.
I have tried all sorts of things to try and get this working, I'm a little dated with html markup so please forgive me but i'm sure my problem can easily be solved. I have 2 divs (1 image logo and 1 flash object flame ) which I would like to center inside a container div which I would like to be centered with any browser screen resolution. I would also like the horizontal scroll bars to only appear when the browser window is below 800px wide hence the min-width:800px (this works ok) on the container div. my child divs keep appearing above and below each other and when I set them to absolute positioning the just appear to the left ontop of each other.....I just want everything to be aligned centrally and both divs at the top of the screen, can someone please help and point me in the right direction.
Thanks
Andy
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
}
.logo {
margin: 0 auto;
position:absolute;
vertical-align:top;
display:inline-block;
width:1059px;
height:136px;
}
.flame {
margin: 0 auto;
vertical-align:top;
position:absolute;
display:inline-block;
width:861px;
height:134px;
}
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container {
margin:auto;
width:800px;
height: 500px;
background-color:#F00;
}
.logo {
margin:auto;
float:left;
width:450px;
height:136px;
background-color:#096;
}
.flame {
margin:auto;
float:left;
width:350px;
height:134px;
background-color:#099;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">LOGO GOES HERE</div>
<div class="flame">FLASH CONTENT GOES HERE</div>
</div>
</body>
</html>
Using floats, you can make your divs stack up next to each other. However, the sum of the widths of the divs must be less than or equal to the width of the container, otherwise the 2nd div will appear below the first div. Your container will also always be centered to the browser. Also, if the width of the browser is below 800px (width of the container), horizontal scroll bars will appear.
One last thing, this code centers the container but does not center your divs if the sum of the widths of the floated element are less than the width of the container.
You can go through this link to learn how to do that as well.
EDITED:
Alternately, if you know the sum of the widths of the logo and the flash banner, which I think you do, you can create a div with width equal to the sum and apply a margin:auto property to it. Involves use of an extra div and prior knowledge about the width of your logos and flash banners, but I think will suit your purpose.
Hope this helps. :)
.container {
margin-left: 0 auto;
margin-right: 0 auto;
min-width:800px;
width: 100%;
height: 500px;
background-color:#F00;
**position:relative;**
}
#media only screen and (max-width: 800px){
html{
overflow: auto;
overflow-y: hidden;
}
}
Final version
To sum it up - the task was basically this:
have two elements width different widths be aligned alongside in one row
this row should always be centered as kind of a header
only when the screen is smaller than 800px a horizontally scrollbar should appear
the non-visible edges are trimmed on the left and the right side
This is a possible solution:
Try before buy on jsfillde.net
And a little explanation:
HTML markup
<div class="wrapper">
<div class="center">
<img src="" alt="">
<object></object>
</div>
</div>
CSS
body, html {
width: 100%;
min-width: 800px;
height: 100%;
margin: 0;
padding: 0;
}
div.wrapper {
width: 100%;
height: 134px;
overflow: hidden;
}
div.center {
position: relative;
margin:0 auto;
width: 800px;
height: 100%;
}
div.center > img {
position: absolute;
top: 0;
left: -499px;
}
div.center > object {
position: absolute;
top: 0;
left: 560px;
}
On "How it works"
The first div wrapper spans an area from the left side to the right side. This is the space which is always visible. To cut off the edges I used overflow: hidden; on that element. So everything that sticks out will be invisible.
The second div center is placed in the middle of the viewport using margin: 0 auto. It has a fixed width. I used 800px because this was the desired min-width in the question. It will work with any other wide, too.
Now it's time to align the two header elements. Both have a fixed width. In this case the image is 1059px and the object is 861px, making it a total of 1920px. The middle of those elements would be obvious at 960px. Our container's center is actually at 400px, because the min-width of the page is 800px. So the actually meeting point of both elements is at 560px within this container, as we have a 160px shift. So for the object it's easy: simple set left: 560px;. But the left container must be placed, that it ends at this point. We had a width of 1059px and substract it from the 560px and get the final value of left: -499px;.
As the container in the middle is centered, both elements will be centered, too. And as the wrapper's overflow is hidden, both edges will be cut off at the end of the viewport. Without any scrollbars visible.
At the end, there's only one thing left: Set min-width:800px on the <body>-tag, so that the scrollbars get visible as soon, as the window is smaller than 800px.
First answer
position: absolute takes the element out of there parents flow, except you set the parents position explicitly:
.container {
position: relative;
}
This should do the trick, but it didn't test it with your markup.
Let's say I want to place an element in the center of my viewport for use as a popup message. It should fulfil the following:
Element should remain centered (both horizontally and vertically) within the browser, even if element size changes dynamically
Element should stay centered if browser is resized
No Javascript is allowed
Would still work on IE7
Is there a nicer way of achieving this without resorting to the table-based solution below?
<table style="position:absolute;width:100%;height:100%">
<tr>
<td align="center">
<span id="centeredContent">I always remain centered</span>
</td>
</tr>
</table>
The best solution (in my opinion) is to use absolute positioning to place the top left of the element at 50%/50%, then shoving the element back into the centre using negative margins. The only drawback is that you have to specify a width and height of the element. Here's an example:
HTML:
<div id="centerme">
Hello, world!
</div>
CSS:
#centerme
{
position: absolute;
left: 50%;
top: 50%;
/* You must set a size manually */
width: 100px;
height: 50px;
/* Set negative margins equal to half the size */
margin-left: -50px;
margin-top: -25px;
background-color: cornflowerblue;
}
Here's a demonstration on jsfiddle: http://jsfiddle.net/UGm2V/
If you really require the centred content to have a dynamic height, there's a more advanced solution. Be ware that it won't work in older IE browsers. The HTML goes as follows:
<div id="outter-container">
<div id="inner-container">
<div id="centred">
<p>I have a dynamic height!</p>
<p>Sup!</p>
</div>
</div>
</div>
The outter container is required to cover the width and height of the page. It's a block element with absolute positioning.
The inner container is actually a table! That's decided by the display: table css property. The win here is that you don't actually need any table HTML.
The #centred div is the last required element. It still covers 100% of the page's width and height, but anything placed inside it will be centred both vertically and horizontally. This is the css you need, with explanations:
/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
display: table;
width: 100%;
height: 100%;
}
/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And of course, here's a jsfiddle demonstration to go with it: http://jsfiddle.net/N7ZAr/3/
If it is a fixed size element, you can do something like this:
#centered {
position:absolute;
width:200px;
height:400px;
top:50%;
left:50%;
margin-left:-100px; // negative-half of element's width
margin-top:-200px; // negative-half of element's height
}
The trick here is top:50%; left:50%;. Combine it with a margin-left and a margin-top equal to negative-half of your width and height, and your element will be centered in your page.
If you do not use a reset stylesheet such as Eric Meyer's CSS reset or normalize.css, it's important you set your body to margin:0; for this trick to work.
Here is a jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/
Live example of a site I did: http://althotels.ca/
http://milov.nl/code/css/verticalcenter.html
check the source code
If you don't know the size of the centered content, you need a two step centering
Example here: http://jsfiddle.net/G6fUE/
<div class="popup-center">
<div class="content">
sadalshd<br />
sadalshd<br />
<img src="http://www.lorempixel.com/200/200" />
sadalshd<br>
</div>
</div>
.popup-center {
position: absolute;
top: 50%;
left: 50%;
}
.popup-center div {
margin-left: -50%;
margin-top: -50%;
}
for left/right centering, you can specify a width for the element and set the left and right margins to "auto".
For vertical centering, it's a bit trickier. You can use percentage heights, but remember to set the height of the body to be 100% or this won't work.
Don't know if this works in IE7, sorry.