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.
Related
I'm trying to achieve this in CSS:
I would like the green line to always be the width of the text (no fixed width). I have a constraint, the tex is contained in an H3 tag with no ability to add a span tag inside it.
you could maybe try this aproach also:
<div class="container">
<div class="line"></div>
<h3>RECENT EPISODES</h3>
</div>
.container {
width:100%;
position:relative;
}
h3 {
display:inline-block;
border-bottom:1px solid green;
padding-bottom:10px;
margin:0;
position:relative;
}
.line {
height:1px;
background-color:#ededed;
width:100%;
position:absolute;
bottom:0;
}
http://jsfiddle.net/az6pr1mz/
The grey line needs to go on a block level tag while the green needs to go on an inline tag. This means that you need two nested tags for it to work and that you must either add a span inside the h3 or a div surrounding it. An h3 can always be made inline if needed.
A slightly different approach would be to add the secondary element outside the h3 without surrounding it and position that so it lies directly under the h3.
In any case, you will need a minimum of two elements for the borders to cling to.
Update:
I missed that you don't need span inside the h3. I added a workaround. I am not sure whether this is the only solution. But I think it can be improved though. In the below code, I am using css content property to hide the border of the container.
NOTE: Use as many dots . as you can use to make it work on all resolutions.
CSS
.container {
border-bottom: 1px solid red;
padding-bottom: 10px;
position: relative;
max-width: 100%;
word-break: break-all;
}
.container:after {
content:"....................................................................................................................";
color: transparent;
border-bottom: 1px solid green;
padding-bottom: 10px;
position: absolute;
bottom: -1px;
}
Working Fiddle
For example this code: (is clearly and not uses absolute positions)
HTML:
<h3><span>Recent episodes</span></h3>
CSS:
h3{
text-transform:uppercase;
border-bottom:1px solid #ccc;
}
h3 span{
display:inline-block;
border-bottom:1px solid #080;
margin:0 0 -1px 0;
}
http://jsfiddle.net/tp0nnapu
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
im working on this site at the moment and and cant figure out why this shouldnt work..
Im looking to put small borders on the bottom and top of each controlnav link (seen on the right of the slides), If anyones got any pointers itd be great...
http://limerickfc.hailstormcommerce.com/cms/
.nivo-controlNav a + a {
border-top: 1px solid #000000;
}
I will just include a small bit more css for clarity so you can see what im talking about...
.nivo-controlNav {
text-align:center;
position:absolute;
right:-180px;
height:474px;
width:180px;
top:0px;
z-index:8;
}
.nivo-controlNav a {
cursor:pointer;
height:68px;
padding: 13px 20px;
width:140px;
display:block;
background: url('http://limerickfc.hailstormcommerce.com/cms/wp-content/themes /limerickfc/images/slideshowBg.jpg') scroll 0 0 transparent;
background-repeat: repeat-y;
color: #6ED5FF;
}
Thanks!
Having looked at the attached page using Firebug you have this style declared in your inline stylesheet
#slider a {
border: 0 none;
display: block;
}
If you remove the border: 0 none; line the border will appear, it is currently overriding your NivoControlNav style.
There are two offending CSS rules
.nivoSlider a {
border:0;
display:block;
}
Your selector, .nivo-controlNav a + a has slightly more specificity than .nivoSlider a, so yours should win out. However, there is also this rule:
#slider a {
border:0 none;
display:block;
}
The ID in this rule gives it much more specificity than yours. Either remove the border property from this rule, or add an ID to your selector to give it more specificity.
More on CSS selector specificity.
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'm trying to style a button with the css 'sliding doors' technique, but it isn't working properly. I've only got access to firefox 3 at the moment so this issue may not occur in other browsers but I would like to solve it for firefox as well.
Here's a picture of what the problem is:
http://img131.imageshack.us/img131/3559/buttons.png
As you can see the second side is lower than the first by a pixel and also is not over to the right enough. Here is the code I am using:
button
{
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button span
{
display: block;
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
<button class="important" type="button"><span>Register</span></button>
<button type="submit"><span>Submit</span></button>
How do I fix this problem? I tried relatively positioning the span using top: -1px right: -3px but then the text is mis-aligned.
Thanks.
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I just did sliding doors on a div background, and the code from this site worked perfectly.
Try setting the padding for the button to zero, and then playing with the padding-left and width to put the text in the right place.
button { padding:0; padding-left:5px; width:90px; /* total width:95px */ }
button span { ... }
If you look at the HTML block display: padding gets added to the overall width of the object, and the background starts in the padding area, and the right half is padded
However please take note, that button elements are NOT suited for embeding any other nodes inside (like span). They may work OK in the browser, but IE can make your life really hard (not to mention that as far as I know, it's not valid)
Form elements like buttons are always hard to style, and riddled with minor bugs like these.
Instead of applying the class to the button element itself, perhaps try and apply the button's styling to an extra span element inside the actual button?
In short:
button {
background: white;
border: 0;
}
button div {
font-weight: bold;
border: none;
background: top left url(../images/blue_button_left.gif) no-repeat #24AADF;
color: #FFFFFF;
height: 25px;
}
button div div {
height: 25px;
background: top right url(../images/blue_button_right.gif) no-repeat;
position: relative;
}
And HTML:
<button type="submit"><div><div>Submit</div></div></button>
I use DIVs instead of buttons and have a function to build them in-place. It ends up looking like this:
alt text http://fb.staging.moveable.com/samplebutton.gif
inline script call:
<script type='text/javascript'>makeButton("Log in","login()")</script>
code:
function makeButton(text,action) {
document.writeln("<a class='titleGen' href='javascript:// "+action+"' onclick='"+action+";return false'><div class='btn'><div class='btnLeft'></div><div class='btnMiddle'><div class='btnText'>"+text+"</div></div><div class='btnRight'></div></div></a>")
}
css:
a.titleGen, .btnText, .btnGText {
text-decoration:none
}
a.titleGen:hover, .btnText:hover, .btnGText:hover {
text-decoration:none
}
.btn {
height:22px;
display:inline;
cursor:pointer;
margin-right:5px;
}
.btnLeft {
background-image:url(/images/bg_btnLeft.gif);
width:3px;
height:22px;
float:left;
}
.btnRight {
background-image:url(/images/bg_btnRight.gif);
width:5px;
height:22px;
float:left;
}
.btnMiddle {
background-image:url(/images/bg_btnMiddle.gif);
width:auto;
height:22px;
float:left;
}
.btnText {
color:#ffffff;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:2px;
padding-left:10px;
padding-right:10px;
}