Everywhere on web I found that multiple css classes use a space as separator.
So, I'm write the following:
<div class="page hidden">
css
.hidden{
display:none;
}
Using the above code .hidden IS NOT hidden, but visible.
But using:
<div class="page, hidden">
.hidden IS hidden.
Any explanation !?
You were doing everything correct. The only explanation is that you have something else affecting it that you haven't put in your question.
Just to prove it works:
div {
height:300px;
width:300px;
position:relative;
border-radius:150px;
line-height:300px;
text-align:center;
}
div div {
height:150px;
width:150px;
border-radius:75px;
position:absolute;
top:75px;
left:75px;
line-height:150px;
}
.green {
background-color:green;
}
.red {
background-color:red;
color:white;
}
.hidden {
display:none;
}
.visible:hover .hidden {
display:block;
}
<div class="green visible">
<div class="red hidden">
hidden div
</div>
hover here
</div>
the stacking order of your css will effect the styles that are applied. Also the specificity of the tags used will effect what you see from the front end.
so as an example:
/* .hidden is ignored in this example because .page comes after the hidden tag */
.hidden {display:none;}
.page {display: block;}
/* where as this will hold as it's more specific to the page, so will take a higher priority */
body .hidden{display: none;}
/* or this as it's more specific to the exact tags above */
.page.hidden {display: none;}
Just for example:
.page{ display:block}
.hidden{
display:none!important;
}
jsFiddle: https://jsfiddle.net/r1us08a3/2/
Related
I have a very strange behaviour of "not()" css selector.
Here my simplified code:
<div id="mapDiv" class="mapDiv mapDiv1">
pippo
<div class="gm-style">pluto</div>
</div>
<div id="mapDiv2" class="mapDiv mapDiv2">
pippo
<div class="gm-style">pluto</div>
</div>
and my css:
.mapDiv1,.mapDiv2
{
width:300px;
height:100px;
border:solid 1px red;
}
.mapDiv div
{
width:200px;
height:50px;
border:solid 1px blue;
}
:not(.mapDiv1) div
{
color:green;
}
a jsFiddle is provided here.
I would think that color:green will be applied only to second box texts, due to not() selector.... instead it is applied to both.
Can you explain me why?
As per my understandings, :not() is a negation pseudo-class.
Which means, first you select a bunch of elements and then remove elements from the selected bunch using negation pseudo-class.
Hence it should be prefixed by a selector.
If you change your css to :
div:not(.mapDiv1)
{
color:green;
}
This will select all the divs except the divs with class '.mapDiv1'
And if you change the code to:
div:not(.mapDiv1) div
{
color:green;
}
This will select all the divs within a parent div except for those parent divs with class '.mapDiv1'.
More Reference Here
you have to change your code as
div:not(.mapDiv1)
{
color:green;
}
I updated your fiddle as Fiddle
Demo
div:not(.mapDiv1) div {
color:green;
}
For more on it read
try this
div:not(.mapDiv1) {
color:green;
}
How do you get the :before pseudoclass to render properly? Do I need some special CSS to make this work?
This does not work and does not display anything:
http://jsfiddle.net/XzMH6/
HTML
<div id="test"></div>
CSS
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
}
You need the content property.
#test:before{
width:100px; height:100px; background: #ddd;
display:block;
content: "";
}
http://jsfiddle.net/ULfeu/
try this
please add this content:"" in #test class then :before is working properly
Demo
look at this fiddle. I want that anchor will change its background-color when I click on the parent div. It works only if I click beside anchor. But if I moove cursor on the anchor and then click, nothing happens. It only works fine in firefox and chrome.
<div class="test">
link me
</div>
.test
{
background:Gray;
}
.test:active a
{
background:Red;
}
For consistency around all browsers i would put the active pseudo on the anchor tag instead.
.test a {
background:Gray;
display:block;
}
.test a:active {
background:Red;
}
See Fiddle
some class and pseudo not support by Opera try in this way, may this solve your problem.
.test
{
background:Gray;
}
.test:active a
{
background:Red;
}
.test a:active
{
background:Red;
}
Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.
Here's a little jsfiddle example
What I'm doing is using float and 2 more block-elements inside to align it:
<div id="block">
<div id="start">1</div>
-
<div id="end">12</div>
</div>
#block {
text-align:center;
background: #000;
color: white;
width:150px;
}
#start {
float:left;
}
#end {
float:right;
}
I have many of those little objects, so my code is bloated with div's. Is there no more lightweight solution for this out there ?
I fiddled a possible answer based on the answer to this question.
http://jsfiddle.net/ScHdJ/2/
Works in all browsers, as far as I can see...
May be you can use CSS :after & :before pseudo classes like this:
HTML:
<div id="block">
hello
**</div>
CSS:**
#block {
text-align:center;
background: #000;
color: white;
width:150px;
overflow:hidden;
}
#block:before{
content:"1";
float:left;
}
#block:after{
content:"12";
float:right;
}
http://jsfiddle.net/ScHdJ/3/
But is not work in IE7 & below.
I'm having problems with SharePoint and CSS. I'm creating a page with a supposedly simple image tab that has hover effect. It's done entirely in CSS. Here's the CSS snippet (hosted in a separate CSS file):
div.activelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.activelayer:hover {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/hover.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.inactivelayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/inactive.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer {
margin-left:-30px;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
text-align:center;
height:55px;
width:200px;
display:inline-block;
position:relative;
float:left;
}
div.selectedlayer:hover {
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/selected.png");
cursor: text;
}
#innertab .alink {
margin-top:18px;
text-align:center;
margin-left:0px;
}
#innertab a.tablink {
color: #ffffff;
text-align: center;
}
#innertab a.tablink:hover {
text-decoration: none;
color: #ffffff;
text-align: center;
}
/* IDs */
#menu1 {
z-index:10;
}
#menu2 {
z-index:9;
}
#menu3 {
z-index:8;
}
#menu4 {
z-index:7;
}
#menu5 {
z-index:6;
}
In the aspx page, I have this:
<div id="innerTab" class="" style="width: 1000px; height: 72px;">
<div id="menu1" class="selectedlayer" style="margin-left:0px">
<div class="alink">
Menu Item 1
</div>
</div>
<div id="menu2" class="activelayer">
<div class="alink">
Menu Item 2
</div>
</div>
<div id="menu3" class="activelayer">
<div class="alink">
Menu Item 3
</div>
</div>
<div id="menu4" class="activelayer">
<div class="alink">
Menu Item 4
</div>
</div>
<div id="menu5" class="inactivelayer">
<div class="alink">
Menu Item 5
</div>
</div>
</div>
The problem I'm experiencing is this: It doesn't work when I placed this in SharePoint when viewed in IE.
I first tested this code in a normal HTML page and it worked like a charm in IE. When I transferred the codes in SharePoint (it's in a page template), it didn't work. So, I viewed the SharePoint test page in Chrome, and it works there, but for some truly bizarre reason, it's not working for IE. I haven't tested in in other browsers, and I don't really plan to because the page I'm working on is an intranet site, and our company uses IE (officially, though some of us insist on using either Chrome or FireFox) so IE compatibility is my only priority.
Is there something that I missed in the code? Please help :(
Oh, BTW, I'm coding in MOSS2007 and the HTML codes are being used in a Page Template. My IE version is IE8. Not sure if these info are relevant to the problem I'm having, though :(
thanks,
Poch
Sharepoint's stylesheets are overriding yours, so you have to make your selectors stronger. Open up the developer tools (hit f12), select "Trace Styles" above the right pane. Select your element that isn't getting it's styles applied and examine who's styles are. Then just copy that selector and make yours a little bit stronger. For example you may see:
margin-top: 0px;
#innertab .alink - 18px;
.someClass .someOtherClass #someId a - 0px
You'd just change your selector to this:
.someClass .someOtherClass #someId #innertab a.alink
Your selector is now stronger and will be applied.
Try adding !important, like so:
div.activelayer {
margin-left:-30px!important;
background-image:url("/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/active.png")!important;
text-align:center!important;
height:55px!important;
width:200px!important;
display:inline-block!important;
position:relative!important;
float:left!important;
}
I had a similar issue with this a few weeks back. I couldn't find an exact resource that said it, but through trial and error I was able to find that I could only apply CSS Psuedo classes (Like :hover and :active) to <a> tags within SharePoint when browsing in IE. The code you posted above has :hover / :active on <div> tags.
I was able to get a working solution by using image sprites, styling the anchor tags, and nesting the image sprite within the <a> tags with the following HTML and CSS:
HTML
<ul id="wheel" class="wheel"><li>
<img src="images1/design.png"></li>
</ul>
CSS
.wheel li a, .wheel li a:visited{
width: 50px;
height: 50px;
overflow: hidden;
}
.wheel li img
{
position: relative;
display: block;
}
.wheel a:hover img{
left: -51px;
}
.wheel a:active img{
left: -102px;
}
On the off chance you haven't solved this issue, hope this helps!