How would I go about making this div a link to a page? There are some links within the div, which I am wondering, does that prevent me from making the entire div a link? as you can see I have tried wrapping the div in a a tag, but that does not work. I got it to work with javascript, but the 'hand' pointer doesn't show up when hovering over the div. I know I could add this in CSS, but I would prefer to do it with link tags.
<a style="display:block" href="viewmessagethread.php?id=<?php echo $messageid; ?>">
<div class="<?php echo $message_read_status; ?>">
<div class="media-body">
<span class="pull-right noti-time"> <?php echo $dte_new; ?></span>
<div width="100%"><b><?php echo $title;?></b>
</div>
</div>
</div>
</a>
Sincere thanks for any help. It is greatly appreciated.
Yes, if there are links within the <div>, that won’t work. An <a> element automatically ends at the start of another “nested” <a> element. Just like with <p>.
See the MDN docs on <a>:
Permitted content: flow content (excluding interactive content) or phrasing content.
Permitted parents: Any element that accepts phrasing content, or any element that accepts flow content, but always excluding <a> elements (according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent).
Related
I have a <a> link with items inside. When I put a <p> tag around it, to simulate drupal's line break and paragraph filters that will be applied to my code automatically, The link becomes two links. One link is inside the <p> with no children the other is outside with one of the child elements. Why is this happening and how can I prevent it?
<div class="notDrupal srvTileGroup">
<p>
<a href="http://www.airforcemedicine.af.mil/" class="notDrupal srvTile shadow2 shadow6h">
<div class="notDrupal srvTileTxt bAirforce"><!-- <p class="notDrupal">AIR FORCE</p> --></div>
<img class="notDrupal srvTilePic" src="https://openclipart.org/image/2400px/svg_to_png/256723/BackgroundPattern126Colour.png" alt="air force"></img>
</a>
</p>
</div>
Codepen
The issue is not related with Drupal. You had placed a div element inside an anchor. Replace that div with span and you can see your code start working perfect.
For Info please see Fiddle
<!--First page-->
Note
<!--page2.html-->
<a name="note">
<article>
<div>
.
.
.
</div>
</article>
</a>
i have tried putting "note" as id of article tag as well as of main div tag under article tag. Also i have tried wrapping main div tag in anchor tags. Still it displays the whole page2.html on click. Can anyone help?
The name attribute is not supported in HTML5. To Link to an element with a specified id within a page
Try using this:
<!--page2.html-->
<a href="#note">
It will show the whole page, but its going to your specific location in that page.
Take a look at this page:
http://www.w3schools.com/tags/att_a_href.asp
Imagine this block of HTML:
<a href="/somewhere/">
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
</a>
This gets rendered in my browsers like this:
<div class="nested">
<div class="sub-nested">
<div class="sub-sub-nested">
button
</div>
</div>
</div>
This happens only if there is another a tag inside the outer a tag.
I totally don't understand why this is happening. How this could even be. And it's driving me insane.
The problem looks so basic, that i wonder what it was about the HTML standard that i have misunderstood? After all, shouldn't as of HTML5 any tags be allowed within a tags?
What am i missing here?
You can't next anchor tags. As the W3 says:
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.
If you try to validate your code, you will get
Document type does not allow element "div" here; (...)
One possible cause for this message is that you have attempted to put
a block-level element (such as "<p>" or "<table>") inside an inline
element (such as "<a>", "<span>", or "<font>").
So you can't put a <div> inside an <a>.
To expand a bit on why you can't nest A tags, the browser would not know where to direct the user, since the multiple A tags would have multiple HREF attributes. This is why it is illegal to nest A tags.
i'm having an issue in chrome (and firefox, too, i think)
i have a bit of html that looks like this:
<a id="outside">
<span id="middle>
:contents
</span>
</a>
if :contents evaluates to a string or a tag other than an anchor, it renders as intended;
<a id="outside">
<span id="middle">
inside
</span>
</a>
or
<a id="outside">
<span id="middle">
<div id="inside"></div>
</span>
</a>
however, if it evaluates to an anchor, it renders as follows:
<a id="outside">
<span id="middle>
</span>
</a>
<a id="inside"></a>
the anchor is jumping outside the span. why? what can i do to fix this?
To fix it, you have to make sure that you never embed an anchor tag insider another anchor tag - results are unpredictable as it is not standards compliant.
If you have control over the generated code, make sure you tidy up that HTML by substituting that top level anchor with something that can contain both a div and a a tag - perhaps another div element?
References:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element
http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element
This is likely happening because your browser is trying to 'fix' your illegal HTML. According to the W3 documentation:
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.
Here is the link to the documentation: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2
My Code below is generated from a StaticItemTemplate in an ASP:Menu.
The code and the link does as it pleases, however it fails validation.
Output code is as follows
<li>
<a class="level1 StaticMenuItemStyle" href="/Services.aspx">
<div class="StaticMenuItemStyle"
onmouseover="style.backgroundColor='#0088CB';style.color=white;"
onmouseout="style.backgroundColor='';"
style="color:Color [Blue];width:180px;">
Services
<br />
<div style="background-color: Blue; width: 180px;height: 5px;"></div>
</div>
</a>
</li>
however this errors on W3Validator
Line 84, Column 63: document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag
style="color:Color [Blue];width:180px;">
The mentioned element is not allowed to appear in the context in which you've placed
it; the other mentioned elements are the only ones that are both allowed there and
can contain the element mentioned. This might mean that you need a containing
element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level
element (such as "<p>" or "<table>") inside an inline element (such as "<a>",
"<span>", or "<font>").
However if i replace the DIV with a span it validates. but doesnt look right. Anyone got any ideas how to get round this ?
Inside a "a" tag, div is not validate, because div is a basically block section and default style is section block. http://webdesign.about.com/od/htmltags/a/aa011000a.htm. But for anchor tag, it is same like as span. You can use onclick attribute on the div attribute or use .click function by jquery.
You can use it like below:
<li>
<a class="level1 StaticMenuItemStyle" href="/Services.aspx">
<span class="StaticMenuItemStyle" style="display:block;"
onmouseover="style.backgroundColor='#0088CB';style.color=white;"
onmouseout="style.backgroundColor='';"
style="color:Color [Blue];width:180px;">
Services
<br />
<div style="background-color: Blue; width: 180px;height: 5px;"></div>
</span>
</a> </li>
Mention the jquery is initialize before the script