Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
while making navigation tab in the anchor tag i used the text-decoration:none; command in the css file but the under line and color change still appears for me.Is there any way to remove the under line and color changing
Just by what you said I will take a guess where you went wrong.
#text-decoration:none; is not vaild due to the # in front, you use it in CSS.
Within the style of a div:
<div class="test" style="text-decoration:none;">Test</div>
Now within style tags:
.test {
text-decoration:none;
}
I'm sure from this you will be able to work out how to do what you want with it.
click here working demo
css
.lorem a{
text-decoration:none;
color:red;
}
html
<div class="lorem">
lorem ipsum
</div>
Style like this.
ul > li > a {
text-decoration:none
}
And it will work 100% unless u have nestede the A really wirede.
If you would share your actual CSS it would be easy to help you, but for now we have to guess...
Try to remove the hashtag before removing the decoration:
linkElement
{
text-decoration:none;
}
If you select the element by class, use
.linkElement
{
text-decoration:none;
}
If you select the element by ID, use
#linkElement
{
text-decoration:none;
}
Make sure you do this one the actual element carrying the underline. If the A (hyperlink) has underline, dont select the LI covering it:
Wrong example:
<ul>
<li>
underlined words
</li>
</ul>
ul li
{
text-decoration:none;
}
Right example:
<ul>
<li>
underlined words
</li>
</ul>
ul li a
{
text-decoration:none;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I want to be able to create a button which, when hovered over, changes the background colour of my website.
I have no idea how to attempt this and am looking for any help people can give.
You can see the effect I am trying to replicate on the desktop version of the nowthisnews.com website when you hover over the social icons.
Thanks
You can do it this way
function bgChange(x) {
document.body.style.background = x;
}
ul li{
color:#fff;
list-style-type:none;
padding:2px;
margin:7px;
}
ul li a{
color:#fff;
padding:5px;
}
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li><a href="" onmouseover="bgChange(this.style.backgroundColor)"
style="background:yellow;">yellow</a></li>
</ul>
You can do this with jquery
$(document).ready(function () {
$('.column-1').mouseover(function() {
$('.mask-1').css("background-color", "#061981");
......
});
}
essentially a mouseover(function ... on the area you want observ .. perform a changing on css backgrond-color related the proper div (in this case the div class mask-1)
you can easly inspect the code using firebugs on inspecting code provided by the browser
You can simply use jquery to style the background css. just make sure the jquery file is included on the page and modify the code below with your element id's
$('#button-name').hover(function(){
$('#background-name').css('background-color':'red');
});
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
TLDR: Please help me remove the underline of the text in the navigation.
Context:
I am making a Mobile news application.
Problem:
I want to remove underlines on the text of the navigation.(Home, login)
<h1>ignore this code </h1>
https://jsfiddle.net/uatmt99g/
Look specifically at the nav div and everything inside.
Similar post I have found whilst researching the issue (click link):
Remove line under image in link
I have tried the following but may have not implemented it correctly:
using CSS to remove text decoration,
using CSS to remove styling of text,
Any help?
Thanks in advance
you are using link () tags. to remove those "underlines" simply use the css below
a {
text-decoration: none;
}
The text with the underlines are links, so they have basic styling that goes with a link, including a line under the text. In order to remove it, you must specify text-decoration: none; to your a.
https://jsfiddle.net/uatmt99g/1/
Add this after nav in the CSS.
nav a{text-decoration: none;}
Links acquire their own properties . you must declare with the #mynewpattern a{} format
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm trying to style only 2 links in a footer and can't figure out how to do that in css.
This is the HTML
And the CSS I tried
I'm having some trouble posting direct code so I screenshotted both the CSS and HTML
CSS should be, note no spaces before "navbar-default" and "orange"
footer.navbar-default li.orange {
color: #c5ae51;
}
But better to drop footer and li selectors:
.navbar-default .orange {
color: #c5ae51;
}
Can you please post your complete code so that I figured it out.
try, this should work for you.
.navbar-default li.orange {
color: #c5ae51;
}
Try To add css a instead of li see below
footer.navbar-default li.orange a{
color: #c5ae51;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am creating a website and in one of my divs I have different sections of texts.
Can someone tell me how I can change the font colour of just one of the words in the div and all the rest of the words be a different colour?
I'm using HTML and CSS on Macromedia dreamweaver.
Thanks...
You need to wrap the text in an element and style it accordingly, if you were to do this using inline CSS, you could use e.g.:
Some colours include <span style='color:red;'>red</span>, <span style='color:blue;'>blue</span> and <span style='color:yellow;'>yellow</span>
Apply the following code and a word in different colour while others having a different colour.
<span style="color:red"> WORD </span>
You can specify any colour at the place of red... or any #value for the colour.
in dreamweaver select word and change color with color picker http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a-709dc768133b3b53744-8000.html
alternaty
the alternative is to use the tag selected word
You just have to wrap your word with a <span> tag and modify its color css property.
If you want to style the first "letter" of the paragraph or of the text div, then you can use CSS pseudo selector :first-letter.
<style>
div:first-letter{
color: red;
}
</style>
Although there is a CSS pseudo selector :first-letter, for the first word you have to use <span> tag and style it.
<div>
<span style="color: red">This</span> is the solution.
</div>
You should check this post also:
CSS to increase size of first word
<style>
span { color:pink; float:left; }
span p { color:green; float:left; padding:0px; margin:0px; }
</style>
<span> <p> De </p> sign </span>
If it should be used several times, you should create a class:
<style type="text/css">
span.redAndUnderlined {color: red; text-decoration: underline}
</style>