Good day. I have a code:
<div style=\"position:relative;height:auto;padding:5px;float:left;\">
<img id=\"avimg\" src=".$uinfo["avatar_url"]."><p id=\"act-await\" style='position:absolute;top:13px;left:24px;'><i id=".$uinfo['id']." class=\"icon-checkmark\" onclick=\"accfr(this.id);\"></i><br><i id=".$uinfo['id']." onclick=\"decfr(this.id);\" class=\"icon-cancel-2\"></i></p>
</div>
CSS:
#avimg:hover {
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(opacity=40);
}
#act-await {
display:none;
}
#avimg:hover + #act-await {
display:block;
}
All works. But I need a link under an image. When I make this, block #act-await not showing (when mouse over).
<div style=\"position:relative;height:auto;padding:5px;float:left;\">
<img id=\"avimg\" src=".$uinfo["avatar_url"]."><br><font size=\"1\">".$uinfo['name']. "<br>".$uinfo['surname']."</font>
<p id=\"act-await\" style='position:absolute;top:2px;text-align:center;'><i id=".$uinfo['id']." class=\"icon-checkmark\" onclick=\"accfr(this.id);\"></i><br><i id=".$uinfo['id']." onclick=\"decfr(this.id);\" class=\"icon-cancel-2\"></i></p>
</div>
If you don't know what the link is yet use the pound key. You have an empty href
<a href ="#"......
In you case
<a href=\"#\".......
And when you have a link replace the pound key with it
Related
This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
</a>
Is this a good practice? Am I doing it wrong? How would you do this?
Thanks for the help!
Straight from the W3C for HTML4:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
HTML 5
And for HTML5 it is a little different.
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
To simply answer the question: No.
That being said, here's a pure html/css workaround:
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}
<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
I'm a W3C compliant hyperlink inside that box
</div>
</div>
Wrap your nested link inside an object tag :
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object></object>
<object></object>
</a>
Although I totally agree with the selected answer and yes, you shouldn't have Interactive Content inside an A element, sometimes you may need a workaround to this.
Here's an example where you need to put an interactive element inside an A tag. That little close button on the top right.
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
I would restyle it so that it is more like this format:
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</a>
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
Use #mikevoermans HTML format as shown below and bind click event
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</div>
Your click event should look like this:
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
While technically not an answer to the question, another workaround is to bind the click event to a span or div:
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
One solution is to position a link absolutely inside of the parent link container:
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
</div>
</div>
#Jules answer, just shorter:
.parent {
position:relative;
}
.overlay-link {
position:absolute;
inset: 0;
}
html:
<div class="parent">
<a class="overlay-link" href="..."/>
<div class="child">
</div>
</div>
My landing page has a slideshow with text and links that direct the visitor to it's corresponding page.
Landing page link: http://karenrubkiewicz.com/martin/
The yellow arrow in the second box should be a clickable link, but it doesn't respond.
Here is my coding:
HTML
<div id="maximage">
<div>
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
<div>
<img src="images/00_landing page/backgrounds/background_02.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
ETC...
</div> <!--END MAXIMAGE DIV-->
CSS
#maximage {
/* position:fixed !important;*/
display:block;
}
.in-slide-content {
font-family: 'Oswald', sans-serif;
font-size:16pt;
letter-spacing:1px;
position: absolute;
right:63px;
bottom:240px;
width: 220px;
background: rgba(0,0,0,0.8);
color:#FFF;
text-align:center;
text-decoration:none;
padding-top:23px;
padding-bottom:23px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2{
position: absolute;
right:63px;
bottom:162px;
width: 220px;
background: rgba(0,0,0,0.8);
text-align:center;
padding-top:25px;
padding-bottom:25px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2 a{
position: relative;
display:block;
}
I am using a maximage plugin, I am not sure whether that could be a possible cause of inference.
One more note, in my HTML, when I remove a certain div, the link begins to work, only then my slideshow falls apart.
EXAMPLE
<div id="maximage">
<div> <----REMOVE THIS DIV
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div> <-----AND REMOVE THIS DIV
ETC...
</div> <!--END MAXIMAGE DIV-->
I'm really stuck on this one.
Thanks in advance!
Place this in CSS:
#nav {
z-index: 2;
}
body .mc-cycle {
z-index: 0;
}
If it wont help, then this:
#nav {
z-index: 2 !important;
}
body .mc-cycle {
z-index: 0 !important;
}
Looking at your codes on your site, (which btw look different from what you posted here), I think things get complicated when your in-slide-content and in-slide-content2 divs are enclosed in your mc-image with its background set to your image file (instead of using an img tag).
This is what your current codes look like:
<div class="mc-image " ... background-image: url(http://karenrubkiewicz.com/martin/images/00_landing%20page/backgrounds/background_01.jpg);" data-href="">
<div class="in-slide-content">PLACES</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
Try convert your mc-image to an image tag and extract your in-slide-content and in-slide-content2 out of your maximage.
I think this live demo on jsfiddle is very similar to what you are trying to do.
The reason why manipulating the z-index attribute (of the image, the anchor tag etc.) in your css script probably won't work is because the jquery.cycle.all.js script assigns all your images with some high value z-index on start-up so that they can stack on top of each other.
// line 295 - 303
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
As the script cycles through your images, some codes (I haven't figured out where yet) will reset the z-index of that image to z+1, so that current image will be stack on top of the rest. I tried setting the z-index of some of your HTML elements to some ridiculous high number but to no avail. Anyway, I still think the cleanest way to solve this is to look at the fiddle I shared.
I'm working on a site that has a "switch" (just an images linked to a different version of the site). The image will show up, but it wont be clickable. After some troubleshooting, I also discovered it was clickable before I put any CSS or internal styling in. The image is using both a wrapped link and an internal link.
Code:
<a href="aboutOff.htm">
<div style="position:absolute;left:90%;float:right;">
<img src="on.jpg" href="aboutOff.htm" alt="Switch" id="switch" style="z-index:12; float:right;"/>
</div>
</a>
CSS:
#switch{
width:119px;
height:auto;
z-index:10;
}
Any help would be GREATLY appreciated. Thanks!
HTML
<div class="switchContainer">
<a href="aboutOff.htm">
<img class="switch" src="on.jpg" href="aboutOff.htm" alt="Switch"/>
</a>
</div>
And the CSS
.switchContainer {
position:absolute;
left:90%;
}
.switch {
width:119px;
height:auto;
z-index:10;
}
I am trying to figure out how exactly to add two buttons side by side. The button will be an image that the user clicks and it then goes to the URL. I tried adding a class in CSS with an inline display and added html calling that class on a button with an extra style tag added to it. It is not displaying the button though.
I am unsure how else to do it without adding the style tag directly in the html code if I needed the buttons side by side. That is the only way I know how to di it with display: inline;.
Here is how I am doing it:
CSS
.storebtns {
display: inline;
}
HTML
<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
I might not be understanding the question correctly, but if you want two buttons to be side by side and have an image background, try:
<a class="storebtns" href="#"></a>
and:
.storebtns {
padding:100%;
background:url("IMAGE_PATH_HERE");
}
This might work better, not sure if its feasible for you.
.storebtns
{
float:left;
width:100px;
}
<a class="storebtns" href="http://www.google.com">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>
here is a working example Here
This might work better, not sure if its feasible for you.
<a class="storebtns" href="http://www.google.com">
<img src="/img/btn.png" />
</a>
Try adding the buttons using ul, floating it and adding background images with css.
http://jsfiddle.net/nxEd5/
<body>
<h1>Click on a kitty.</p>
<div id="buttons">
<ul>
<li>Button1</li>
<li>Button2</li>
</ul>
</div><!--end buttons-->
</body>
Here is the CSS:
ul li{
float:left;
list-style-type:none;
}
ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}
ul li a:hover{
opacity:1.0;
}
This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
</a>
Is this a good practice? Am I doing it wrong? How would you do this?
Thanks for the help!
Straight from the W3C for HTML4:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
HTML 5
And for HTML5 it is a little different.
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
To simply answer the question: No.
That being said, here's a pure html/css workaround:
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}
<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
I'm a W3C compliant hyperlink inside that box
</div>
</div>
Wrap your nested link inside an object tag :
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object></object>
<object></object>
</a>
Although I totally agree with the selected answer and yes, you shouldn't have Interactive Content inside an A element, sometimes you may need a workaround to this.
Here's an example where you need to put an interactive element inside an A tag. That little close button on the top right.
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
I would restyle it so that it is more like this format:
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</a>
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
Use #mikevoermans HTML format as shown below and bind click event
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</div>
Your click event should look like this:
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
While technically not an answer to the question, another workaround is to bind the click event to a span or div:
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
One solution is to position a link absolutely inside of the parent link container:
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
</div>
</div>
#Jules answer, just shorter:
.parent {
position:relative;
}
.overlay-link {
position:absolute;
inset: 0;
}
html:
<div class="parent">
<a class="overlay-link" href="..."/>
<div class="child">
</div>
</div>