I am trying to remove an underline from an href, that is wrapped in a div element. But for some reason it is not being removed.
Can anyone please help me? Below is the code.
<style>
a .menu_items {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
</head>
<body>
<div class="menu_items"> Pizza </div>
Try this:
a {
text-decoration:none;
}
Cause you are trying add text-decoration to the div with class .menu_items but not for tag a
you can do this and it will be easier after developing more pages and you will not have to create a style for each one you only have to call your style from your css
i explain you...you have to found your css default in your project or create a new one and load in your page where you want to call the styles that you will create in your css file....insert this in your css
a {
text-decoration:none;
font-size: 34px;
color:red;
}
and in your page after loading your css file you only have to copy this as you were codding
<body>
<div class="menu_items"> Pizza </div>
</body>
i hope i helped you
Please try putting the A link inside the DIV then reverse the CSS order. I believe the other way around is not valid.
just delete the selector '.menu_items' like this
<style>
a {
text-decoration:none;
font-size: 34px;
color:red;
}
</style>
<a href="#">
<div class="menu_items">
Pizza
</div>
</a>
here's the jsfiddle
The CSS property for removing the underline is
text-decoration:underline;
You will need to apply this to your anchor element.
See this here-> http://jsfiddle.net/CzDkH/
Hope this helps!!!
Place this above all your styles:
a {
text-decoration:none;
}
Get in the habit of placing all a , html , and body style properties at the top of your styles too! It will save you from headaches like this.
Happy styling :)
If you only want to do it for the class "menu_items" and not in the rest of the page, the only thing is you've got it back to front. It's like this:
.menu_items a {
text-decoration:none;
font-size: 34px;
color:red;
}
Similarly you've got the div inside the a tag, and should have the a tag inside the div
<div class="menu_items">Pizza</div>
Related
I have the following:
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div>
<a href= https://google.com>Google</a>
<a href= https://google.com>Google</a>
<a href= https://google.com>Google</a>
</div>
</body>
</html>
CSS
a:hover{
text-decoration: none
}
a:first-child{
color: #CDBE70
}
a:nth-child(3){
color: #FFC125
}
I just started learning HTML and I have a problem. What I have above displays 3 links to google but they are all on the same line. I want each of the links to be on a new line. I tried using <p> and changed all the a's to p's in the CSS code but it doesn't do anything.
If the links are semantically in a list, you should reproduce that in the markup as well:
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
If you don't want to have bullets in front of the links, you can remove them with CSS list-style-type: none; on either the ul or the lis.
CSS:
Add display: table in your tag
a{display: table;}
You can do it with CSS by using float:left; and clear:left;
a {
float:left;
clear:left;
}
Try using break to give a line break between the three links like this;
<div>
<a href= https://google.com>Google</a><br/>
<a href= https://google.com>Google</a><br/>
<a href= https://google.com>Google</a><br/>
</div>
<br> produces a line break in text.
Line break tag can be placed in other HTMl elements like
paragraphs, lists, tables and headings
Use line break tag for minor formatting issues. For larger issues
use tables and align attribute.
Line break tag does not require a closing tag.
For increasing the gap between the lines of text use CSS margin property.
• margin-bottom: 0
• margin-left: 0
• margin-right: 0
• margin-top: 0
Use the <br/> tag to break the row.
Google<br/>
But with this solution you'll have to modify the css, as the next <a> is no longer a child. Instead you can use nth-of-type and first-of-type:
a:hover { text-decoration: none }
a:nth-of-type(3) { color: #FFC125 }
a:first-of-type { color: #CDBE70 }
This will assure that only <a> tags are part of the selectors.
or you can put each link in it's own <div>:
<div class="menu">Google</div>
<div class="menu">Google</div>
<div class="menu">Google</div>
a:hover { text-decoration: none }
div.menu:nth-child(3) a { color: #FFC125 }
div.menu:first-child a { color: #CDBE70 }
Simply add <br/> or <p> tag after each of your link ,it will be displayed on new line. :)
see this Demo
and css
<style>
div a{
display:list-item;
}
</style>
You can try this:
Working Demo
a{
display:block;
margin-bottom:10px;
}
a:hover{
text-decoration: none
}
a:first-child{
color: #CDBE70
}
a:nth-child(3){
color: #FFC125
}
In order for you to break into a new line, you should look to use the display: block; declaration in your css.
Here's a few reasons as to why to use display instead of float.
Floating elements is all well and good, but can become messy due to the 'floated element' coming out of the DOM, which makes it harder to position other elements.
a elements default to display:inline, meaning multiple a tags appear in a single line. By changing them to display:block; means that only one will be in a row at a time (i.e. what you are looking for).
A quick demo would be something like:
a:hover {
text-decoration: none
}
a:first-child {
color: #CDBE70
}
a:nth-child(3) {
color: #FFC125
}
a {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>Result</title>
</head>
<body>
<div>
Google
Google
Google
</div>
</body>
</html>
You can do what Twitter's Bootstrap does all over the place and surround your elements with divs with proper classes. What I would do is:
CSS
.anchors a:hover{
text-decoration: none
}
.anchors div:first-child a{
color: #CDBE70
}
.anchors div:nth-child(3) a{
color: #FFC125
}
HTML
<div class="anchors">
<div>
<a href= https://google.com>Google</a>
</div>
<div>
<a href= https://google.com>Google</a>
</div>
<div>
<a href= https://google.com>Google</a>
</div>
</div>
I surrounded a tags with divs to make the a tags selectable by their indexes in css. In order to access them in the dom, defined a wrapper div and named its class anchors. I am first selecting the wrapper div (.anchors) and accessing it's child divs with indexes and then their anchors.
Here is the working fiddle.
This is my CSS code that is supposed to reformat links:
a {
color: #120000;
text-decoration: underline;
}
This is my HTML code:
<div id="intro" class="grid_9">
<h1>This site just might change your life</h1>
<p><a href="#" class=button>Browse Our Features</a></p>
</div>
The problem is that the header (but only this one) is being affected in the same way as the links. How can I fix this?
Just add a class to the <a> tags that should not follow it or use the existing one depending on whether or not that class is specifically for that purpose. Then, use the :not() selector:
a:not(.button) {
color: #120000;
text-decoration: underline;
}
Fiddle: Fiddle
Also, the header would only follow the CSS for the <a> if it were wrapped in an <a> tag. If this is true, give that <a> tag the set class.
<head>
<link href="index.css" rel="stylesheet">
<style>
#amor_di_mundo{
color:#ffffff;
}
</style>
</head>
<body>
<div id='divL'>
<div id='amor_di_mundo'>Amor di Mundo</div>
<div id='quem_boe'>Quem Boe</div>
</div>
index.css
#divL div{
color:#800000;
}
In index.css a div (#amor_di_mundo) is styled with color:800000
In a specific file I need to overwrite it with color:#ffffff but it's not overwritten !
The problem is with css specificity: a inline style has more power than an external file. Use the same selector, and move the inline styles in a default stylesheet, then add your new styles in a desired file and load first the default stylesheet, then the second stylesheet that you want to overwrite with
The css would need to follow the same rule. So it would need to be
#divL div {
color: #ffffff;
}
You could mark it as important to get around this:
#amor_di_mundo {
color: #ffffff !important
}
As #divL div is more specific than #amor_di_mundo.
You need to apply either color: #ffffff !important to or write css like this:
#divL #amor_di_mundo{
color:#ffffff;
}
I think you need to put the syle attribute not in header but where the element is in the body itself. The syntax to follow is:
Style="color:#ffffff;"
Add it to the opening tag of the element.
I'm currently stuck at a probably very trivial problem:
I have a simple HTML/CSS page with a text:
<head></head>
<body>
This is a Text about Foobar.
</body>
How is it possible to assign a CSS-class/id to the word Text without breaking the format? Let's say I want to add the class .yellow to it, which displays the text with a yellow background.
I think I got something blocking my mind cause it can't be that difficult... But all I can google (mostly trivial tutorials) uses CSS just on usual HTML-elements like <p> or <b> which would break my format.
I think you are missing out on <span> tag.
Try this out:
<head></head>
<body>
This is a <span class="yellow">Text</span> about Foobar.
</body>
And in CSS:
.yellow{
color:yellow;
}
Use an inline element. Span is purpose build for that. Alternately, if you wish to have semantic meaning behind your highlighted section, you can re-style <em> or <strong> with something like:
strong.highlight{
font-weight:normal;
font-style:normal;
background:yellow;
}
You just need to wrap the section in a span like:
<span>This is a <span class='yellow'>Text</span> about Foobar.</span>
See a working example here http://jsfiddle.net/dZZfB/
Hope that helps
The HTML for Example:
<center><span class="t1">Test1</span></center>
The CSS:
<style type="text/css">
.t1 {
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}
</style>
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}