i am new to css, i have written code to display some text on hover. But it is not working
HTML:
<div id="onHover"> 5
<span>
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</span>
</div>
CSS:
#onHover span:hover
{
bottom:130px;
left:105px;
padding:8px 8px 10px 8px;
display:block;
border:1px dashed #09f;
background-color:#FFF;
min-width:170px;
position:relative;
z-index:101;
}
#onHover span:hover ul {
font-weight:normal;
list-style:none;
margin:10px 0 0 0;
padding:0;
position:relative;
}
span {
display:none;
}
you can also see this fiddle http://jsfiddle.net/ankurdhanuka/ccFxu/
please help
Thanks in Advance
Your HTML should look like this (the span is useless, so I took it out, it also isn't allowed in HTML4. It is in HTML5 tho...):
<div id="onHover"> 5
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</div>
Then you can add a :hover effect on the div, like this:
#onHover ul {
display: none;
}
#onHover:hover ul {
display:block;
}
As you can see, the :hover is on #onHover, but it triggers the ul within it.
DEMO
Nice Try, friend. Give :hover to #onHover as 5 is enclosed within #onHover.
Use position only if it is required.
check this.
http://jsfiddle.net/ccFxu/3/
You are setting display:none to the span through css.
The elements which are set as display:none will not be visible and are actually take no space in the view. Hence you cant able to hover on span which is actually not available because of display:none.
Related
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
What is the point in styling a ul? I Have a following html structure
<div id='container'>
<div id='ui' class='quad'>
<div class='quadNav'>
<span class='quadTitle'>Urgent And Important</span>
<i class="fa fa-plus fa-2x addButton"></i>
</div>
<ul class='taskList'>
<li>Test</li>
<li>Test2</li>
</ul>
</div>
and the following css for styling the list
.taskList{
}
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
with the .taskList section empty the li elements will style as I want them to. But if I remove the .taskList section, the li's no longer style. What gives? What is supposed to go into the styling of a ul element vs a li element, I don't understand.
edit
I may not have properly worded my question, I have the following css
<style>
/* -------- General Styling ---------*/
*{
margin:0;
padding:0;
}
html, body {
font-size:20px;
}
#container{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
/*--------Quadrant Style ------- */
.quad{
position: relative;
width: 49.85%;
height: 49.8%;
font-size: .8em;
border: solid 1px black;
}
#ui{
float: left;
background-color: green;
}
#nui{
float: right;
background-color: red;
}
#uni{
float: left;
background-color: blue;
}
#nuni{
float:right;
background-color:yellow;
}
/*------- Quadrant Navigation Styling ------- */
.quadNav{
position:relative;
width:100%;
top:1em;
}
.quadTitle{
position: relative;
left:1em;
}
.addButton{
position:relative;
float:right;
right: 1em;
}
/*---------- task list styling ----------*/'
.taskList{
}
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
When I remove the empty .taskList{} declaration the .tasklist li styles stop working. I am trying to figure out why.
This could happen if you have an error in the preceding CSS, e.g.
.broken {
something
/* note no closing brace */
.taskList{
}
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
Now, the .taskList { line is actually inside the .broken {...} block, and the closing brace for .taskList closes that, so the following .taskList li { block works ok. But if you remove the .taskList block, you now wind up with the .taskList li styling inside the erroneous block, and your styling stops working.
EDIT: in your updated code, I can see the problem is a stray apostrophe on the line
/*---------- task list styling ----------*/'
Remove the trailing ' and it will fix it
the reason you lose the styling when you take out the taskList is because in your CSS you are targeting any li that is a child of a class called taskList. The reason you should do this is if you choose to have another set of li's on the page or any other page that may share this stylesheet you can style them differently by targeting a different class name. As far as the ul goes, if you do not use normalize or a css reset, ul's indent naturally without having to style it that way.
The li styling you currently have is applied only to the sub elements of the .taskList class.
If you want it to apply to all li's change your css to this:
li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
You have:
.taskList li{
list-style-type:none;
position:relative;
top:2em;
left:1.2em;
}
So you are able to select lis in the ul with class of taskList and that's why style will be applied on those lis but if you remove the class taskList from the ul then the style won't be applied in the lis inside the ul with class taskList because you didn't add styles to lis directly.
If you want to style lis in any place of your page then you may use something like this:
li {
/*rules*/
}
Also to apply styles on all lis inside ul with class taskList you don't need to add a blank selection like you did in your question which is:
.taskList {
}
This is unnecessary in this case. You can apply stiles on all of your lis inside ul with class taskList even without the blank .taskList{...} in your stylesheet.
The problem is on the comment line right before .taskList{}, here you see:
Then when you keep the .taskList{}, that rule will be seen as invalid, while the next rules are OK, if removing that rule, then the rule .taskList li{} will be invalid, hence your problem.
Demo.
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I am trying to make the last category have no bottom border, is there is any trick to done it without programming?
HTML & CSS:
<style>
#menu {
border:1px red solid;padding:10px
}
#menu a {
display:block;
border-bottom:1px #000 dotted
}
</style>
<div id="menu">
<p>MAIN MENU</p>
<a>Computers</a>
<a>Design</a>
<a>Programming</a>
</div>
EXAMPLE:
http://jsfiddle.net/GLJWp/
You may try this, because last-child doesn't work in IE
HTML
<div id="menu">
<p>MAIN MENU</p>
<a>Computers</a>
<a>Design</a>
<a>Programming</a>
</div>
CSS
#menu{
border:1px red solid;padding:10px
}
#menu a{
display:block;
border-top:1px #000 dotted
}
The following would effect the first a after the p, a:first-child won't work in IE because p is the first child element
#menu p + a{
border-top: none;
}
DEMO.
Have a look at the :last-child pseudo class, which will apply the css rules only to the last item: http://www.quirksmode.org/css/firstchild.html
In this case you'd style the last link by:
#menu a:last-child {border-bottom:none}
For supporting IE <9, have a look at this beautifully horrible conditional stylesheet hack.
Done here: http://jsfiddle.net/GLJWp/2/
I'm having a problem getting a pseudo class working with my code. The code in question is a horizontal ordered list that's being placed at the top of a slider. The list is stretched out to fill the full horizontal width of the slider. I put a left-border on each of the list elements by assigning a border to the links contained within the list elements (so that the border didn't make the list too wide).
But I wanted to remove the first link's left-border so that borders were only shown between each list element, and not on the first or last list element.
The problem arises though when I add a first-child pseudo class to the link. The pseudo class seems to assign the class to all of the links.
Here's what I have:
CSS
ol.bjqs-markers{
display:inline-block;
list-style:none;
margin:0;
padding:0;
z-index:9999;
width:100%;
position:absolute;
top:0px;
}
ol.bjqs-markers li{
display:inline;
float:left;
height:30px;
width:20%;
background:rgba(0,0,0,0.7);
float:left;
margin:0 0px;
}
ol.bjqs-markers li a{
display:block;
font-size:22px;
color:#FFF;
text-align:center;
text-decoration:none;
height:100%;
display:block;
overflow:hidden;
border-left:1px solid #F00;
}
ol.bjqs-markers li a:first-child{
border-left:none;
}
And HTML:
<ol class="bjqs-markers">
<li class="active-marker">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
</ol>
Can someone point me in the direction of why that a:first-child applies a border of "none" to all the tags?
Thanks guys!
:first-child works just like expected, but every A in your example is a first-child. It is the first child of its parent LI.
What you're looking for is this:
ol.bjqs-markers li:first-child a {}
It is because you apply this pseudo class to first link in li element. Use
ol.bjqs-markers a:first-child {
border-left:none;
}
Or
ol.bjqs-markers li:first-child a {
border-left:none;
}
maybe you want to do
ol.bjqs-markers li:first-child a{
It it because you are applying the border to the first <a> tag in each <li> tag. Try this instead:
ol.bjqs-markers li:first-child a { }