If you run this simple Xul example, you can see that when you scroll from the last (3°) button to the first, using tab, the middle button disappear. Any idea why? And how to fix?
(to run it you'll need to put an png image named "img.png" at content folder)
test.xul
<?xml-stylesheet href="chrome://test/content/test.css" type="text/css"?>
<window id="desktop" title="test" width="1280" height="720" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<scrollbox>
<button image="chrome://test/content/img.png" />
<button image="chrome://test/content/img.png" />
<button image="chrome://test/content/img.png" />
</scrollbox>
</window>
test.css
#desktop {
border-style:solid;
border-color:transparent;
border-width:50px;
}
button {
position: absolute;
-moz-appearance: none;
border: none;
background: url(""); /* nothing */
width: 128px;
height: 128px;
z-index: 1;
}
button image {
width: 64px;
height: 64px;
}
button:focus image {
width: 128px;
height: 128px;
}
scrollbox {
background-color: #555555;
}
Solved inserting the scrollbox inside a box, and setting the scroll's background color to the box.
Related
I have created an element where when you hover within the area of the element a hover effect is applied (change background colour), on top of this element is a button.
When I hover over the button it causing the other hover effect to disappear, I want to be able to keep the hover for the whole time that the mouse is within the area of the first element.
Example Code Here
So when I hover over the button in the example, I still want the background of the a tag to be black. At the moment when I hover over the button it causes the black background to disappear. I also still want to be able to click on the button.
To achieve what I want to achieve would I need to use js? Or can it be done in CSS?
#button1 {
position: absolute;
z-index: 100;
top: 10%;
left: 15%;
}
#label {
position: absolute;
z-index: -10;
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
}
#label span {
color: white;
}
#label:hover {
background-color: black;
}
#label button:hover{
color:white;
<a id="label"><span>Hidden Until Hover</span>
<button id="button1">Test Button</button>
</a>
you need to wrap your button inside the #label !
this is how its work !
Put #label in front, and use + select next slibing dom
#button1 {
position: absolute;
z-index: 100;
top: 10%;
left: 15%;
}
#label {
position: absolute;
z-index: -10;
border: 1px solid red;
width: 200px;
height: 200px;
text-align: center;
}
#label span {
color: white;
}
#label:hover {
background-color: black;
}
#button1:hover + #label {
background-color: black;
}
<button id="button1">Test Button</button>
<a id="label"><span>Hidden Until Hover</span></a>
I have applied a hover effect to an image and want to keep this hover effect when hovering over a button placed on top of that image. I know questions around these types of parent/child issues have been asked before but these answers were not extensive enough to help me resolve this particular issue on my own. A CSS only solution would be nice but I guess it requires some JS to work around it.
Here is the JSfiddle:
http://jsfiddle.net/stijn777/k8dbfs3r/3/
As you can see in the HTML below I want the hover effect on the image class to also be applied when hovering over the button inside the picture class.
<div class="picture">
<a class="image" href="./profile-picture.html">
<img alt="" src="http://www.liverpoolblogg.no/wp-content/uploads/2013/09/Daniel-Sturridge1.jpg">
</a>
<input class="image btn btn-6 btn-6d" a href="www.test.com" type="button" value=" ADD " />
<div class="player">
Name
</div>
</div>
I used the following CSS for the image and the button on top of the image.
.image:after {
content:'\A';
position:absolute;
width:55%; height: 70%;
top:0; left:0;
background:rgba(0,0,0,0.25);
opacity:0;
border-radius: 6px 6px 0px 0px;
}
.image {
width: 100%;
}
.image:hover:after {
opacity:1;
}
.picture:hover input {
display: block;
}
.picture .player {
position:absolute;
margin-top: -40px;
background-color: white;
opacity: 0.7;
width: 55%;
height: 40px;
padding-top: 8px;
text-align: center;
}
.player a {
color: #000000;
font-family: sans-serif;
font-size: 14px;
text-decoration: none;
}
.picture input {
position:absolute;
top: 0;
left: 0;
margin-top: 10px;
width: 55%;
}
Hope someone can help me out,
Stijn
change the .image:hover:after rule to .picture:hover .image:after. :hover applies to whatever your mouse is over, as well as its parent element(s), but the button and image are siblings. changing the hover to be detected on their mutual parent div (.picture) causes the hover to be correctly detected
.picture:hover .image:after {
opacity:1;
}
http://jsfiddle.net/5n7gj8uc/
You could activate the hover effect using the parent div, like so:
.picture:hover > .image:after {
opacity:1;
}
http://jsfiddle.net/k8dbfs3r/5/
Hoping someone might be able to help me with this.
I have a header graphic which I've floated / positioned multiple transparent (png) images on.
One of these images is a "Call Us - 555-555-555" graphic (transparent png)
What I am using right now:
<img src="http://www.domain.com/images/numfloat.png" alt="Call Now!" id="flo">
It appears anytime I add an "id=##" to this, it breaks the link functionality. Same when I tried this with text.
Would anyone have a solution for this they could share with me please?
Thank you!
Update:
The contents of the header area:
<div id="header-box">
<a id="header-link" href="http://www.domain.com"></a>
<a class="call" href="tel:000-000-0000">
<img src="http://www.domain.comimages/numfloat.png" alt="Call Now!" id="flo">
</a>
</div>
The relevant CSS:
#flo
{
width: 220px;
height: 83px;
}
.call
{
position:absolute;
top: 43px;
left: 810px;
}
#header-link {
position: absolute;
top: 43px;
left: 575px;
width: 200px;
height: 80px;
background-color: transparent;
border: 0px solid yellow;
}
.custom #header {
position:relative;
padding-left: 0;
padding-right: 0;
border-bottom: none; margin-bottom: 15px; height: 190px;
background-image: url(http://www.domain.com/images/header_graphic.jpg);
}
You are moving your image out of your link by moving the image with the position absolute. Do this:
CODE: http://jsfiddle.net/D67zL/1/
HTML
<a class="call" href="tel:555-555-5555">
<img src="http://www.domain.com/images/numfloat.png" alt="Call Now!" id="flo">
</a>
CSS
#flo
{
width: 220px;
height: 83px;
}
.call
{
position:absolute;
top: 43px;
left: 810px;
}
Turned out it was the menu container below the header that was stretching over the graphic I was trying to link.
The solution jtorrescr was correct but was being undone by my menu!
The following CSS opens a modal window within the iframe as it should. But I would like the modal popup to overlay the parent and not just within the ifram. Is there a way to modify the CSS to get the popup to overlay the parent? Just as a side note, the id of the iFrame may change, so I won't be able to rely on a specific id. All suggestions are appreciated, I'd even consider another tool such as javascript.
<iframe frameborder="no" height="200px" id="066E0000001KmQ9" marginheight="0" marginwidth="0" name="066E0000001KmQ9" scrolling="no" title="PredictiveWholesalingRelatedList" width="100%">
<apex:page standardController="Contact"
extensions="myExtension"
sidebar="false"
showHeader="false"
title="My Page">
<apex:form >
<apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
<apex:pageBlock >
This is just filler text from the Salesforce General.
</apex:pageBlock>
<apex:outputPanel id="tstpopup">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
<apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
This is where I would put whatever information I needed to show to my end user.<br/><br/><br/>
<apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>
<style type="text/css">
.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 500px;
margin-left: -250px;
top:100px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
</style>
I'm trying to use this example: http://www.salesforcegeneral.com/salesforce-modal-dialog-box/
Try to change your .custPopup to:
.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
padding:10px;
}
I have the css code below along with an image to show it's output. I need help though 2 things.
This code works pretty good to show the username on the photo, however I noticed today while using chrome all day often when I would click a link that would take me to the page that has images with this code, it would not show the name on the image, it would just show the name below the image and the transparent black div would not be visible at all and the name would not even be on the image, I would then refresh the page and it would work fine, what could cause this, this was while my PC was acting like it was short on memory, could that be part of the issue?
I would like to make a bar show at
the top of the image that is the
width of the image and like maybe
2-3 pixels tall and have a
background color of like blue. What
I am wanting to accomplish is for
femail users there will be a pink
bar over there image and a different
color for males. Can someone who
knows css help me modify this to do
that the best please
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 0px;
right: 0px;
bottom: 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
<img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
<div class="blackbg"></div>
<div class="label">Sara</div>
</div>
Since I've written this code for you, seems logical that I also try to fix it...
It seems that Chrome is struggling since it doesn't know the height of the element. Let's use margins instead of positioning
Also, since you are using a set height, you could drop positioning all together and use the following CSS (In which case you shouldn't need the above code):
div.imageSub img { z-index: 1; margin: 0; display: block; }
div.imageSub div {
position: relative;
margin: -15px 0 0;
padding: 5px;
height: 5px;
line-height: 4px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
EDIT: You've asked for a top colored bar for the gender. You can use the following HTML:
<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width -->
<img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/>
<div class="blackbg"></div>
<div class="label">Sara</div>
</div>
With the following CSS:
div.imageSub img.female { border-top: 10px solid red; }
div.imageSub img.male { border-top: 10px solid blue; }