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.
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.
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
So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.
I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).
Below is an example of my issue.
http://dabblet.com/gist/3483670
I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.
Thanks for all the help.
Incase the Link does not work for you. See Below.
CSS
a {font: 19px/26px 'Exo',Arial,sans-serif;
list-style: none outside none;
margin: 0 0 0 -10px;
padding: 0 0 58px;
font-weight:100;
text-transform: uppercase;
width: 100%;
text-decoration:none;}
a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}
.triangle { width: 0;
height: 0;
background:no-repeat right center;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid black;
display:inline-block;}
HTML
<span class="plus">+</span> <span>HOME</span><span class="triangle"></span>
You can add
a[rel="catagory"] {
vertical-align:middle;
display:inline-block;
width:auto;
line-height:25px;
}
.triangle {
vertical-align:middle
}
Explanation:
The part which aligns them is
a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}
But anchor's height is 22px, so we need
a[rel="catagory"] {
display:inline-block;
line-height:25px;
}
in order to make the height 25px.
But you have another rule (I wonder why):
a{width:100%}
Before setting display:inline-block the anchor has display:inline, so that rule does nothing.
But now it works and we want to disable it, so we need
a[rel="catagory"] {
width:auto;
}
I am having trouble with aligning jQuery tags, I've used a bit of a code and changed it and styled it myself, however the align seems to be leaving a space on the left, which I don't want, and I'm not sure how to get rid of it. Here's what I mean...
http://postimage.org/image/8k5rcz941/
This is the CSS code:
.usual {
color:#111;
padding:15px 20px;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10pt Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#fff;
background:#003663;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:8pt Verdana;
border: 1px solid #d0d0d0;
}
.usual div a { color:#000; font-weight:bold; }
Hope you can help me shift this to the left, I've been trying to figure out what it is, and just can't :(
Thanks and regards.
I'm guessing that the ul has a margin or padding applied. Remove it:
.usual > ul {
margin: 0;
padding: 0;
}
.usual has a left padding of 20px. Is that what you're trying to get rid of?
Inspect your elements in either Google Chrome or using the Web Developer add-on for FireFox. Find the element and check all it's inherited styles; chances are likely, like icktoofay says, you probably have inheritance somewhere. If doing like he said, adding margin & padding = 0 for the UL, you can try the hack !important
.usual ul {
margin: 0 !important;
padding: 0 !important;
}
But note that if you have any other margin/padding that is used on the UL element, you will lose those, either using !important or not because margin: 0 sets all 4 sides. To target just the left side:
.usual ul {
margin-left: 0 !important;
padding-left: 0 !important;
}
Sometimes the hack won't work, that's why it's important to check your inheritance by inspecting the elements in the browser first.
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;
}