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?
Related
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;
}
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?
I'm having some issues with a button in IE7. In everything else the button appears like this:
However, in IE7 the button appears like this.
I've tried to put together a jsfiddle with the code that is affecting the overall form and the fiddle seems okay (even though it is missing the image references) so I don't understand why IE7 is throwing a fit with this button and making it appear on the right of my content.
JsFiddle Code
JsFiddle
If i open this one in IE it works fine for me. any way give
<div class="logindetails password" style="clear:both;">
to the above div.
This should fix the issue in IE 7
div.links {
clear: both !important;
margin: 0 !important;
padding-top: 15px;
}
In the stylesheet, icams_specific.css find this section and replace all of it with this:
div.widget-container > div.search > form.search > div#search_links > input.button {
background-color: #E7E7E8;
background-image: url("/incl/images/search.png");
background-position: 50% 50%;
background-repeat: no-repeat;
border: medium none;
cursor: pointer;
height: 35px;
margin-left: 257px;
margin-top: -35px;
padding: 0;
transition: all 0.25s linear 0s;
vertical-align: top;
width: 38px;
}
To move the search button left right, change margin-left: 257px; to the required value.
You will also need to keep the change made to div.links above
K so I have an image in my html and I am settings its src using css and background: url() the reason for this is because I want to toggle the class on click so that I go back and forth between images. Everything works except for the fact that my image has a border and nothing I do seems to get rid of the stupid thing.
Here is the html:
<img class="minus" />
and here is the css:
.minus{
position: relative;
margin: 0 0 -3px 5px;
float:right;
background: url(/images/mobile/minus.png) no-repeat;
border: none;
display:block;
width: 16px;
height: 16px;
}
I have tried everything I can think of border:0px; border:0; border-width: 0px; border-style:none; anything I could find on here or on the web basicly and nothing will get rid of the stupid border. Any insight would be appreciated.
Edit: using google chrome.
I'm certainly able to reproduce this error in Chrome. Here's a demo:
.minus{
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<img class="minus">
However, w3.org specifies (emphasis mine):
The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the tag. SRC is mandatory.
Setting a CSS background-image is not the same as setting the src HTML attribute of <img>... and perhaps that's your problem. You should consider using a different element, e.g.: a <span>:
.minus {
display: block;
margin: 0 0 -3px 5px;
background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
width: 100px;
height: 100px;
}
<span class="minus"></span>
Here is a fiddle that uses a div with the class (I see no border). When I try an img with the class, it shows nothing (in firefox 7)
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.