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 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
The pseudo :before works on Firefox, Safari but not in Chrome.
Its a square box rotated to form a diamond shape. But, using :before the bg is again rotated backwards and given a position fixed. It gives a really nice effect !
Check My Site :
www.wangeltmg.com
When you scroll at first, the background overlaps and creates blurry image to get cleared.. !
All i did is
#element3
{
width: 1000px;
height:1000px;
line-height: 5em;
margin: 0px auto;
border: 0px solid #666;
border-radius: 3px;
margin-top:150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
overflow: hidden;
left:0; right:0;
top:10%;
}
#element3:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -10%;
z-index: 0;
background: url(../img/custom11.jpg) 0 0 no-repeat fixed;
background-size:135% 135%;
background-position:140px -315px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Is there anything to work on regarding the compatibility with Chorme ?
I would love to have your answers fellas.
Thanks.
Your CSS background is behaving bizarre on chrome because you needed to add:
-webkit-transform CSS 3 transform with prefix for Chrome.
.parallax-two #element3 {
border: 0 solid #666666;
border-radius: 3px;
height: 1000px;
left: 0;
line-height: 5em;
margin: 150px auto 0;
overflow: hidden;
position: absolute;
right: 0;
top: 10%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 1000px;
}
http://fiddle.jshell.net/mmvdz/6
http://fiddle.jshell.net/mmvdz/6/show/
For Firefox, Chrome, Opera, IE etc. it is preferred to add the vendor prefix CSS3 versions as well. It is needed for older versions of Firefox as well for example.
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
If you use editor like Sublime Text to code manually. You have plugins which add this vendor prefix automatically.
http://www.hongkiat.com/blog/css-automatic-vendor-prefix/
I do see that you have another problem on Chrome. The fixed div has issues with z-index. And it seems it has to do with CSS 3 transform properties for webkit which makes the triangle appear above the fixed div but without the blur effect in Chrome.
#home-wrap {
-webkit-backface-visibility: hidden;
}
I am new to web development (and self taught) so please excuse if this is a dumb question.
How do I show text inside an icon? Such as number inside a heart etc.
I assuming for this purpose webfont icon will not work?
Is using CSS shapes is better for thus purpose - so that it will render when resized etc?
Or is vector better option.
Here is the CSS for heart that I was planning to use. But I am not clear as how to display text inside.
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
trans.orm-origin :100% 100%;
}
Thanks in advance!
Here is my solution
I inserted a span between the div tags. That way, like mbratch said, you can set the z-index property as a higher value. This, along with position:absolute, will give you what you are looking for.
I used jQuery to vertically center it, in case you wanted multiple lines of text