i have created a web page with a modal popup control.
Within this control i dynamically build a html to display data.
Within some of the tables tags i have the following:
<td>
<span>S</span><span class="pop">description</span>
</td>
i want to create a popup effect when hovering over the tag.
My CSS is:
a .pop {
display:inline;
position:absolute;
visibility: hidden;
background-color: #FFFFFF;
border: solid 2px #000000;
padding: 5px;
margin: 0 0 0 10px;
color: #000000;
text-align: left;
font-weight: normal;
}
a:hover .pop {
visibility: visible;
}
This works perfectly when i use the control within a standard HTML page.
It appears to work within the modal popup control, until i need to scroll down the modal control when the table data is larger that the modal window.
The hover effect then appears to not be working. I think this is because im using the "position":"absolute" for the ".pop" class, and the hover effect is working, but its position is no longer relative to the tag because I have scrolled through the page.
I am not able to get round this and its killing me. Do i need to dynamically reposition the control using a "mouseover" event, or can this be achieved via CSS, and I’m just missing something / being a novice.
Karl
Try adding this:
a { display:block; position:relative }
This will make the span.pop be positioned relativily to the a tag it is in.
example:
http://jsfiddle.net/R4Erw/
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I'm attempting to change the color of a check box? / radio button using CSS, of some code embedded that in our site that is generated by our CMS (the CMS is a 3rd party product integrated into our site):
Looking in FireFox Dev Tools the Check Box / Radio Button element displays this HTML
<div class="SFchk" id="SFusrmanlog" style="" onclick="SF.usr.man('log');" set="1"><div></div><div><strong>Sign In</strong><br>with your email and password.</div></div>
And this CSS:
#SFctr .SFchk[set] > div:first-child {background-color: #f1694f; }
The color from this CSS is red and we want green
I've attempted the following approach, taken to change other elements colors etc, however this has not worked? This CSS was added to our Custom CSS used for our site to manipulate colors and elements etc generated by the CMS.
body #SFctr .SFchk[set] > div:first-child { background-color: #1F7665 !important; }
The check box/ radio button element also has this CSS attached to it in FireFox Dev Tools:
#SFctr .SFchk > div:first-child {
float: left;
margin: 2px 0 0;
padding: 0;
height: 12px;
width: 12px;
border-radius: 12px;
border: 1px solid #777;
}
#SFctr .SFchk > div {
margin: 0 0 0 25px;
padding: 0;
cursor: pointer;
}
Suggestions? - Thanks!
A radio button is a native element so you can't really change the style.
The only way that i know is to use JS.(this article could help you)
Managed to sort this out with this CSS and force the element to be the color I wanted!
#SFctr .SFchk[set]>div:first-child {background-color: #1f7665 !important;}
Removed the body and provided correct formatting, added to global CSS and bingo - issue sorted!
I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause.
I am using evolve themme. I added header widgets.
Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides
Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue.
2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:
.header-block{
background-color: red;
}
.header-widgets{
background-color: #CDAE02;
}
.user-log a{
float: right;
text-decoration: none;
background-color:#581845;
color: #ddd;
border-radius: 15px;
font-size: 14px;
margin-right: 1em;
}
.user-log a:first-child{
padding: 4px 13px;
}
.user-log a:last-child{
padding: 4px 8px;
}
.user-log a:hover {
background-color:#B12307;
font-size: 15px;
}
<ul class="user-log">
Login
Logout
</ul>
I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.
container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:
.container-full{
margin: 0 auto;
width: 100%;
}
Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.
I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
Thanks.
Another option you can use (tested on galaxy S running android version 2.1-update1):
select {
-webkit-appearance: listbox;
}
select, input {
width: 100%;
height: 40px;
line-height:40px;
border: 1px solid #999;
border-radius: 6px;
margin-bottom:10px;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issue and suggest a workaround with a custom background image for now:
<select style="background: url('big-select-bg.png')"/>
try this one:
select{
-webkit-appearance: menulist-text;
}
Set the opacity of the select control to 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
Make sure the dimensions of the span and the select control line up well.
(Do not use an actual texbox control)
mealaroni.com
For me "-webkit-appearance: listbox;" solved the issue not completely.
I had to add a padding attribute additionally:
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}