I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
Related
https://interactjs.io/docs/action-options/#ignorefrom shows how to use ignoreFrom to disable dragging from certain elements. My movable element look something like:
<article>
<div>
<h1>My Article</h1>
<p>Hello World</p>
</div>
</article>
It could contain any HTML tags within the <div>, not just <h1> and <p>
I want to ignore dragging from any child element except the <div>. I've tried using ignoreFrom: ':not(div)', but that does not work (I'm guessing that the :not pseudo-selector is not supported). The only option I can get to work is to provide a list of all possible HTML tags as the value for the ignoreFrom. So, for this specific example, setting ignoreFrom: 'h1,p' works, but this approach will become unmanageable in the general case. Is there an easier way?
I have implemented inline styles as well as block element styles in ckeditor from configuration. But when I apply wrapper element on multiple elements, it gets applied on each item individually.
e.g
<p class="wrapper">some text here</p>
<ul class="wrapper">list here</ul>
Whereas, I want to have a wrapper element like this:
<div class="wrapper">
element#1
element#2
Elements#3
</div>
Do let me know if it doesn't make sense.
Thanks.
I have some code like this:
<span class="item multifilter-wrapper multifilter">
<span class="item multifilter multifilter-item">
<div></div>
</span>
<span class="item multifilter multifilter-item">
<div></div>
</span>
<span class="item multifilter multifilter-item hasdata">
<div>HELLO</div>
</span>
</span>
Any multifilter-item span could have content, if it has content I add the hasdata class, as in the last item.
I would like to add a separator in between 2 multifilter-item spans in case there is more than one with data, so I have this BEFORE rule:
.multifilter-wrapper .hasdata:not(:first-child)::before{
content: '|';
}
However it is adding the content in the example above with just 1 hasdata span.
Any ideas why?
without having to modify your markup, you can use the general sibling selector: ~ (http://www.w3.org/TR/css3-selectors/)
http://jsfiddle.net/ossx1v1k/
.multifilter-wrapper .hasdata ~ .hasdata::before{
content: '|';
}
please note that I've removed the div tags from inside the span tags in my jsfiddle example, because as Paulie_D remarked, it's invalid markup to have block elements inside inline ones.
This is because .has-data is not the the first child, so it matches as expected.
I think you are confused as to what :first-child does. It checks if it is the first child element for it's parent (which it is not as you have 2 other ones before it). It does not check if it's the first child that is also a .hasdata class.
Basically the logic is:
class is hasdata
AND is not the first child element
To which it matches these rules, which is why the content separator is added.
There is no way to identify classes that are the first child with a specific class name in only CSS, you cannot write a rule for "is not the first hasdata class". I suggest you modify the html to have something like notfirsthasdata to identify elements that are not the first ones with content.
There is first-of-type which is the type of logic you want, however I believe this only matches with the element type (in your case span) and not the class name.
Is there a CSS or pure HTML solution to having a div only be visible when it has content? I have this JSP code:
<div class="message-panel panel-alert">
<span class="label-warning">
<span class="warning-sign"></span>
</span>
<c:if test="${condition1}">
<p> Condition 1 is true </p>
</c:if>
<c:if test="${condition2}">
<p> Condition 2i s true </p>
</c:if>
</div>
If either of the conditions are true, I do want to show the alert panel with my warning sign, but I don't want this div to appear at all if neither of them are true. Two solutions I can think of is to surround this whole thing with an all-inclusive if statement, or to modify the visible attribute of the div programatically in javascript. however, I am wondering if there is a way to say "Hey, div, go away if there's nothing in you".
Use the :empty pseudo-selector:
div.panel-alert:empty {
display: none;
}
You can try creating a class called hidden. And add it to the <div class="message-panel panel-alert"> when both texts are empty (using both ifs) and then in css define .hidden {display:none;} or as you stated use some javascript as described here Using an if statement to check if a div is empty
In HTML, should block level elements always wrap <a> tags? What if it's necessary for the tag to wrap the block level element to ensure the correct styles are applied? For example can this
<h3>Your Header</h3>
be this
<h3>Your Header</h3>
NB: I'm going for the latter approach to ensure the correct styles are applied (I'm working with legacy code that is just not worth re-working for this one element), but while doing this I was interested to know what the community's views are.
And yes I have read this question In HTML which way round should a and h1 be nested? but I'm not sure if a different or more flexible rule applies for <h3> tags.
Taking in the comments below and looking again at the code, I have two possible solutions:
Wrap the <h3> elements with <a> elements (ok in HTML5)
Add .class a to the CSS so that it inherits parent div styles as follows:
HTML
<div class="class">
<h3>Your Header</h3>
</div>
CSS
.class, .class a {
width:296px;
height:46px;
overflow:hidden;
color:#FE5815;
}
In this context, it is absolutely allowed for the a element to contain the h3 element, at least according to HTML5.
An a element is known as a "transparent" element: it may contain whatever its parent element may contain. The only criterion is that it may not contain any other "interactive" content, e.g. other a elements, button elements, iframe elements. In this case, presuming that the first version is allowed, the second version is also allowed under HTML5.
This is the page in the HTML5 spec that specifies this. It takes a little interpretation to understand, unfortunately...
Note that there is one case in HTML5 where
<h3>Your Header</h3>
would be valid, but
<h3>Your Header</h3>
would not, and that's when the parent of the <h3> element is an <hgroup> element.
The <hgroup> element can only have <h?> children, so while the transparent content model of the <a> element allows an <h3> to be its child, the <a> element remains invalid as a child of <hgroup>.
In this case
<hgroup>
<h3>
Your Header
</h3>
</hgroup>
and
<a href="/">
<hgroup>
<h3>Your Header</h3>
</hgroup>
</a>
are the only valid arrangements.
Both are ok
<h3>Your Header</h3>
<h3>Your Header</h3>
But I will use 1st one if I don't care whatever there is in the anchor and I just want it to look like <h3>
And I will use 2nd one if I am concerned about a particular part of anchor needs <h3>. For
example below I need the 2nd one.
check normal text <h3>check large text</h3>
In HTML 4.01 and XHTML, an h3 tag may contain a a tag, but not the other way around.
In HTML5, both ways are valid. If an a tag contains an h3 tag though, the a tag must NOT be nested in an element that cannot contain an h3 element.