I've narrowed down my issue to a fairly simple case. This works (in Chrome, at least), displaying a "pop-up" which is mostly off-screen, with a slice of the right hand side on screen. When I hover over the visible part, the whole pop-up slides into view:
<!DOCTYPE html>
<html>
<head>
<title>Popout test</title>
<style>
#popout {
-webkit-transition: left 0.5s ease-in-out;
width: 200px;
height: 200px;
background-color: #cde;
border: 4px solid black;
padding: 4px;
left: -180px;
position: absolute;
top: 250px;
}
#popout:hover {
left: -4px;
}
</style>
</head>
<body>
<div id="popout">This is a test</div>
</body>
</html>
However, if I then move that exact CSS into an external stylesheet:
<!DOCTYPE html>
<html>
<head>
<title>Popout test</title>
<link rel="stylesheet" href="popout.css" />
</head>
<body>
<div id="popout">This is a test</div>
</body>
</html>
popout.css:
#popout {
-webkit-transition: left 0.5s ease-in-out;
width: 200px;
height: 200px;
background-color: #cde;
border: 4px solid black;
padding: 4px;
left: -180px;
position: absolute;
top: 250px;
}
#popout:hover {
left: -4px;
}
...the effect remains the same, but on page load the pop-up appears "popped out" and eases back off screen. With the style directly in a <style> in the html page, as in the first example, this doesn't happen; the pop-up starts "off screen", i.e. at left: -180px as I would expect.
I'm wondering if this is a "flash of unstyled content", with the added annoyance that because of the transition effect, it's actually a very obvious, slow effect?
Can anyone tell me for sure why this happens, and what's the least hacky way to avoid it?
Because of the way jsfiddle works, I can't reproduce the problem there, unfortunately.
Thanks, #easwee, for help in confirming what the problem wasn't :) I've now tracked down what's causing the problem. It was the AdBlock extension for Chrome. If I disable this extension, I don't see the problem.
In case it's helpful for anyone else tracking down this problem, you can quickly test to see if an extension is causing an issue by using a new "Incognito" window -- all extensions are disabled for Icognito windows in Chrome.
Related
I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display:block;
width: 10px;
height: 10px;
background-color: red;
border-radius:10px;
}
.required::after {
content: '';
display:inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
}
.required:hover::after{
transform: translateX(100px);
transition: 1s;
}
</style>
</head>
<body>
<label class = required>Name</label>
</body>
</html>
When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help
Put transition in .required::after because putting transition here make the hover effect to take a fix amount of time for start/end of effect while putting it in :hover make its start time as fix value while it don't specify its end time.
If want to apply transition on fix property use that property name before time in transition like here you can write transition: transform 1s; so transition will be applied on transform property value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;/*Put transition here*/
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class="required">Name</label>
</body>
</html>
In addition to previous answers, which correctly tells you to move the transition property to .required::after, you also need to be careful using transform: 1s without property names. By default this will create transitions for ALL properties.
The problem is that the transition is set only for the pseudo element when the user is hovering so as soon as the hover stops the transition property goes back to the default - i.e. no transition.
Moving that transition setting into the non-hovered class setting means it is there whether hovering is takng place or not so the return will also transition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class=r equired>Name</label>
</body>
</html>
I'm trying to make a webkit button with linear background along with an icon with the help of ::before element but it does not worked out. Is there any possible way to do the same?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="bar2">
<div class="nav-items">BOOKS</div>
<div class="nav-items">SONGS</div>
<div class="nav-items">COOK</div>
<div class="nav-items">GAMES</div>
<div class="nav-items">Recents</div>
</div>
<style>
.bar2{
display: flex;
width: 300px;
overflow-x: overlay;
background: grey;
}
.nav-items{
padding:10px;
}
.bar2::-webkit-scrollbar-track{display: none;}
.bar2::-webkit-scrollbar{background: transparent; height: 30px;}
.bar2::-webkit-scrollbar-button:single-button:horizontal:decrement{
background: url(angle-left.svg);
background-repeat: no-repeat;
background-size: 15px;
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment{
background: linear-gradient(to left,white,#00000000);
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment::before{
position: absolute;
background: url(angle-right.svg);
background-repeat: no-repeat;
background-size: 15px;
}
.bar2::-webkit-scrollbar-thumb{display: none;}
</style>
</body>
</html>
There's a few unusual things here:
You likely don't need most of these very specific browser prefixes. Browser prefixes should be a last resort for edge-cases related to a browser or engine.
There are no buttons in your example, consider using BOOKS tags instead of the <div>s you're using. If you're using Javasript use <button onclick=""> instead. Changing this will get you all the default browser behaviour that is really cumbersome to write yourself (tabindex, keyboard navigation, ...)
But most important for your question:
When using pseudo elements first thing to set is the content. Pseudo elements will not show without it. (MDN documentation)
So for the pseudo to work on .bar2, something like this should do it:
.bar2::before {
content: '';
display: block;
background: red;
min-width: 1rem;
height:1rem;
}
quite simply I want to make an animated tile type button.
I'm not sure what the issue is (probably an outdated server) but css3 properties don't work. (I'm using ie11 so I know they should work on my browser).
below is my code, what isn't working is RGBA or transition (which I believe to be CSS3 attributes, please correct me if I'm wrong)
any help on a workaround would be greatly appreciated, I tried to use modernizr but it just completely bamboozled me.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css">
<style>
.tile{
height: 190px;
width: 190px;
overflow: hidden;
background-repeat: no-repeat;
max-width: 100%;
text-align: center;
vertical-align: middle;
background-size:190px 190px;
}
.caption{
background-color: rgba(0,0,0,0.4);
overflow: hidden;
color: #fff;
font-weight: bold;
margin: 150px 0px 0px 0px;
height: 190px;
width: 190px;
}
.caption:hover {
transition: margin .5s;
margin: 0px 0px 20px 0px;
background-color: rgba(0,0,0,0.4);
cursor: pointer;
}
#description{
overflow: hidden;
margin: 25px 0px 0px 0px;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="tile" style="background:url('images/tile1.jpg'); background-size:190px 190px" >
<div class="caption" onclick="alert('test');" >
<p>Some caption</p>
<p id="description">Some lengthy description that may potentially overflow into two lines</p>
</div>`enter code here`
</div>
</body>
</html>
edit::
as per my lower post this is actually due to compatibility mode, this will be forced on the majority of people using the site so does anyone know if a workaround?
Regarding Transparency
The transparency via the background: rbga(...) property appears to be working just as expected in Internet Explorer 11 per your example:
Another option would be to use the CSS opacity property, which functions similar to your use-case, however it just handles the transparency level. It does functiona a bit differently however as it is applied to the targeted element and all children of the element, so it isn't always the most appropriate choice.
opacity: 0.4;
If the transition is the issue...
If you want the transition to appear when you hover out of the element, you'll also need the transition property on your non-hover selector as well :
.caption{
/* Other properties omitted for brevity */
transition: margin .5s;
}
which can be demonstrated below:
Is there something that you are expecting to occur that isn't?
My problem is as follows: I replaced some items (navigation, footer) in my HTML-code by adding objects instead and loading them externally. Since I did that, I can't load background pictures into my 'collage' part of the website.
HTML: Stripped it off of everything not part of the problem (except for the content).
The container is just a wrapper for the whole thing. My website will contain a bunch of images in the middle that link to the appropriate websites and, on hover over, display a short description and a title.
.collage is used to style the overall frame of the element
id will be used to add the background images (worked before!)
HTML-Part:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<title>Startseite</title>
</head>
<html>
<body>
<div id="container">
<article>
<div class="collage" id="cg">
<a href="#">
<div class="text">
<h2>CG-Projekte</h2>
<p>
Computergerenderte Projekte, basierend auf der Open-Source-Software 'Blender', sowie Tutorials für einige der Projekte.
</p>
</div>
</a>
</div>
</article>
</div>
</body>
</html>
Use the first part for general purposes.
body: font-size so I can scale all em elements with one value (mobile)
#container: Placed in the middle, positioned accordingly, slightly darker than the overall background. Pretty basic
article .collage: Display as table to make the image hover-over work properly (which it does even now)
#cg: The part that isn't working. I can change the background-color with this tag, but not the image
.text parts: Those are the designs for the hover-over part, they work as far as I can see. I am using opacity to make it invisible, until it is hovered over.
CSS-Styling:
*{
margin: 0;
padding: 0;
}
body{
font-size: 100%;
background-color:#2B2B2B;
}
#container{
margin: 0 auto;
margin-top: 100px;
min-height: 50em;
min-width: 70em;
max-width: 80em;
background-color: #2A2A2A;
border: 2px solid white;
}
article .collage {
display: table;
height: 500px;
width: 700px;
margin: 100px 0 0 5px;
border: 1px white solid;
}
#cg{
background: url("cg_collage.jpg");
}
article div .text{
height: 400px;
width: 800px;
background: rgba(0,0,0,0.55);
position: relative;
top: 0;
left: 0;
vertical-align: middle;
display: table-cell;
opacity: 0;
transition: all ease-in 0.1s;
}
article .collage a{
text-decoration: none;
}
article .collage .text{
padding: 0 10px 0 10px;
}
article .collage .text h2{
text-align: right;
text-decoration: none;
color: #ADFF5C;
line-height: 70px;
font-size: 40px;
font-family: monospace;
border-bottom: 3px ridge #FFFFFF;
line-height: 50px;
}
article .collage .text p{
text-align: right;
font-family: Arial, Helvetica, sans-serif;
margin-top: 5px;
color: #ADFF5C;
}
article div:hover .text{
opacity: 1;
}
Folders
As I said: I can change the background color fine, hover-over works perfectly. The only thing that won't work is the background-images. Images work fine if I embed them in the html-file.
I can't figure it out and a different viewpoint might find the 'Error 30' ;)
All of the other answers are correct, in the sense that your paths are not correct. The reason why this is happening is b/c your CSS file is in, I'm assuming, the "styles" folder, and when you reference your image, the path is assuming that the image is in the same folder as your CSS file.
Instead of using ".." to "back out" of a folder, it's always a best practice to use relative paths. Reason being, if you move files, folders, etc, then the path will always be correct.
Hence, instead of using background: url('../cg_collage.jpg'), you should use background: url('/cg_collage.jpg'). The "/" at the beginning tells the file(s) to look at the root and start from there. So rather than always counting how many folder structures you need to "drop back", use relative paths.
Also, a good practice is to always have your images in a folder, and name that folder appropriately (eg - "img" or "images" or w/e).
Helpful article on absolute and relative paths.
You have to change your CSS:
#cg{
background: url("cg_collage.jpg");
}
To:
#cg{
background: url("../cg_collage.jpg");
}
This is because your image is outside styles folder (where your stylesheet is).
I am not sure but CSS is looking for image file in its direcotry (styles). Try this one:
#cg{
background: url("../cg_collage.jpg");
}
You code works perfectly, when the file cg_collage.jpg is in folder /styles. Is it there in your project?
In one of my projects i encounter a strange behavior in Google Chrome (v.18.0.1025.168 m).
In Firefox, IE, Opera works everything fine, but in Chrome there is an incorrect horizontal scrolling by clicking on links to hash-anchors.
Vertical scrolling works ok, but horizontal is very bad.
Sometime the requested div is displayed well, but in most cases the div-blocks are left or right outside the visual scope.
You can reproduce this with the following code.
By clicking on the top-lef-fixed menu: top, left, right, moreright, right for example.
I am not sure if this is a Chrome-Bug or i am overlook something?! What do you mean?
Is there a known workaround?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google-Chrome don't follows anchors properly - incorrect horizontal scrolling</title>
<style type="text/css">
body
{
min-width: 700px;
overflow: auto;
}
div
{
position: absolute;
width: 400px;
height: 300px;
z-index: 1;
padding-left:160px;
}
#top
{
border: 1px solid black;
top:0px;
left: 400px;
background: gray;
}
#left
{
border: 1px solid blue;
left:0px;
top: 400px;
background:#00d;
}
#right
{
border: 1px solid orange;
left:800px;
top: 800px;
background: yellow;
}
#moreright
{
border: 1px solid red;
left:1600px;
top: 1500px;
background:#d00;
}
div#fixedmenu
{
position: fixed;
top:0;
left: 0;
width: 150px;
height: 150px;
background: #ddd;
border: 1px solid gray;
z-index: 2;
margin: 0;
padding:0;
}
</style>
</head>
<body>
<div id="top" >top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="moreright">moreright</div>
<div id="fixedmenu">
<ul>
<li>top</li>
<li>left</li>
<li>right</li>
<li>moreright</li>
</ul>
</div>
</body>
</html>
For each link add onclick, who call a Javascript Jump-Function::
moreright
JS:
function jump(element_id)
{
var d = document.getElementById(element_id);
var gx = d.offsetLeft;
var e = d;
if (d.offsetParent) while (e = e.offsetParent) gx += e.offsetLeft;
var gy = d.offsetTop;
var e = d;
if (d.offsetParent) while (e = e.offsetParent) gy += e.offsetTop;
window.scrollTo(gx,gy);
}
.. and horizontal scrolling in Chrome works ..
Well it is definitely a difference in behavior between browsers, but I would stop short of calling it a bug. The right place to go to sort that out would be the Chrome Support Forums, in my opinion.
As for a work around, there are a lot of solutions, the most obvious of which is to just stick to vertical scrolling. The pertinent question to ask yourself is "what functionality am I trying to achieve and what compromises am I willing to accept?"
From the implementation you posted, I would assume you're looking for something to put more information on a single page load and quickly flip between different subsections. Do you really need to scroll horizontally? Is there some reason you're not using a javascript plugin? Jquery Tabs comes to mind, as does Jquery Accordion. There are probably a lot of other libraries that accomplish the same thing.
If there are other restrictions you're working with, feel free to post them and we can brainstorm some solutions.