I am trying to show a button to access Accessibility options on the top of the page - normally hidden - when the user tabs to them.
HTML:
Accessbility Options
Style:
.access {display:none; position:fixed; top:0; left:0; padding:10px; font-size:25px; background:#eaeaea;}
.access:focus {display:block;}
However when you use the tab button once the page has first loaded, nothing shows. I have tried using :hover rather than focus etc; but I am struggling to find similar answers which handle it without any jQuery / over complicate it.
Instead of
display:none;
you could use
.access {opacity:0; position:fixed; top:0; left:0; padding:10px; font-size:25px; background:#eaeaea;}
.access:focus {opacity:1;}
Something with display:none will not be given an actual tabindex.
An Element with
display: none;
is not able to get focus!
You have to use another way to get the element invisible.
For example positioning it outside of the page, or opacity (note that it is clickable even if it is not visible).
Try using display: hidden or look into this question for a JavaScript solution
Related
I'm working on a Math website, and it has some exercises on it with solutions on the bottom of the page. I want to make so solutions are hidden when the user scrolls by them, and needs to click on the block for it to show the answer. I want to achieve this using only css and html. Here's what I have made so far:
HTML:
<div class="solution s1">
2+2=4
</div>
CSS:
.solution {
width:80%;
margin:25px auto;
}
.solution a:visited{
color:black;
background-color:white;
user-select:text;
}
.solution a{
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
color:#49FF59;
text-decoration:none;
user-select: none;
}
This code works great, except for the user-select. I want it so that the user can't copy the solution, before the block is clicked on. But the a:visited won't apply the user-select:text; I have tried to add more classes, but i wasn't able too fix it. Keep in mind most of the CSS is for asterisk.
If I'm correct, the approach you're trying to take is to prevent someone from doing a select all and seeing the solutions on screen due to the text being highlighted.
If that's the case there are better style properties to use for this, particularly visibility or display.
For example you can use visibility: hidden or display: none to hide the solution until a specific condition is met.
I'd also advise against using :visited for something like this, unless you have specific urls for each question that you plan to override (if you use href='#') for everything, then once you click one, they are all 'visited'). You're going to also have struggles with browser caches when using :visited.
As an example, you could alter your container to be the clickable element, and hide your content using visibility, then show the answer on the :active state as opposed to the :visited state. This will show the answer while the mouse button is pressed. Under normal circumstances the text isn't selectable because it's hidden. If you want to keep it shown after a click but not use :visited you'll need a javascript solution.
Worth stating that this solution will not hide answers in the source code, but as you mentioned above that is not a concern for you.
.solution {
width:80%;
margin:25px auto;
background-color:#49FF59;
display:block;
width:100%;
padding:25px;
text-align:center;
}
.solution:active {
color:black;
background-color:white;
user-select:text;
}
.solution:active a {
color:black;
background-color:white;
visibility:visible;
}
.solution a{
text-align:center;
text-decoration:none;
visibility: hidden;
}
<div class="solution s1">
2+2=4
</div>
I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
HTML
<div class="services-section-holder">
<div class="services-section-img"></div>
<div class="services-section-title"><p>Exhibition</p></div>
</div>
CSS
.services-section-holder{
position:relative;
width:270px;
height:70px;
margin-bottom:5px;
}
.services-section-img{
position:relative;
width:80px;
height:75px;
float:left;
background:url(../images/greycircle.jpg);
}
.services-section-title{
position:relative;
float:left;
height:75px;
margin: 0 auto;
display: table;
padding-left:20px;
}
.services-section-title a {
text-decoration:none;
}
.services-section-title a {
color:#000;
}
.services-section-title a:hover {
color:#906;
}
.services-section-img:hover {
background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
color:#906;
}
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
I'm trying to make parts of a list hidden when the page loads.
Specifically the sdt_wrap class of my HTML.I know that the display:hidden is in the correct spot it just is not taking in the hidden value
Here is the CSS:
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:50px;
width:170px;
height:150px;
z-index:501;
display: hidden;
}
hidden is not a valid value for display. You're looking for none, as in:
ul.sdt_menu li span.sdt_wrap{
display:none;
}
Documentation
CSS display on MDN - https://developer.mozilla.org/en/CSS/display
It's display:none or visibility:hidden. 'hidden' is not a valid value for 'display'.
use visibility:hidden; or opacity: 0; property
I'm using anchor tag as a menu item in my web page. I used css for designing anchor tag like a menu look. I have three anchor tag on my page.
my css design in as follows-
div.menu
{
margin:0px;
height:30px;
background-color:Gray;
}
span.menu a:link
{
display:inline-block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
margin:0px;
}
span.menu a:visited
{
display:inline-block;
font-weight:bold;
color:#0000CC;
background-color:#D3D5EB;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
margin:0px;
}
span.menu a:hover
{
background-color:#D3D5EB;
}
above is my css design for anchor tag. I want to change the background color after clicking on the tag & color should stay up to the next selection of the menu item. I have tried throw above css. but it shows me the same background color after setting :visited style too.
When i run my page that time it is initially showing me the visited color & not the link color.
How to solve this?
thanks.
You can't do it with :visited. It applies to all links that you previously opened, not only clicked.
For example: If you target http://google.com in you link, then if browser rememver you ever visiting google.com in the past, it will apply :visited styles to the link. (Even if you never clicked this particular link)
To indicate selected item in menu you will need to apply another class to it as suggested above. For example make class "current" and apply it to the current link.
You'll have to set or swap style classes using JavaScript to achieve this. Here's an example in jQuery (http://api.jquery.com/toggleClass/) and you can also use plain JavaScript.
document.getElementById("MyElement").className += " MyClass";
I was having trouble with two types of buttons.
It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block;
This made the whole a href tag actually look like a button.
But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?
You can easily see it here (low graphics):
www.matkalenderen.no
Basically, code looks like this:
<input type="submit" value="Logg inn" class="button_blue" alt="ready to login">
<a class="button_css_red" href="access.php">Glemt passord</a>
CSS
.button_red, .button_blue, .button_css_red, .button_css_blue {
background-image:url("../img/sprite_buttons.png");
background-repeat:no-repeat;
border: none;
color:#FFFFFF;
display:inline-block;
display:inline-block;
font-size:12px;
height:27px;
width:98px;
}
.button_css_red, .button_css_blue {
margin-top:20px;
}
Just found the answer myself :)
Looks like I was able to fix it by applying a line-height of about 31 pixels.