<a href='#' style='display: block; border: 1px solid black; width: 208px; height: 210px;'>
<a href='#'>My link</a>
</a>
Why is it that when I open this html in a browser, it shows me the 'My Link' button outside the box with the black border (that is another link) element?
The HTML is invalid. An a element may not contain another a element. You are seeing browser error recovery in action.
Given your code as input, the DOM generated in Chrome looks (when serialized back to HTML) like this:
<a href="#" style="display: block; border: 1px solid black; width: 208px; height: 210px;">
</a>My link
I don't have time to write tests to prove it, but I suspect the logic being used to recover is:
Second a element not allowed here
Close first a element prematurely so the second one is allowed
My Link
End of a element
End tag for a element that is not open: discard it
looks fine if you do this:
<div style="display: block; border: 1px solid black; width: 208px; height: 210px;">
My link
</div>
Related
In my Angular project, I have a div with 3 child elements which are a span, an i element (icon) and a span with innerHTML attribute. Normally, all texts should be in the same line, but innerHtml code always starts with p and I can do nothing about it, so this causes a problem. Any suggestions?
This is my output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
This is desired output:
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span>This is an example text. This is an example text.</span>
</div>
<p> is a block element and you covered it by span(inline). Add style="display: inline;" to <p> element. Browsers automatically add a single blank line before and after each <p> element.
<div style="border: 1px solid #DDD; padding: 3px; width: 50%; margin: 0 auto;">
<span>2020.07.10</span>
<i>icon</i>
<span><p style="display: inline;">This is an example text. This is an example text.</p></span>
</div>
It's not clear what you mean by "innerHtml code always starts with p and I can do nothing about it."
If you entered this markup yourself, you can just omit the p tag.
If you are getting this html from a CMS or database, and you can do nothing about the p tag that's in there, then:
Your question maybe should include the binding, not just the output.
You can let the p tag exist, but add CSS to make it do nothing. In the snippet below, I replaced your inline styles with a CSS class "myDiv", and put in a rule to render the p tag useless.
.myDiv {
border: 1px solid #DDD;
padding: 3px;
width: 50%;
margin: 0 auto;
}
.myDiv span p {
display: inline;
}
<div class="myDiv">
<span>2020.07.10</span>
<i>icon</i>
<span><p>This is an example text. This is an example text.</p></span>
</div>
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
My Code: https://jsfiddle.net/zL5b22bb/1/
Code 1. This is the original code showing the hyperlink border after you click on the image. It's clearly visible.
<a href="http://5645646/" target="_blank">
<img style="display:inline-block;background-color:#000000; width: 100px; height: 100px; cursor: pointer;border: 5px solid #0F16FD;"
onmouseover="this.src='http://i.imgur.com/ra4471G.png';
this.style.color='white'
this.style.border='5px solid #66A4F2'"
onmouseout="this.src='http://i.imgur.com/awwMlPD.png';
this.style.color='white'
this.style.border='5px solid #0F16FD' "
/></a>
Code 2. After I remove the "img tag" the the hyperlink border is not visible. Which is what I want. But, by removing "img tag", the onmouseover background image gets disabled which is what I don't want.
<a href="http://5645646/" target="_blank" style="display:inline-block;background-color:#000000; width: 100px; height: 100px; cursor: pointer;border: 5px solid #0F16FD;"
onmouseover="this.src='http://i.imgur.com/ra4471G.png';
this.style.color='white'
this.style.border='5px solid #66A4F2'"
onmouseout="this.src='http://i.imgur.com/awwMlPD.png';
this.style.color='white'
this.style.border='5px solid #0F16FD' "
/></a>
Code 3. Now the hyperlink is invisible after you click on it, but the borders double up onmouuseover which messes it all up.
<a href="http://5645646/" target="_blank" style="display:inline-block;background-color:#000000;color:white; width: 100px; height: 100px; cursor: pointer;border: 5px solid #0F16FD;">
<img src="http://i.imgur.com/awwMlPD.png" width="100px" height="100px"
onmouseover="this.src='http://i.imgur.com/ra4471G.png';
this.style.border='5px solid #66A4F2'"
onmouseout="this.src='http://i.imgur.com/awwMlPD.png';
this.style.border='5px solid #0F16FD' "
/>
Everything is in the jsfiddle link.
I'm trying to get it to where you can have 2 color borders while keeping the hyperlink invisible with onmouseover working.
Is there a less complicated method than doing this? https://jsfiddle.net/fcdy4ocw/4/
<a id="test" href="http://5645646/" target="_blank" style="color:white; display:inline-block;background:#000000 url(http://i.imgur.com/awwMlPD.png);width:100px;height:100px;cursor:pointer;border:5px solid #0F16FD;" onmouseover="this.style.border='5px solid #66A4F2';
this.style.background='#000000 url(http://i.imgur.com/ra4471G.png)';" onmouseout="this.style.border='5px solid #0F16FD';
this.style.background='#000000 url(http://i.imgur.com/awwMlPD.png)';"></a>
I am styling a landing page for a facebook campaign on a wordpress website. It is not my own website and I do not want to change in the general css for the whole website when I style the landing page. Therefore I'm styling all the elements of my entry right in the text editor for that entry, if that makes sense.
When people click the link on facebook they get to the page I'm making. Basically the page should consist of two buttons that redirects people further on the page. I styled two anchor tags like squared buttons and so far so good, but to really get the "clickable" feel I want the background to change when the a tag is hovered.
Here is how I created the buttons:
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
If I had a stylesheet I could just style the a:hover with another background color and I would be done, but since I'm styling the individual elements on the page I dont know how to style the :hover property of the element within style="".
How do I style the :hoverproperty of an html element right in html? Or is there a way to create a stylesheet inside of the entry in wordpress?
I've tried to add this in to the entry, but it did not work:
<style media="screen" type="text/css">
.green a:hover {background-color: #799f34;}
.blue a:hover {background-color: #2c8cba;}
</style>
Could someone point me in the right direction? Thanx!
You need to add !important to your CSS rules to override backgroound-color directly in HTML.
a:hover.green {background-color: #799f34!important;}
a:hover.blue {background-color: #2c8cba!important;}
If OP wants to do it in HTML, not in CSS, there is some examples I found: exaple one and related post
I think you should put these code in any other block/ div which will identify this page from the rest of the page. i create a snippet of your code this will clear everything to you.
#land-pg .green:hover {background-color: #799f34 !important;}
#land-pg .blue:hover {background-color: #2c8cba !important;}
<div id="land-pg">
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
</div>
ANOTHER SAME DIV BELOW which are not affected
<a class="green" style="background-color: #92c03e; display: inline-block;
padding: 100px; margin-right: 20px; color: #ffffff; text-decoration:none;">
Button 1
</a>
<a class="blue" style="background-color: #35a8e0; display: inline-block;
padding: 100px; color: #ffffff; text-decoration: none;">
Button 2
</a>
I'm applying a css class for the following asp.net custom control which renders in browser something like this:
<div class="box search_mlo">
<div class="gray_box">
<div class="blue_box">
<div>
<input id="Search_srcText" class="btn" type="text" onblur="return objSearchWidgetLibrary.searchLostFocus(ECMSSearchTextBox2_srcText)" onfocus="return objSearchWidgetLibrary.clearText2(ECMSSearchTextBox2_srcText)" onkeypress="return objSearchWidgetLibrary.fnTrapKD2('ECMSSearchTextBox2_srchAnchor1',event)" name="ECMSSearchTextBox2$srcText">
</input>
<a id="Search_srchAnchor1" class="btn" onclick="return objSearchWidgetLibrary.onsearchclick1('ECMSSearchTextBox2_srcText','ECMSSearchTextBox2_srchAnchor1')" href="../System/SearchResults.aspx?k=">
<span>Search</span>
</a>
</div>
</div>
</div>
</div>
The CSS class is:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
}
.blue_box div input.btn
{
background: url("/publish/images/bg_search.jpg") no-repeat scroll 9px 6px #FFFFFF;
border: 1px solid #0064AD;
color: #BFBFBF;
float: left;
font-size: 1.3em;
font-style: italic;
font-weight: bold;
height: 21px;
margin-right: 4px;
margin-top: 2px;
padding: 5px;
width: 328px;
}
so it looks something like search box and button to submit. This control is used by other sites so, for some sites we require only hyperlink search button and in some we replace image. But in this case I'm trying to replace image but I'm getting only half of the image something like below..
http://i.stack.imgur.com/Dfaqn.jpg
You can see a search text coming inside that image.
The prototype is something like this and the first button should match with this:
http://i.stack.imgur.com/QpRmg.jpg
I cannot remove that span tag present inside anchor tag since in other sites its working fine and removing that would create problem in them.
can any one help with feasible solution where I can get the entire image.?
Thanks in advance.
#Sayed; a tag is an inline element & inline elements didn't take height, width, vertical margin & padding. So; give display:block in your css for a tag like this:
.blue_box div a.btn
{
background: url("/publish/images/btn_search.jpg") no-repeat;
height: 36px;
width: 86px;
display:block
}