I have a whole bunch of checkboxes and want to style all the ones that are even children i.e 2nd, 4th, 6th, 8th.
I have tried doing the following but to no avail.
.basic li > div .choices input[type="checkbox"] {
width:14px;
height:14px;
float:left;
border:0 none;
background:#fff;
padding:0;
}
.basic li > div .choices input[type="checkbox"]:nth-child(2n-1) {
margin:0px 0px 0px 60px;
}
Use :nth-child(even) or :nth-child(2n+0) (any calculation resulting in an even integer) according to:
http://www.w3.org/TR/css3-selectors/
Related
I made a tool tip for the periodic table I'm making and still can't figure out how to adjust it so you hover on a certain one and it displays on a different side.
a.tooltip
{
outline:none;
}
a.tooltip strong
{
line-height:30px;
}
a.tooltip:hover
{
text-decoration:none;
}
a.tooltip span
{
display:none;
line-height:16px;
margin-left:26px;
margin-top:-30px;
padding:14px 20px;
width:450px;
z-index:10;
}
a.tooltip:hover span
{
background:#218C24;
border:1px solid #000000;
color:#111;
display: inline;
position: absolute;
}
/*CSS3 extras*/
a.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #707062;
}
Here's the actual CSS part and I just need it to postion to the right after a certain post. How do I fix this? And I would perfer to keep it in nothing but CSS.
Heres the
JSfiddle
or for the full screen view
here
Please help
Thank you for your time as always.
I've come up with the following CSS which would help you achieve what you're trying to do. It's a combination of different psuedo-selector's and it successfully changes the position of the tool-tip's to the right side for any elements in the periodic table after and including the 9th group. The good thing is that your HTML structure remains unchanged.
tr:nth-child(2) td:nth-child(4) a div span, tr:nth-child(3) td:nth-child(n+4) a div span, tr:nth-child(4) td:nth-child(n+4) a div span, tr:nth-child(5) td:nth-child(n+10) a div span, tr:nth-child(6) td:nth-child(n+10) a div span, tr:nth-child(7) td:nth-child(n+10) a div span, tr:nth-child(8) td:nth-child(n+10) a div span {
margin-left: -515px;
}
Here's the link to a working jsFiddle demo.
The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results.
Reason?
http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html
#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}
#rightnav ul {
margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;
}
#rightnav ul li {
display:inline-block;
font-family:Times New Roman, Times, serif;
font-size:1.4em;
margin-left:2%;
margin-top:1.5%;
color:#FFF;
text-decoration:none ;
list-style:none;
list-style-type:none;
}
Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.
#rightnav ul li a {
text-decoration:none;
}
I'm trying to achieve the separator effect using border-right on my menu.
Here's my css code
ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}
ul.navigation li a:last-child {
border:none;
}
What am I doing wrong? I tried border-left and :first-child too.
I am thinking you mean to do this
ul.navigation li:first-child a
Because every a is the first child of its parent li. You mean the a inside the first li item. :)
Your CSS snippet is full of bad practices.
Below is an example of how you should style it and how you can add a separator between each list item.
.navigation { overflow: hidden; } /* Explanation 1 */
.navigation li { float: left; }
.navigation li + li { /* Explanation 2 */
border-left: 1px solid #333;
}
.navigation li a {
display: block;
width: 252px; /* Explanation 3 */
padding: 5px 0; /* Explanation 4 */
background-color:#ccc;
color:#000;
text-align:center;
}
Float containment: read this article.
Here I answer your question: applies a border left from the 2nd li to the last one, using the adiacent sibling selector +.
Are you sure you want to have a fixed width?
No fixed height and line-height to vertically align the text. line-height doen't need a unit by the way. Read this article.
Here is a live example: http://dabblet.com/gist/4968063
I am trying to make a list of links, 6 links in a row.
The problem is I do not know how many links there will be. It could be only 2 or 25.
Please take a look at this fiddle.
I must be doing something wrong with the css because:
If for example there are just 3 links, the border of the .toplist div is not covering the whole length of the wrap div.
Also, I can't get more then two divs aligning before a new row appears.
This is not that important, but In IE6, even if I use overlow:auto I don't see a background for my ul (if I set one), and also, if I set margin-bottom for the ul I don't see it.
Any ideas on whats wrong with the css?
Ty
I made a few changes to your original fiddle to my fiddle. Check this out:
.wrap {
width:960px;
margin:0 auto;
border:1px solid #000
}
.toplist {
border:1px solid #0f6;
padding:0 0 0.5em 1em
}
.toplist ul {
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
.toplist ul li {
float:left;
width:15%;
margin-right:1em;
line-height:1.4em;
border-bottom:solid 1px #222;
}
.toplist ul li a, .toplist ul li .cat {
display:block;
font-size:0.7em;
}
.content{
background-color:#FF2E2E;
color:#FFF;
margin-top:100px;
heyight:40px
}
Hope this works. :) It works in IE 6 too! :)
I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set "class= current" in the li section of the html code.But my doubt is whether I have to set "class=current" each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..
<div id="tabsJ">
<ul class="menu">
<!-- CSS Tabs -->
<li><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
</ul>
</div>
I have used this css
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background: url("../images/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("../images/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
Sam Warren - Added jsfiddle - http://jsfiddle.net/ejLTy/
Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.
No Need of JavaScript. Just change li as,
<li class="current"><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.
For hover use the pseudo element property in css called
your_division:hover
Hey Just put class="current" in first li. you will get selection on each link. And also
Go to following link, you will get different kind of menus as well as you can customize menu also as per your requirement.:
http://www.cssmenumaker.com/
check it the example of your updated CSS i have just added (current) id in your li
and where you want the selected link add the current id in that particular li.
http://jsfiddle.net/ejLTy/2/