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>
What I am trying to do is create default css styles that when I combine multiple classes together I want to override some of the default styles from another class. Here is an example of what I am trying to do.
style.css
.navBar {
position:absolute;
left:0px;
right:0px;
width:100%;
height:50px;
background-color: #333333;
}
.fixed {
position: fixed;
}
.top {
top:0px;
}
.left {
float:left;
left:0px;
}
.navBar .left {
width: 50px;
height:100%;
}
In my html if I have <div class="navBar"> then it will just use the styles in .navBar but when I try to do <div class="navBar left"> I want it to override the width and height of .navBar but keep everything else from .navBar and .left
I dont want to put the height and width inside .left because I want to keep it as universal as possible.
Use the CSS selector .navBar.left. This checks for any elements with a class of navBar that also have a class of left. Currently you are using .navBar .left. Instead of checking if an element has both classes, it checks for all elements with class left that are children of navBar
You probably shouldn't have specific classes like .fixed and .top like that. I'd suggest you to imagine a base class for something you want to style (ie.: your navBar) and than add other classes to modify them (like left). Read a bit about BEM (block, element, modifier) or any other method to make your CSS more modular and try to slowly apply that to your CSS.
You can always stack classes to make them more specific (take priority), like .navBar.left or use !important on super specific classes like those that only set one property, but use any of these techniques too much and your CSS will soon become unstable and super hard to maintain.
Learn how to better structure and organize your CSS. It will pay off!
First of all, Do NOT write classes names in camelCase style, it's not meant for css ,see why.
This is an example of applying and extending the default style by adding multiple classes, click on Run Code snipped to see it in action
html, body{
margin: 0;
}
.nav-bar {
position:absolute;
top: 100px;
width:100%;
height:50px;
background-color: #AC92EC;
text-align: center;
}
.fixed {
position: fixed;
background-color: #A0D467;
}
.top {
top:0;
}
.left {
left:0;
width: 200px;
background: #48cfad;
}
<div class="nav-bar">
defualt navbar
</div>
<div class="nav-bar left">
left navbar
</div>
<div class="nav-bar fixed top">
fixed and top navbar
</div>
I am fairly comfortable with html5/css3 now, so I am trying to make a site using same and make it responsive.
So far things are going smoothly except for these two problems:
the use of em i dont understand the calculations at all, especially why i have to put this font: .81em/150% i am following a guide from a tutorial online.
i am having some imaginary padding on my div, you can see it here http://jsfiddle.net/NhZ2A/
e.g. I have on the body:
body{padding:0px; margin:0px;}
Then I have a div with an image like this:
<div id="slider">
<img src="images/slider.jpg"/>
</div>
Then in my css I have:
#slider{
width:100%;
height:auto;
}
#slider img{
width:60%;
height:auto;
}
With the above css I still have padding on the slider div below or maybe it's a margin on the image below.
I don't understand why and its killing me.
For the second issue :
The space is not padding, it is created because the <img> tag is an inline element and therefore has a whitespace use display:block; on the <img> tag to remove it.
Use css resets , To get consistent cross-browser experience,it should be included,any one among these.
Eric Meyer’s Reset CSS
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Normalize.css
Get it from here --> http://www.cssreset.com/
Yes, CSS reset is important to set default initial value for each element.
reset.css Source - Reset5
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video
{
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0
}
body
{
line-height:1
}
article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote
{
display:block
}
nav ul
{
list-style:none
}
ol
{
list-style:decimal
}
ul
{
list-style:disc
}
ul ul
{
list-style:circle
}
blockquote,q
{
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
content:none
}
ins
{
text-decoration:underline
}
del
{
text-decoration:line-through
}
mark
{
background:none
}
abbr[title],dfn[title]
{
border-bottom:1px dotted #000;
cursor:help
}
table
{
border-collapse:collapse;
border-spacing:0
}
hr
{
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0
}
input[type=submit],input[type=button],button
{
margin:0!important;
padding:0!important
}
input,select,a img
{
vertical-align:middle
}
em - Unit measurement values (1em is equal to the current font-size,same as 2em = 2*font-size)
Font Syntax:
font: font-style font-variant font-weight font-size/line-height font-family;
In your question value .81em/150%
.81em/150% - font-size/line-height
Every browser has a default behaviour and configuration
If you want a clean start from all of them, you must set it with a "reset.css" style sheet, to avoid undesirable behaviours and have all homogeneous.
Check this SO answer to get a proper reset CSS stylesheet:
https://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet
The first choice will be
Css Resets
Most Used Css Reset
JUSR USE CSS RESET
* {
margin:0;
padding:0;
box-sizing:border-box;
}
I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
I try to make a horizontal menu bar with a table in HTML using CSS to design it. But the padding doesn't work the way I think it should: when I'm trying to change the background color of the whole li when the user "hovers it" with the mouse. But the padding seems to get wrong.
Here's my code in CSS (using Sassy CSS):
/* just to be sure the default of browser doesn't change look */
* {
margin:0;
padding:0;
}
/* some other design code ... */
#nav-menu {
padding:5px;
text-align:center;
/* change background: browser specific gradient */
background:$menu-bgcolor;
li {
list-style:none;
display:inline;
padding:2px 10px 2px 10px;
:hover {
background-color:$deco-dark;
color:$deco-verylight;
}
}
}
But the result looks something like the following:
As you can see the changed background color, which is $deco-dark in this case, doesn't affect the whole li area (the area with gradient), as i would expect. What can I do to change this behavior?
With SASS, the following:
li {
:hover { } }
will apply styles to any :hover elements inside the li. What you need is
li {
&:hover {} }
which will apply the style to the li element itself when it's hovered. Right now, the style is likely being applied only to the a inside the li.
Try changing your li's to display: inline-block; instead.
You could also place anchors in the li, then style the anchors accordingly. This is what I usually do. Also, like Brant said, are you using a list or a table? A list is probably better and is what you have implemented so just use that.