Am using mustache to populate data on an AMP HTML page.
Here is the target HTML on Google's ampb.in: https://ampb.in/#z4sIphWxKIOfZtfqWTpm
The buttons open a related structure, but are null here for simplicity.
How to make the second and subsequent <span> elements work inline as part of a <p>.
Have tried .keep-together {display: inline-block; float: left} but that does not work.
If I remove the mustache template the <span> and <button> work as expected.
Since the application depends on using mustache, how to make the inline elements work as they do without mustache?
Mustache is adding enclosing <p role="listitem"> tags to each of your <span class="keep-together"> elements. By adding
p, .keep-together { display: inline; }
all text with buttons will show as one inline element.
Disclaimer: I do not know much about mustache, there might be an option to prevent the additional tags. This is merely a CSS work-around.
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
I have the top bar of my page set up as follows: Home | Contact Us etc..
It lies within a p tag inside a div id.
How would i go about setting up the :hover css on each link without having to separate them into different classes such as how I have them at the moment. Is it possible?
I don't think i used the correct css because i couldn't position them correctly without having to use different padding parameters for each class which makes the spacing look inaccurate.
via codepen: http://codepen.io/Hafkamp/pen/jabmE
html:
<div id="topinfo">
<div class="home"><p>Home |</p></div>
<div class="about"><p>About |</p></div>
<div class="contactUs"><p>Contact Us |</p></div>
<div class="map"><p>Map |</p></div>
</div><!--/topinfo tag-->
css:
.home p{padding-right:250px;}
#topbar .home p:hover{color:rgba(255,255,255,1)}
Is there an easier way to do this that is not so tedious. This method also causes the divider to have the hover effect which is not desirable.
The best way of defining menus in a page is to use "ul" and "li" tags. But if you still want to use with tag you have to use it this way:
`Home
About
contact
.home_link, .about_link, .contact_link{color: red;}
.home_link:hover, .about_link:hover, .contact_link:hover {color: blue;}`
I would give them all the same class, say topitem, and use a rule like this:
.topitem:hover p {
color:rgba(255,255,255,1);
cursor:pointer;
}
Although really, I would get rid of the interior <p> tag and reduce the selector to .topitem:hover – the text is already wrapped in a <div>, so why wrap it again? (But see Zinnia's note about the convention of using <ul> and <li> instead of nested <div>s.)
I need to change read more link to be displayed at the end of the paragraph.
I need it to be like the green paragraph. Today it is like the red paragraph.
Website: http://sindreolsson.tumblr.com - Check last post where I use read more.
CSS:
.tumblr-text .rmlink { display: inline; }
HTML
{block:Text}
<!-- TEXT -->
<div class="tumblr-text">
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="copy">{Body}
{block:More}<div class='rmlink'>Continue reading..</div>{/block:More}</div>
</div><!-- /.tumblr-text -->
{/block:Text}
In my case, I also had to disable the <br> tags in order to make it work, kind of like this:
.copy br {
display: none;
}
If you have a parent container with a fixed width, set the child elements to have display: inline to have them collapse like in-line text
.copy * {
display: inline;
}
Of course, this will break the natural formatting of all previous <p></p> if you have more than one paragraph (which you don't want happening), so to preserve the original formatting, you only need to set the last element (specifically <p> elements) before the Read More break to have display: inline,
i.e. the second-last child element if your Read More <div> is the last child.
But actually by the looks of it, tumblr likes to generate a set of empty <p></p> tags after the final element of the {body} text, so you'll need to account for the offset.
.copy > p:nth-last-of-type(-n+2) {
display: inline;
}
This selects the immediate descedent > paragraph element p that is the last to second-last (-n+2) child of the type :nth-last-of-type.
To clarify, -n+2 in this scenario simply means select the last element, as well as the second-to-last element since you need to set the empty <p></p> that tumblr generates to display: inline as well as your actual last paragraph with content.
And then you can up the aesthetics with ellipsis if you want using additional CSS with the ::after selector and content: set to the unicode escape for ellipsis (u2026).
.copy > p:nth-last-of-type(2)::after {
content: "\2026";
}
EDIT :
Forgot to mention that this code alone will effect all posts that have <p></p>regardless of whether they contain the Read More break, and to only target those specific posts you need to modify the CSS to only apply to posts that have Read More links. One way to differentiate posts is to assign to the post a class name (e.g., readmore) wrapped around {block:More}{/block:More} block tags which only render on posts with Read More links.
CSS
.copy.readmore > p:nth-last-of-type(-n+2) {
display: inline;
}
HTML
<div class="copy{block:More} readmore{/block:More}">
...
</div>
Also, since Read More breaks are not rendered on the permalink page of the post, the CSS won't be applied there, and it will only be applied on index pages (your blog's main page) where the break occurs.
:nth-last-of-type
::after
… - \2026
Since the font tag in HTML is being deprecated in HTML5 (and I understand why) is there a clean solution for applying certain attributes and styles to only portions of a paragraph text? I'm using JavaScript to parse an XML file that relies on the fact that the font tag allows portions of wrapping text to be formatted using class-based CSS. I realize the "anchor" (a) tag could also be used for this purpose, but that way seems very backwards and unnatural.
EDIT
When I asked this question (a couple years ago now) I was failing to understand that every DOM element falls into a display category, the two primary categories being:
block - insists on taking up its own row
inline - falls in line with other inline elements or text
HTML offers two generic container elements, each of which by default adheres to one of these display values; div for block display, and span for inline display.
The span element is the perfect way to designate a certain chunk of text and give it a unique style or ID because you can wrap it around part of a larger paragraph without breaking the selected contents into a new row.
The span tag would be the best way.
Although inline CSS is typically not recommended, here is an example:
<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>
span and div are similar, but the div tag is a block element, so it will cause line-breaks. span is an inline tag that can be used inline with your text.
HTML:
<span class="yourstyle">
Text in your style
</span>
CSS:
.yourstyle {
color: red;
}
you could use a <span> tag
<p>here is your paragraph text and it goes on and on and on..... and now
lets start some <span>formatted text.</span> here is another<span>section
of formatted text</span> here is unformatted text<p>
you can either do inline styles such as <span style="color: #000000; font-family: calibri, arial, helvetica;"> or you can just apply a class to your span, like <span class="textformat1" and <span class="textformat2">. then just apply different css rules based on the class.
.textformat1 {
color: red;
}
.textformat2 {
color: blue;
}
hope this helps
Always use css files to hold your code which will be considered "universal" for each element you set. When you want to set for a specific, lets say <span> element. You would do just as Adam Plocher said above, use the style="" attribute for the <span>element.
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>.