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;}
Related
https://i.imgur.com/T1hiXMO.png
Here is what it looks like right now. Clicking anywhere inside the black border links to the URL. I only want the text "RANKINGS" to be linked.
HTML:
<div id="div1">
RANKINGS</h4>
</div>
CSS:
#title {
margin-top: -10px;
font-size: 20px;
color: #e846ff;
text-align: center;
font-family: 'Trebuchet MS';
border: 1px solid black;
}
You are adding a Heading element (h4) inside an anchor (a) element.
Even though Anchors are inline elements, meaning they don't take the full width of the screen, you added a Heading element inside that Anchor.
Heading elements are block elements and they do take up the full with of the screen.
It would be better to reverse the html as seen in this codepen:
<h4 id="title">
<a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>
This way you get you wanted.
As h4 is a block level element it takes the entire width of the window. use span tag instead of h4. Also h4 is not valid inside a tag. Still if you want to keep it you need to apply
#title{
display:inline;
}
Because, probably, it's element with value block in property display. Inspect element and check it in such cases. Block elements have 100% width. If you need, change display: block; to display: inline; (in headings width 100% set as default) or another value for auto width. Also, you should check display of link, in this case.
Another way to solve this issue is to give your a element the width: fit-content; property. This will make the link hug the text and not extend beyond it:
<h4 id="title">
<a href="https://example.com" target="_blank" rel='noopener noreferrer'>RANKINGS</a>
</h4>
(CSS:)
h4 a{
width: fit-content;
}
I'd like a generalized solution that will always limit the clickable link area to the text of my h2 text. Note that the issue is that when you hover over or click on the space to the right of the text you are still on a clickable area.
Here is an example:
markup:
<a href="#p1">
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
</a>
css:
h2.services {
font-size: 16px;
}
Here is a demo:
http://jsfiddle.net/j7n3k/
ps - no js or jquery please. Only css and responsive solutions only if possible. Thanks!
You should put the <a> tag inside <h2>. By default, headings have display set to block, which means they will automatically take up all the horizontal space available if the width is not set explicitly. The link contains the heading, so the browser assumes the whole area is a link. If you insert <a> into <h2>, then it wraps only the text and not the entire heading.
<h2 class="page services">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
this will stop it from expanding:
h2.services {
font-size: 16px;
display: inline-block;
}
http://jsfiddle.net/vimes1984/j7n3k/4/
Read up on the display property and the position property.
DISPLAY
https://developer.mozilla.org/en-US/docs/Web/CSS/display
POSITION
https://developer.mozilla.org/en-US/docs/Web/CSS/position
To style:
you can use
.services{
/*this will style any element with a class of services*/
}
.services a{
/*this will style any a inside of a element with a class of services*/
}
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.
I have made a simple fragment of html, which contains this:
<div>Something here</div>
It obviously alert me that div cannot be inside an <a> tag. I have used a div, because I want the whole box (div in this case) to be a button. So the subclass :hover and a proper button area applies to the whole box, not only a text inside. As far as I remember divs can be used inside tags in html5. I use XHTML 1.0 Transitional. Is there anything I can replace a div with to avoid errors in the code? or should I change xhtml to html5? will it work good without touching the rest of the code? thank you.
You could use display:block.
An example is as follows:
HTML:
<a href="#" class="btn">Button</a>
CSS:
a.btn{
display: block;
background-color: Green;
width: 50px;
height: 25px;
text-align: center;
text-decoration: none;
color: White;
}
a.btn:hover{
background-color: lightGreen;
color: Black;
}
You can test it live here: http://jsfiddle.net/YdCzY/
Try using this:
HTML:
<a id="block-a" href="#">Something here</a>
CSS:
#block-a {
display: block;
}
You could try using 'span' elements within the 'a' element instead of divs...
You can apply styles to the span so that it behaves just like the div you wanted (e.g. rich content which is also overally a link).
AFAICS, the only difference between span and div are the default styles, and the elements they're allowed to be children of. But I am willing to be corrected by more learned contributors...
Use
<div onclick="..">...</div>
or a display: block; on your a-tag (http://green-beast.com/blog/?p=74)
It is way more easier at least
`<div onclik="window.location.href='url'">
</div>`
I have the following markup:
<a><div class="action_button">Log In</div></a>
I have styling on .action_button to make it bigger and have a background etc.
I also have styling on .action_button:hover to make it have a lighter background and an inset shadow when the user hovers on it.
How do I apply styling to the anchor tag that surrounds it, but only when it surrounds a .action_button div.
For example, this works:
a:hover {
text-decoration:none;
}
But it affects all links, I only want to affect those that surround the .action_button divs.
Why not just:
<a class="action_button"></a>
CSS:
.action_button {
text-decoration: none;
display: block;
/* other styles */
}
I don't see the point of having a DIV inside an A. If you want the anchor to be a block, just set display: block on that anchor directly.
a .action_button:hover{
text-decoration:none;
}
I would change the code around slightly - the <a> should be nested inside the <div>, as the div is a block element and the anchor tag is inline.
Then you can simply use the following:
<style>
.action_button a {text-decoration:underline; }
.action_button a:hover {text-decoration:none; }
</style>
I think you need to add a class to the "a" element that contains the button. you can't build a selector that works in the other direction.
You can use JQuery to add a class to every "a" that has a div with the class .action_button
$("a").has("div.action_button").addClass("myclass");
And then, obviously, use that class to select your "a" tags.
http://api.jquery.com/has/