i have the following HTML code:
<div class="impressum">
<a class="impressumstyle" href="https://www.google.de/?gws_rd=ssl">Impressum</a>
</div>
And in my CSS file:
.impressum {
position: relative;
left: 20px;
top: 275px;
background: transparent;
text-align: left;}
.impressumstyle {
font-family: Verdana;
font-style: normal;
font-weight: bold;
font-size: 16px;
color: #fff;
text-decoration: none;}
.impressumstyle:hover {
color: #8d8d8d;}
My problem is, that the link, when i use the top-value in .impressum, does not work anymore. And it does not change its color anymore as well..where is the problem?
Thanks.
try to target your ling directly through whole structure
.impressum .impressumstyle:hover {
color: #8d8d8d;}
or
.impressum a:hover {
color: #8d8d8d;}
or, if you wish to use the hover trigger over .impressum, use
.impressum:hover *{
color: #8d8d8d;}
or also this should work:
.impressum:hover a{
color: #8d8d8d;}
but beware, in some cases, using hover efect on parent element, if you want to change only its child, may not work, it depends on size of parent element. Especially with combination of absolute positioning, you can hover your link, but you actually not hovering its parent element in the same time.
My bad guys, i put this div into another, major div. the top value positioned this underneath the major div, that's why it doesn't work..
Related
I have a basic clickable text with black color, and I want to make another text green, but if I change it, the text that changes in black
How can i do this?
a {
color: black;
font-size: 40px;
font-weight: bold;
text-decoration: none;
}
<p class="margin-ot">Reviews from past exams</p>
Give the element you wanted to be green a specific class, then use that class to style it. Notice that i declared that style below the original style with a class selector next to it to give it the priority.
All of the above is related to CSS selectors, Selector Specificity. I suggest to take a research about all those CSS concepts which is really important to understand.
Additional, you can wrap the inner text of the black text by a span, then style it the way you want.
a {
color: black;
font-size: 40px;
font-weight: bold;
text-decoration: none;
}
a.green{
color: green;
}
a span{
color: green;
}
<p class="margin-ot">Reviews from past exams</p>
<p class="margin-ot">Reviews from past exams</p>
<p class="margin-ot">Reviews from past<span> exams </span></p>
Your question is confusing, please explain better what exactly you want to achive here.
If you have element with nested ones, then styles from parent also will affect it's children. The cleanest way to set different styling to children elements is to add to it various classes, for example:
.text-green {
color: green;
}
.text-big {
font-size: 1.2rem;
}
<p>A paragraph text with <span class="text-green text-big">span element in different color and size</span>.</p>
I have some anchor tags that get dynamic color based upon the classes assigned to them but on focus, they get a white color cause of bootstrap overrides.
now I need to override the default bootstrap style for anchor only with this class say a.custom-label and another generic class to get the original color (before focus) on focus like this:
a.custom-label:focus {
color: unset;
color: initial;
color: revert;
color: inherit;
color: none;
}
I tried these but nothing seems to work, can someone share a way to achieve this?
a.custom-label:focus { color: #000 !important; }
You can change color you want in place of #000. Also if you don't want to use !important then add external css and call it below bootstrap css in head block.
Try putting "!important" after the color name
for examle:
a.custom-label:focus {
color: #2d2d2d !important; }
The best possible way was to remove the default bootstrap label class from my HTML elements and pick all the styles in bootstrap for .label class and paste it in my custom.css with a selector .custom-label except on focus styling like this:
.custom-label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
and using only this class for all my elements.
this gives all the default style of bootstrap but as no styling for onfocus was pasted so issue got fixed.
For reasons explained below, I am using relative positioning on <span> inside <a> in order to slightly change the position of the text wrapped with <span> (to place it 2px higher than it's placed automatically). When I do this, obviously, the text-decoration: underline; is broken and below my <span> it is also starting 2px higher. Please see the fiddle: http://jsfiddle.net/8qL934xv/
I would like know, if there is a way to make the <a> underline run below the <span> as well, unbroken and preferably with HTML/CSS only.
How I came across this problem:
I am building a bilingual website, where sometimes English words are still in secondary language content. In these cases I wrap these words with <span lang="en"> and apply corresponding font-family this way:
* [lang="en"]
{
font-family: 'Ropa Sans', helvetica;
}
However, the font-family I use for my secondary language headings and 'Ropa Sans' do not look nice next to each other and they appear as if "not sitting" on the same line. To fix this, I had been using relative positioning on my <span>-s. For example:
h1 span {
position: relative;
top: -2px;
}
This solution worked just fine, before I realized that it messes up with the underline when applied to links. I could avoid using text-decorations on links like these, but I would prefer to know if there is some simple CSS solution that I was not able to identify.
This isn't possible, but you could do something like
a {
display: block;
border-bottom: 1px solid transparent;
text-decoration: none;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid blue;
display: inline-block;
}
This works.
I have this css:
.content .chapter_text li a
{
color: #7e9940;
text-decoration: none;
font-weight: bold;
}
And on the same page, it has places where it works, and also places where it doesn't work.
Take a look here: http://www.comehike.com - on the bottom of the page, the links appear in bold text. In the middle of the page, the links appear in non-bold text.
But they are styled the same - as far as I can tell. Any idea why the links in the middle of the home page do not appear bold?
Thanks!!
That's because those link in the center are not in a li. You could modify your CSS to the following to get the wanted result:
.content .chapter_text a
{
color: #7e9940;
text-decoration: none;
font-weight: bold;
}
They are not contained in a li element so the style does not apply. You have to move them into a li or make it like;
.content .chapter_text li a, .content .chapter_text p a {
color: #7e9940; text-decoration: none; font-weight: bold;
}
The links in the middle of the page are not children of an li element, which is what your selector targets.
element.style {
float: left;
font-weight: bold;
margin-right: 8px;
}
a:link {
text-decoration: none;
}
front_layout.css (line 21)
Inherited from div#header
#header {
color: #FFFFFF;
}
front_layout.css (line 542)
Inherited from body
body {
font: 75%/160% Arial,Helvetica,sans-serif;
}
These are all the styles showed from firebug for this element.
This element's color is constantly something else, instead of white (visual and in computed part of firebug).
Why is this? What's overriding it's inherited value from #div header?
Edit: the element is a link. <a float: left; font-weight: bold; margin-right: 8px" href="">About Us</a>
It's the default color for a link you are seeing. Add
#header a {
color: #ffffff;
}
and your link will be white.
The color from the container div #header will not be applied to the containing a tag. You have to specify it explicitly.
So the property color refers to the font color. background-color refers to the background color. Not sure if you were confusing those.
If it's font color related try adding !important after the color property and see if that overrides it. If so then it's likely a cascading issue and you need to see what other elements are being set. Do you have a:link { color:red; } somewhere that is causing issues. This can also happen if you have a bad closing tag.