I am trying to use my <div> element as <p> a element.
The HTML doesn't allow this and when I try to use <p> inside <p> or <h1> inside <p> I got
my <p> wrapper closed. (something like this <p></p><h1>blah</h1>)
I need that my <div> get the same behavior of my <p> tag.
Can I do this using css style?
[UPDATE]
Just to explain, I need to do this because I am using tinymce and abcpdf.. the rendered pdf over the html has problems when text is rendered inside div.
I think that default values of the parent (in this case, the <div>), get over not assigneds properties.
[/UPDATE]
Thanks in advance.
try to use
<span>
instead
<div>
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
References:
http://www.w3schools.com/tags/tag_span.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_span
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?
Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1.
Is there a way to display an object/text that only exists as an attribute?
For example, this is my HTML:
<body var="text I want to insert">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
The title page has a number of <p> children. In addition to them, I want to display the content of body/var on the title page.
You can probably consider CSS variables. The custom property will get inherited by all the elements inside the body and you can use pseudo element to display it where you want:
.titlepage:before {
content:var(--var);
}
<body style="--var:'text I want to insert'">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
</div>
</body>
AH Formatter has an -ah-attr-from() extension function that will let you get the contents of an ancestor's attribute (see https://www.antennahouse.com/product/ahf66/ahf-ext.html#attr-from).
You could use -ah-attr-from() in a rule for .titlepagetext::before.
When you using css, you can't target parent. There is no way to get parent selector. And content: "" can apply only for pseudo-classes.
Hey I am trying to place the 'title' attribute of a <section> tag inside a <h3> tag located just below and inside the <section> tag.The following works
<section title="General Information">
<h3>General Information</h3>
....
</section>
what I would like to do is not repeat 'General Information' inside the <h3> tag but use CSS content along with attr() to get the info inside of the tittle attribute in the <section> tag and place it inside the <h3> tags.
<section title="General Information">
<h3></h3>
....
</section>
section h3:after
{
content:attr(title);
}
This as expected looks for the 'title' attribute inside of the <h3> tag instead of the <section> tag. Is there any way I can achieve what I am trying to accomplish? Is what I am trying to accomplish the right way of doing things? I know I could skip the <h3> tags altogether and format the <section> tag to display whatever text is in 'title' attribute the same way that the <h3> tag would.
The attr() function can only obtain an attribute from the element that's generating the content. You won't be able to get the section element's title because it's not the element that's generating the content.
As ScottS mentions, you should really avoid having an empty heading element, as there wouldn't be a point in having it there at all then. Your best bet is to either leave out the title attribute (is it really needed?), or leave the content duplicated.
Is there any HTML tag that will wrap my text without changing its style at all? I've tried <pre> but that makes it look weird. I need this because I'm trying to include Literal content within a System.Web.UI.ControlCollection.
<span> is what you are looking for.
What tag should be used for short text like.
Back to top
Read more
is <p> appropirate or something else should be use. because these are not paragraph.
Which is more semantic
<p>Back to top</p>
or
Back to top
or
<div>Back to top</div>
In general you should use the anchor <a> tag.
Nesting an <a> inside a <p> is perfectly valid, but in general the <p> should be reserved for paragraphs of text. Since yours is just a link, the <a> tag alone will probably be the most recommended.
If you want your link to appear as a block element, simply style it with display: block;. The fact that the <a> tag is normally displayed inline is only because it is its default style.
Anchor tag
Back to top
Read more
You can embed an anchor tag inside a block element. So something like this
<p>Back to top</p>
Inline elements must be enclosed inside block level elements, so this is the basic approach:
<p>Back to top</p>
Usually though the <a> element is already inside a <div> tag so the <p> isn't absolutely necessary but it is more semantically correct – it's still a paragraph of text even if there's only a few words in it.
There's no obvious semantic tag for such.
Perhaps you don't really need a tag there at all! Please check for this case.
If your "short texts" are links, then you obviously need <a href=. If you need a CSS style for the text, you can put it into the a tag too.
* If you need a tag for structuring only or to hang CSS styles from, then use <span>.