I have a style that is styling the links on the navigation bar, but it styles all other links in the website, so I defined the div "menubar" as the selector infront of the link and visited selectors but it still styles all links in the website. Any solutions would be greatly appreciated.
CSS:
#menubar a:link, a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
position: fixed;
}
Your selector is wrong, change to this one:
#menubar a:link, #menubar a:visited /* width #menubar after the comma */
Your initial selector, #menubar a:link, a:visited means: "all links in #menubar and all visited links in the entire document". The comma starts a completely new selector so you have to include the parent also in the second selector.
I think #Yotam is right.
Another idea how to debug this. I use Web Development Toolbar inside Firefox. It has plenty of tools, one is to inspect the page. Use the one to see the style ( I like the 3D View), there you can press on the html element, in your case the link. Next to the page, it lists the style sheet definitions . The order shows what is the active style. Top is active, and everyhing else is lower and overwritten.
In this case, you may see, if your button has the correct definitions you want.
Related
I am using a nav element to create a menu. I am also using JQM to format a listview. The CSS of the JQM overrides the nav style and I simply cannot understand why.
This is my nav element with link elements:
<nav>
<ul>
<li>New</li>
<li>Update</li>
</ul>
</nav>
And this is the CSS for the link elements inside the nav element:
nav > ul > li > a {
color: #aaa;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
The color attribute is overridden by the JQM stylesheet (turning out blue). The specific overriding setting has been identified as:
.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a a:visited {
color: #38c;
}
What I don't understand is why is it being overridden? The JQM style has some specific classes which I didn't specify in my nav element, so why am I losing the color settings? Why is the JQM style applied to my non-classed link/nav?
NB: I am complete noob when it comes to these things, so excuse my plain ignorance
The JQM styles are probably added by it's script. As soon as you initiate the element, it gets the classes assigned to it.
The reason that it overrules is because the selector is more specific. If you want to read more about specificity, follow this link.
If you want to overrule the JQM style, you have a few options
Quick and dirty
Use the !important rule, it overrules all other styles
nav > ul > li > a {
color: #aaa !important;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Latter rule
Use the same selector, but be sure that your stylesheet is loaded after the JQM stylesheet
.ui-page-theme-a a:visited,
html .ui-bar-a a:visited,
html .ui-body-a a:visited,
html body .ui-group-theme-a a:visited {
color: #aaa;
}
I have a problem and basically I want to do this
.buttonar {
background-color: #4CAF50; /* Green */
border: none;
color: #FFF;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: #008CBA;
color: white;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: white;
color: black;
}
<a class="buttonar button2" href="http://www.facebook.com" target="_blank" rel="alternate">button</a>
But the problem is, my website already has a template.css (Joomla website) in which styling for a, a:link, a:hover etc are already set. I want my button to appear exactly as on the code snippet output but I cannot seem to get it working as the link stays blue ((barely visible) set by template) or it only changes color when I hover over the link itself and not the button (created another class for a:link and a:hover).
Can anyone assist me please?
The 'C' in CSS stands for Cascading. This means that CSS will look at items at the top, then as it goes down the sheets, it will overwrite them.
This applies to how you put the files in your HTMl as well:
HTML
<head>
<!-- Insert Joomla CSS here -->
<!-- Insert your custom CSS here -->
</head>
This will apply the Joomla CSS first, but then your custom styles overwrite it.
On second read...
...if you're talking about just styling, the .button2 selects the element that has class="button2" in your HTML. Simply add that class in the HTML to the button you want styled and it will work.
You can inline your style in the button, and it will take precedence.
Check this.
The fix may be as simple as adding an !important to your css. This hijacks the cascading rules and should override your template.css rules.
Also, make sure that wherever you place your own css rules, place it AFTER template.css is called on your page. It may not be enough to place it anywhere in the head tags. I would first find out where template.css is being called (usually in a link tag) and place your own css with an !important marker after it.
For info on this: https://css-tricks.com/when-using-important-is-the-right-choice/
Sung
I have taken the links dynamically which are coming in a list. When i click on the link, in other container its page opens. I want to change the visited link color.Basically the block background color. I am able to change color on click. but i need it will stay as it is until n unless i refresh the page. I used
ul
{
list-style-type: none;
margin:0;
padding:0;
text-decoration:none;
display: block;
}
a {
text-decoration: none;
display: block;
}
ul li{
padding-bottom: 10px;
text-decoration: none;
}
li:hover {
background-color:#7EA5E4;
}
li a:visited, a:active{
background-color: #09F;
}
Please suggest me where i have to do changes.
That is, what :visited does. But you "block" is the list item, which can't be visited, because it isn't a link. Style you anchor as block by moving the appropriate styles from the list item to the anchor. That way you also could style the background.
You could try something like, changing the colour / font family to suite you
.Link A:visited {
text-decoration: none;
font-family: arial,sans-serif ;
color: #fff;
}
The .link is a custom class
Hope this can help,
Thanks,
Jack.
i hope you are looking like this:- http://tinkerbin.com/VsbhpxGi
you just have to make .active class and define in li
like this :-
li.active {
background-color:#7EA5E4;
}
UPDATED ANSWER
i hope you are looking like this if you will click on any link so that link will be active...... see the updated answer...
http://tinkerbin.com/Fm0lRO8Z
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.
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.