I have links on my page which are internal, for example:
/page#h1
/page#h2
When you click on one of these links, in Chrome you see a blue border around the link like follows:
The additional space the border surrounds above the text is caused by the rule:
.jumpTarget:before {
content:"";
display:block;
height:90px;
margin:-90px 0 0;
}
Which compensates for a fixed position top horizontal menu.
How do I remove this blue border? I've tried the CSS selector :target to specify a red border but this gives me:
You must use style rule .jumpTarget:active {outline:none;}
Related
How do I remove the subtle grey line behind each of these inputs? I've looked and I can't find the css attribute that controls it and nothing obvious is showing up in the inspector. I'm using bootstrap and overriding the css as and when I need it.
Add box-shadow: none to the CSS. And mark the question answered.
If it is from left side menu then, that is from li of side-menu ID selector.
Then add new stylesheet above tag </head>, and give border into 0px; or none, as follows:
<style>
#side-menu li{
border:0px;
}
</style>
Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO
Like the title says I can't get the background of the a element to be one solid color. Instead my code make each line the color. I have even tried wrapping the php element in a new div and setting that background color but it does the same thing. Any advice is useful.
Site: http://www.whatsatyourcore.com, bottom widget titles
The html:
<a class="teaser-title-top" title="Social customer service and your marketing strategy" href="http://whatsatyourcore.com/?p=78"> Social customer service and your marketing strategy</a>
CSS:
.teaser-title-top { background: black;}
a.teaser-title-top {
color: #fff;}
The above "code boxes" are an example. The first one is what the background is doing on my titles. The second one is what I want it to be.
if you wrap it in a div and set that divs background-color that should work. The element you are setting the background-color for needs to be a block-level element (a div is) you can set an element to display as a block level element with display: block; else it will just color the background of the inline content.
you are styling the anchor which is only going to stlye what's in it. Try something like:
<div id="title-box">
<div class="teaser-title-top">
Social customer service and your marketing strategy
</div>
</div>
And then style the .teaser-title-top
As with the other answers, you can style a wrapper element. However if you want to style just the anchor text directly, try this...
The issue is the line-height of your text. AS you can see, it is spaced out. If you. The height of the line, compared to the size of the text, is bigger.
As an example, set #bottom a { line-height: 100%; } (which is what teh font-size is set to) and you'll see the gap go away. You'll also see the spacing go away. You can "bring back" the spacing with top/bottom padding, as well as changing the line-height.
Try this hope it works
#bottom .teaser-title-top {
color: white;
}
In your css file
With the example below, I need to add padding and background-color properties to the text anchor. I then need to exclude padding and background-color from anchors that contain images.
<p>
this is a text link that needs to be styled
<img src="image/name.jpg" alt="this needs to be excluded from styling" />
</p>
If I have a red background and padding on my text links, I do not want that same red background and padding to appear on my linked images. The images will always be in their own anchors, not mixed with text within the same anchor.
The rub is that I can not add classes or IDs to the img tags - I do not have edit control of that data.
So how can I add CSS attributes to all anchors, while excluding anchors that contain images?
Using JQuery:
$(function() {
$('a:not(:has(img))').css('background','red');
});
Currently, you cannot select the parent of a matched child selector. You'll have to use javascript to accomplish this.
That being said, if your page background is solid, you could use negative margins and a background on your img tags to overlay your a background… Here's the example. I have not tested on all browsers, but it seems to work for me in Safari, Firefox, and MSIE8.
a {
display: inline;
padding:10px;
background:red;
}
a img {
border: none;
vertical-align: bottom;
margin:-10px;
padding: 0px;
background:white;
}
For any visited (a:visited) web page, I would like to display those links on my website with a small checkmark to the left of the link.
So for example:
"this is an unvisited link"
√ "this is a visited link"
Question: how do I accomplish the checkmark using CSS?
You can use a combination of background and padding to get this effect.
a:visited {
background: transparent url("path/to/checkmark.png") left center no-repeat;
padding-left: 10px;
}
Adjust the padding, and background position to fit your needs. Hope this helps.
a:visited:before {
content: "\00A0\221A";
}
source
You could use :before pseudo selector, but it's not well supported.
For better support, make it an image, and set it to background-image. Then use padding to show the image.