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>`
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 would like to hover a link (<a> tag which contains a <div> tag), so the color becomes red BUT only when I hover the yellow field! My problem is that you can also hover it if the cursor is not on the yellow field.
I know that I could put the a tag into the div tag but I want to link the whole box and not only the text.
I also tried to use a { width: 100px; } but that is of course not working.
https://jsfiddle.net/3phy4950/
Any ideas how I can resolve this?
It does not work with width, because you are applying this style to the a tag. But a tags are display inline by default which means they dont take the whole space / line.
The div tag is display block by default, which means it will take the whole space / line.
What you need is to change the display style from the a div to inline:
a div {
display: inline;
}
See Fiddle
Use inline-block as the display format for the <a> tag.
a {
width: 100px;
display: inline-block;
}
Your updated fiddle
What about this:
<div class="btn" onclick="location.href='http://google.com'">» Hover Me</div>
And the css:
.btn {
background-color: yellow;
width: 100px;
}
.btn:hover {
color: red;
}
I have a document structure that is similar across multiple pages.
HTML:
<ul>
<li>
<div>
<img src=""/>
</div>
</li>
</ul>
Currently, there is a border around all img elements. The client would like me to remove the border from around the image, because not all images are the same size and they want a uniform look with the borders. I noticed that there was a div wrapping the images, but the div does not have an id or class. How can I select this div in my css?
Thanks
For instance using
ul>li>div {
border: 1px solid blue;
margin: 5px;
padding: 5px;
}
From my point of view, this is the best way to avoid HTML manipulation.
However, if the structure ul>li>div is repeated elsewhere, this can be ambiguous.
Give it a class or ID... Then make the CSS for it.
If there’s no context anywhere, your recourse is to select it by the structure (as least specific as possible, if you like); for example,
li > div > img
But there usually is some kind of context. If your <li> had a class, for example, you could do:
li.contains-image > div > img
Or just
li.contains-image img
if there’s no other image. Does it or one of its parents have a sibling that identifies it somehow? Use one of the sibling combinators!
li.before-the-one-that-contains-the-image + li img
In case you only have these set or cascade of element in the page you can use
<style>
ul li div {
border: 1px solid red;
}
</style>
Otherwise this will add a border on all element matching on the page.
Best is to use an Id or a class on the element.
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;}
I want to make my entire div a link like the a tag. Of course this may be possible with js, but I'm interested in seeing if this is possible to do with only css.
I have this:
#my_div {
width: 200px;
background-color: #090;
}
#my_div:hover {
background-color: #0f0;
}
Where the page structure is:
<div id="my_div">link</div>
You can make inline elements act as block level elements by setting their display property to block:
/* Make all a tags that are decedents of the
element with an id of `my_div` be displayed as block level elements */
#my_div a {
display: block;
width: 200px;
height: 100px;
text-align: center;
background-color: #090;
}
/* Handle the color change on hover */
#my_div a:hover { background-color: #0f0; }
You don't actually need the wrapping div - you can just target the particular a tag directly if you give it a class or id.
You can't make an element with CSS, but you can wrap your div with an a tag instead. It would look like this:
<div id="my_div"></div>
That makes the entire div a link to whatever your href is.
CSS3 does have the content property now, but I don't think you can put raw HTML into it. That would be pretty bad security wise if anyone had access to your .css files...
Anyways, I think the above solution is the simplest way to achieve what you asked.
Try this:
#my_div a {
display: block;
width: 100%;
}
You need to set your pseude class to the a tag not to the div:
#my_div a:hover {
background-color: #0f0;
}
That should do it's work :-)
I think you should check out this question that was posted to stack overflow.
Make a div into a link
It was the first result on Google for how to make a div a link.
Please:
HTML adds structure to content (e.g. chapters of a book, what is emphasized ...)
CSS adds what colors/fonts/placement for those items
Javascript adds makes it interactive.
You weren't clear whether you meant without "a href" or without using the "<a" tag.
If, on the offchance you meant the latter, the only other way I can think to make something clickable go someplace is to make it a form submit button.