Helllo, I have this html code
<div class="tf">
<img src="images/facebook.png" width="2%" class="tfimg">
</div>
and for the CSS
.tf {
float:right;
margin-right:65px;
margin-top:-30px;
padding:2px;
}
.tfimg {
position:absolute;
z-index:-1;
border:none;
}
to be the image out of the border but I can't click in the image so what's the problem and what's the solution for that ?
Both of your images have the same class assigned to them. You are stacking them on top of each other by not setting them to different positions and the facebook.com one appears on top since it is last in the html. If you want them to appear beside each other you can apply something like the following:
.tftwitter {
position:absolute;
left:0px;
border:none;
}
.tffacebook {
position:absolute;
left: 20px;
border:none;
}
And now assign each image the appropriate class.
try using:
.tf{
display:inline-block;
/* your more code */
}
Related
Can we use lighten, Darken CSS attributes without colour value?
I have a class with the background colour
Ex:
.master{
background-color:green;
}
<div class="master">Master</div>
I have to lighten the background of the "Div" using a different CSS class. How can I do that?
Note:
I have a few themes and predefined background colours so I have to use those colours and have a shade of it using a different class
Opacity is not what I'm looking for.
You can consider a pseudo element to create another layer and inherit the background-color then you can apply filter without any issue:
.master{
background-color:green;
}
.master2{
background-color:red;
}
.light,
.dark{
position:relative;
z-index:0;
}
.light:before,
.dark:before{
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background-color:inherit;
filter:brightness(200%);
}
.dark:before {
filter:brightness(50%);
}
<div class="master light">Master</div>
<div class="master2 light">Master</div>
<div class="master dark">Master</div>
<div class="master2 dark">Master</div>
You can use the filter CSS property to tweak the brightness as follows:
.master {
background-color: green;
}
.lighten {
filter: brightness(150%);
}
.darken {
filter: brightness(50%);
}
<div class="master">Master</div>
<div class="master lighten">Master lighten</div>
<div class="master darken">Master darken</div>
I think it is quite easy to add a different class so that you can lighten the background of your div element. Try this example,
.master-light{
background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}
This might help you, I think this is the only way to achieve your goal.
As you can see both the images were same, no filter is applied to the content.
.master{
color:#fff;
position:absolute;
top:10px;
left:10px;
}
.mmaster{
-webkit-filter: brightness(200%);
background:green;
position:relative;
padding:80px 0;
}
<div class="mmaster"></div>
<div class="master"><img src="https://www.w3schools.com/css/bgdesert.jpg" alt="desert">Desert</div>
<img src="https://www.w3schools.com/css/bgdesert.jpg">
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/
I have a problem. I have CSS styles for 9 buttons on my webpage but #a doesn't work. All the other 8 ones are working fine. (The CSS is paired with HTML and Javascript, I'm trying to make a Tic-Tac-Toe Game.) (Note: I removed some code, because its all the same.)
#a {
position:absolute;
left:50px;
top:150px;
<!-- The Green Text Is Purely For De-bug purposes -->
text-color:green;
}
#b {
position:absolute;
left:150px;
top:150px;
}
#c {
position:absolute;
left:250px;
top:150px;
}
#d {
position:absolute;
left:50px;
top:200px;
}
The problem was the comments, I tried with and without them and it turns out they should be
/* Blaah */
instead of
<!-- Blaah -->
Say I have a <div> like this that is going to have all of the same properties with a background image or something like that:
div.someBaseDiv {
margin-top: 3px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
}
And I wanted to inherit from it like this:
div.someBaseDiv someInheritedDiv {
background-image: url("images/worldsource/customBackground.gif");
background-repeat: no-repeat;
width: 950px;
height: 572px;
}
Of course I’m pretty sure this is written wrong, and I’m not afraid to ask for help, so can someone tell me how to make this work and include the HTML markup?
The easiest is to add your someInheritedDiv element to the first rule like this.
div.someBaseDiv,
#someInheritedDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
This will tell your #someInheritedDiv to apply the same styles as div.someBaseDiv has. Then you extend this set of styles with more specific to your #someInheritedDiv:
#someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This is how specificity in CSS works.
Use both classes and combine them like so:
.baseClass
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.baseClass.otherClass /* this means the element has both baseClass and otherClass */
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
The markup is as follows:
<div class="baseClass otherClass"></div>
Now, in this fashion you can override baseClass if necessary... and since you don't have to keep adding your new class names to the baseClass definition, it's a bit cleaner.
For this task, I would recommend you use a powerful extension of CSS called LESS. It compiles into CSS or can be used on-the-fly with a javascript file as the link explains.
LESS supports inheritance (almost) as you describe. The documentation has the details (see the section "Mixins").
For your example, the LESS code would be:
.someBaseDiv {
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
someInheritedDiv {
.someBaseDiv;
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
Note that it would have to be .someBaseDiv and not div.someBaseDiv
What you want to do is make some CSS apply to two different types of elements, but allow them to have some differences as well. You can do this using some simple HTML:
<div class="base">
<div class"inherited">
</div>
</div>
And CSS:
.base, .inherited{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
.inherited{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
This will add the shared properties to both types of div, but specific ones only to derived divs
That really depends on your markup. If your inherited element resides under a div with class someBasDiv, then all child elements of it will automatically inherit those properties.
If however, you want to inherit the someBaseDiv class in any place in your markup, you could just make the element which you want to inherit with, use both of those classes like this:
<div class="someBaseDiv someInheritedDiv">
and your css would be like this:
div.someBaseDiv
{
margin-top:3px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
}
div.someInheritedDiv
{
background-image:url("images/worldsource/customBackground.gif");
background-repeat:no-repeat;
width:950px;
height:572px;
}
If you want all the inner DIVs with a specific class to inherit from the base class build the HTML markup like this:
<div class="parent">
<div class="child">X</div>
</div>
And the CSS
.parent { border: 2px solid red; color: white }
.parent .child { background: black }
If all DIVs must inherit change .child to div.
See this example on jsFiddle
The following code
// parent // all DIVs inside the parent
.someClass div { }
Means: A top element (any) with the class someClass will add the styles to all its children DIVs (recursively).
I have code blindness, it's like snowblindness, just wth far too much code.
I have a div class dynamically generated,
<div class="even last">
How can I select that with CSS?
div.even last {
background-color:#ffffff;
height:100%;
border-top:1px solid #F5F5F5;
padding:2px;
margin-top:35px;
}
Doesn't seem to work, and I just can't think more..
Thanks :)
When multiple classes are specified with a space, it applies both of those classes to the element.
Therefore if you specify div.even AND/OR div.last it will use them.
You cannot have spaces in a css class name. This should work:
<div class="even_last">
div.even_last {
background-color:#ffffff;
height:100%;
border-top:1px solid #F5F5F5;
padding:2px;
margin-top:35px;
}
Spaces in css mean: the next element contained in the previous one, for example:
<div class="even_last">
<div>
Hello
</div>
World
</div>
div.even_last div {
font-weight:bold;
}
Hello will be bold, while World will not.
Replace the space with a dot and you're right:
div.even.last {
background-color:#ffffff;
height:100%;
border-top:1px solid #F5F5F5;
padding:2px;
margin-top:35px;
}
Name your class like evenlast:
div.evenlast
{
/* styles here */
}