I try to set up a simple landing page for my website, and there will only be 5 images, ordered in a pentagon-like form. (the images will be at pentagons edges each).
so instead of 5 images in a line or a row, there are 5 images in a "circle".
I was able to set the images in a responsive layout in the positions i want them, they are resizing on smaller screens and even the positions of the images are responsive.
but here begins the problem. the position of the images are set relative to the screen-borders
position: absolute; top: 50% left: 25%
for the first image, and so on for the other 4 images, in order to get them in positions of the five edges of a pentagon
when resizing the browser window the distance from one image to the other changes, of course this is because the position are set in relation to the window-borders.
and the order of the images of course breaks, until they will appear either to distant form each other or to close to each other.
is there no way to set images position in a absolute position in relation to a pre-set point on screen, such as the absolute center of the screen?
the five images should be responsive, but the order of the images and their distance to each other should always be in the same relation! (in order to keep the images in a circle, or otherwise said at the five edges of the pentagon)
right now I use following code with inline style, which looks great on a 980*1280px screen, but on smaller or bigger screens the position of the images is not anymore in the desired "pentagon" order:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color: #000;
}
.overlay1 {
width: 10%;
position: absolute;
top: 50%;
left:25%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay2 {
width: 10%;
position: absolute;
top: 25%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay3 {
width: 10%;
position: absolute;
top: 50%;
left: 75%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay4 {
width: 10%;
position: absolute;
top: 75%;
left: 37.5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.overlay5 {
width: 10%;
position: absolute;
top: 75%;
left: 62.5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<img src="site.com/content/uploads/2014/08/site-logo-vector- 280x280.png" class="overlay1" />
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay2" />
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay3" />
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay4" />
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="overlay5" />
</body>
</html>
UPDATE UPDATE UPDATE:
i edited following code (changed HTML as follows):
<div class="container">
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri" />
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri1" />
<img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri2" />
<img src="site.com/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri3" />
<img src="site.com/content/uploads/2014/08/site-logo-vector-280x280.png" class="ri ri4" />
</div>
(changed CSS as follows):
.container{
height: 100vh;
max-width: 100vh;
border: 1px red solid;
position: absolute;
top: 0%;
left: 0%;
}
img.ri
{
position: relative;
max-width: 25%;
}
img.ri:empty
{
top: 23%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri1:empty
{
top: 50%;
left: -5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri2:empty
{
top: 50%;
left: 25%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri3:empty
{
top: 60%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri4:empty
{
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
now everything is good, but i want the container to show always in the center of viewport (width only)
(position: absolute; left:50%; )
my image.ri:empty is obviously not working for .container (works only with elements with no children's!!!!!!)
does anybody have any idea how to center this?
position: absolute; left:50vw;
does not work as well.
the problem is obvious :
"Take note of the selector: img.ri:empty — empty is a structural pseudo-class which only matches elements which have NO children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration. We could have used an alternative, such as Conditional Comments, but this seems a far more efficient solution and requires just six additional characters."
so how can i set a CONTAINER to a REAL center of the screen-width?
You can try setting the images inside of a div and giving that div a static width, so that when the screen is resized the relative positions of the images stays constant (basically making the div non-responsive)
EDIT: Try looking at this and let me know if that's what you're looking for :) What I did was, I created a wrapping <div class="container"> and gave it the following properties:
.container {
border: 1px red solid;
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
Then I added the following class to each image, as well as the .overlay# class you had (with some parts removed):
.picture {
width: 10%;
position: absolute;
display: inline;
}
Reference: The second answer of this SO post
EDIT #2: An example of my comment below:
<div class="container">
<div class="adjusted">
// images, same as above
</div>
</div>
And the extra CSS:
.container {
/* same as above, plus the following line */
top: 50%;
}
.adjusted {
top: -100px; /* <--this would be half the height of your pentagon */
}
EDIT #3: I think I got it! There are two nested <div> containers, and there may be a few extra lines of styling, but it's pretty close. I think if you play with this then you might be able to make it work.
Good luck!
I HAVE THE SOLUTION: :)
anyway, something really confusing happens:
this is the (i guess) cleaner version of the code,:
fiddle example
#outer {
position: relative;
}
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
.parent{
height: 100vh;
max-width: 100vw;
border: 1px black solid;
position: absolute;
top: 0%;
left: 0%;
}
.container{
height: 100vh;
max-width: 100vh;
border: 1px red solid;
position: relative;
top: 0%;
left: 35%;
}
img.ri
{
position: relative;
max-width: 25%;
}
img.ri:empty
{
top: 23%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri1:empty
{
top: 50%;
left: -5%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri2:empty
{
top: 50%;
left: 25%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri3:empty
{
top: 60%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri4:empty
{
top: 60%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parent" id="outer">
<div class="container" id="inner">
<img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri" />
<img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri1" />
<img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri2" />
<img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri3" />
<img src="http://www.example.com/content/uploads/2014/08/example-logo-vector-280x280.png" class="ri ri4" />
</div>
</div>
anyway, look AT THIS!!!
(in the same fiddle example, just modify code as follows:)
remove the entire #outer html and css, and add a "}" sign at line 12 of css, and you get same result, only the outer border is removed...
WHY IS THIS????
it seems almost impossible to me, as this is a extra "}" sign and should break the code or am i wrong???
thank you for your help!
i hope my solution helps future seekers :)
well, I think your method isn't the best because it will always have a random element. I'd try using something like JQuery responsive image maps plugin for a better behavior, but if you're dead set on this approach, I'd try something like this:
1) first, build a "container box" for this element.
2) Then, inside it, build a 5x5 square grid (you'll need to use either Jquery to detect width or use absolute width with CSS). It's very important that these divs have the same width and height, even if empty.
3) Make all image widths 100%. After this, place the images like this:
1st image: 1st row, 3rd column
2nd and 3rd image: 1st and 5th col, 3rd row
4th and 5th image: 2nd and 4th col, 5th row.
This WILL WORK. And it will be 100% responsive. But quite honestly, I don't think it will look nice, so I encourage you to either use the JQuery path or to embrace the responsive models, and if you don't have a pentagon in a mobile, so be it. Of course, depends on your needs and taste
Related
I add some videos to my website and when I tested on Chrome it's working correctly, but when I tested on safari and Firefox it shakes. What is the problem?
This is my CSS code:
.parallax-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
When I read about this problem I think the problem in this part
transform: translate(-50%,-50%);
But I don't know how I can fix it.
Try this code
.parallax-background video {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I try to setup the position of diffrent images on a site. I use the Avada Theme to create a basic column layout (3 colums, 2 rows) and css to make more specific configurations on it. My divs, which are containing the img's have IDs I use.
#note_col1_row1{
position: relative;
z-index: 1001;
top: 5%;
left: 3%;
-webkit-transform: rotate(-2deg) scale(1.3);
transform: rotate(-2deg) scale(1.3);
}
#note_col2_row1{
position: relative;
z-index: 1001;
bottom: 4%;
left: 4%;
-webkit-transform: rotate(4deg) scale(1);
transform: rotate(4deg) scale(1);
}
#note_col1_row2{
position: relative;
z-index: 1001;
left: 2%;
bottom: 22%;
-webkit-transform: rotate(2deg) scale(1.2);
transform: rotate(2deg) scale(1.2);
}
#note_col3_row1{
position: relative;
z-index: 1000;
top: 4%;
left: 5%;
width: 170px !important;
-webkit-transform: rotate(-2deg) scale(1.2);
transform: rotate(-2deg) scale(1.2);
}
#note_col2_row2{
position: relative;
z-index: 1000;
top: 5%;
left: 5%;
-webkit-transform: rotate(-4deg) scale(1.3);
transform: rotate(-4deg) scale(1.3);
}
#note_col3_row2{
position: relative;
z-index: 1000;
bottom: 15%;
-webkit-transform: rotate(2deg) scale(0.8);
transform: rotate(2deg) scale(0.8);
}
So now my problem is, if I load the page the bottom,top... positions don't apply to the divs. This only happens if I start the debug view via F12 and change a value to any other (for example "bottom: 22%;" to "bottom: 21%;").
Is there any reason why this behaves like this and any possibilty to solve the problem?
Try setting position to absolute rather than relative like this:
#note_col1_row1
{
position: absolute;
...
}
I have been working at this for like 3 hours and everything I try in Google Chrome doesn't fix it, nor sizing the images to massive width/height.
Basically, I would like to get rid of that whitespace around the 3 images under "featured products." I want all the images to span those widths (big one is like 66.66 and the two smaller ones are 33.33%). No amount of resizing the images or changing the code is working, so I must be missing something.
The password to get in is "fusrodraw"
http://shop.thewiredlife.net/
Any help would greatly be appreciated!
.grid-product__image {
position: absolute;
top: 50%;
left: 50%;
display: block;
margin: 0;
height: 100%;
width: 100%;
padding: 0px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
Take the max-width and max-height out of the equation
I tried the solutions in the previous questions, but none was successful.
I've 2 dynamic text that need to be rotated and centered into their content div (left and right).
All the solution that I tried doesn't work
Here's the code:
#sideLeft span,
#sideRight span {
bottom: 50%;
display: block;
line-height: 0em;
position: absolute;
text-align: center;
top: 50%;
white-space:nowrap;
width: 100%;
}
#sideLeft span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#sideRight span {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#sideLeft,
#sideRight {
height: 100%;
position: fixed;
top: 0;
width: 18%;
}
#sideLeft {
left: 0;
}
#sideRight {
right: 0;
}
<div id="sideLeft"><span>Left text lorem ipsum sit amet</div>
<div id="sideRight"><span>Right text pellentesque lectus erat, condimentum quis sem vitae, facilisis </span></div>
Please, could you help me?
Thanks in advance :)
br0k3n
To center something (since you use transforms) you can translate it to -50% in both directions, after positioning it to the center of its container.
Also you should set the transform origin to be at the center of the element.
So this should fix it
#sideLeft span, #sideRight span {
top: 50%;
left:50%;
position: absolute;
text-align: center;
white-space:nowrap;
-webkit-transform-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-0-transform-origin:50% 50%;
transform-origin:50% 50%;
}
#sideLeft span {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
-moz-transform: translate(-50%, -50%) rotate(-90deg);
-ms-transform: translate(-50%, -50%) rotate(-90deg);
-o-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
#sideRight span {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-moz-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg);
-o-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
Demo at http://jsfiddle.net/uwLdox77/
unfortunately I have problem with setting image height with CSS, I've searched many places but found no answer that helped. Let me explain the problem. I have following CSS (it works) :
#cube
{
position: absolute;
max-width: 80%;
top: 50%;
left: 50%;
border-radius: 3px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
text-align : center;
}
#cube
{
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media screen {
#cube {
max-height: 80%;
max-width: 80%;
}
}
</style>
for the image :
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
It's working fine - but there is no container. When I added container in order to position text... :
html, body {
height: 100%;
margin: 0;
padding: 0;
color: black;
font-family : Arial;
}
#cubeContainer
{
position: absolute;
top: 10%;
left: 10%;
text-align : center;
}
#cubeContainer
{
top: 50%;
left: 40%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-90%, -60%);
}
#cube, #google {
position : relative;
top : 0px;
left : 0px;
max-width: 100%;
max-height: 100%;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
#cube:hover, #google:hover {
box-shadow: 0 0px 1px rgba(0,0,0,0.9);
}
#googleContainer
{
position: absolute;
top: 50%;
left: 60%;
text-align : center;
}
#googleContainer
{
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-10%, -60%);
}
#cube, #google {
position : relative;
top : 0px;
left : 0px;
max-width: 100%;
max-height: 100%;
margin-bottom : 10px;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.9);
}
#cube:hover, #google:hover {
box-shadow: 0 0px 1px rgba(0,0,0,0.9);
}
#media screen {
#cubeContainer , #googleContainer {
max-height: 80%;
max-width: 40%;
}
}
For following elements :
<body>
<div id="cubeContainer">
<img src="res/cube_na_strone.png" class="ri" id="cube"/><br />
<a id="cube_a" href="#">Wirtualne wycieczki</a>
</div>
<div id="googleContainer">
<img src="res/googleview.png" class="ri" id="google"/><br />
<a id="A1" href="#">Business View w mapach Google</a>
</div>
</body>
Problem begins :( Image's height remains unchanged.
Here are those sites :
http://vr.fotomilo.pl/
http://vr.fotomilo.pl/vr.aspx
Containers #cubeContainer and #googleContainer need height. Try to set height to 100%
try changing the image's dimensions via this rule:
div#cubeContainer img{}
div#googleContainer img{}