normally for a html link:
<p>this is link</p>
<h1>this is link</h1>
<span>this is link</span>
Can a href link wrap outside of other element like so?
<p>this is link</p>
<h1>this is link</h1>
<span>this is link</span>
and also outside a div?
<a href="#">
<div>this is div
<p>here is the paragraph</p>
<div>and nested div</div>
</div>
</a>
Yes. There isn't any "prohibited" elements for <a> in the spec (except for the standard <html>, <body>, <head>, <title>, <meta>...). <a> links, and everyone deserves to be linked.
Keep in mind tho that <a> is inline, so you will have to set display: block to use it like <div>
Yes, you could do this. It looks a little odd, but it will work. Take note that in your second example the text will all map to the same link "#".
Related
I feel really silly having to ask this, but I haven't been able to find much info and I am having a strange issue. Basically, I have the following html:
<div class='one'>
<div class='two'>
<img src="someImage" class="img-responsive teamPhoto"/>
<p>Some text</p>
<p>Some text
</div>
</div>
Simple enough. The issue that I am having is that when I look at the height of div one and two, the height is only equal to the nested image in div two.
It does not include the 'P' elements at all, and when I inspect in the browser I can see that both div's only extend as far as the bottom of the image.
What am I missing here that my paragraph elements are being excluded from the div height?
I don't see your css but I am pretty sure that there's something wrong with styles of 'one' and 'two' div. If you inspect the two div element in Chrome dev tool, try to disable all styles for the two div element and it should work.
<div class='one'>
<div class="two" style="position: absolute;background-color: #ccc;">
<div>
<img src="https://fyf.tac-cdn.net/images/products/large/TEV12-4.jpg" class="img-responsive teamPhoto">
<p>Some text</p>
<p>Some text</p>
</div>
</div>
</div>
I'd put the image and p tag inside another div to solve your issue. The div one still has height = 0 though
I have the following code:
<div class="trigger">
<p>Original Text</p>
</div>
<div class="content">
<p>lorem...</p>
</div>
<script>
//when p tag inside trigger is clicked content is shown or hidden
</script>
I would like to have an extra attribute to get from the p tag to be toggled between the original text.
For example:
<p title="Othe text to be toggled">Original text</p>
So every time the p tag is clicked it's content change between the original text and the other text.
In this case I don't that title will accomplish its goal, I don't know which html attribute would be the best for this case. Thanks for your time
Thanks to #msanford. data-* was the perfect solution for me!
<div class="trigger">
<p data-other="Other text">Original Text</p>
</div>
<div class="content">
<p>lorem...</p>
</div>
<script>
//when p tag inside trigger is clicked content is shown or hidden
</script>
Is there a way to solve this problem using CSS or do I have to fix it on per-article basis by adding newlines? I have article structure:
<div>
<img style="float: left" src="image_src.jpg">
<h3>Heading #1</h3>
<p>Paragraph 1....</p>
<h3>Heading #2</h3>
<p>Paragraph 2....</p>
</div>
Now, the problem is that very often heading "catches" the image and has to be indented while it's paragraph appears below it. Here is an example:
Is there a way I can force heading to go below the image, following it's paragraph or do I have to add newlines manually whenever I have such a problem?
Sure, you can use the CSS nth-of-type selector to clear the float on all but the first h3 element.
h3:nth-of-type(n+2){
clear:left;
}
jsFiddle example
See the code below, I need to chnage the font-size of H2 tag within the second 'content-block', I can not modify the Div Tag or the h2 tag themselves directly, I can only modify the content below the h2 tags.
<div class="content-block">
<h2>Title here</h2>
<p>this is some text.</p>
</div>
<div class="content-block">
<h2>Modify This title only</h2>
<p>this is some more text.</p>
<style>## I can add CSS here ##</style>
</div>
Edit: I can not be sure how many 'content-block' divs will be above the one I want to modify, it chnages from page to page. (A shopping cart)
How is the possible?
Thanks.
.content-block + .content-block h2 {/* your css */}
Demo: http://dabblet.com/gist/4013393
+ is what we call Adjacent Sibling Selector.
Use CSS3 :nth-child() Selector hope it may solve your problem
check the Example Here: http://www.w3schools.com/cssref/sel_nth-child.asp
Is it alright to place div tags inside anchor tags?
Will contents of the div redirect the page to the href of the anchor tag?
Is it alright to place div tags inside anchor tags?
Yes, if:
You are using HTML5/XHTML5; and
The anchor tag is not in an inline context. i.e. a descendant of an element that only allows phrasing content.
Otherwise no.
In HTML5/XHTML5 the <a> element in not simply an inline element as it is in HTML4/XHTML1. Instead it has a transparent content model, which means that the validation rules for its content are the same as if it wasn't there.
So for example
<div>
<div>Hello World</div>
</div>
is valid, so
<div>
<a href="#">
<div>Hello World</div>
</a>
</div>
is too.
But
<p>
<div>Hello World</div>
</p>
is not valid, so
<p>
<a href="#">
<div>Hello World</div>
</a>
</p>
isn't either.
No that is certainly invalid HTML.
-Will contents of the div redirect the page to the href of the anchor tag?
I'm not so sure on what you mean on this one.
But its not the contents of a div that an anchor follows but the anchor's href attribute.
If what you're trying to achieve is a block-level link, you can simply use CSS:
a.block {
display: block;
/* everything else */
}
<a class="block">...</a>