I have to do a semantic webpage from a pdf. Everything is going fine (not at all), but I have a footnote that doesn't fit in a resposive line-height. I want to put it inside a p tag, which works fine, but I don't know if that is good.
here's the code:
.text {
padding-left: 8.5vw;
padding-right: 8.5vw;
padding-bottom: 10vw;
}
.text-column {
padding-top: 10vw;
column-count: 2;
column-gap: 4vw;
}
.text p {
color: #333;
margin-bottom: 2.7vw;
line-height: 3vw;
text-align: justify;
text-indent: 3vw;
font-size: 2.12vw;
}
.footnote hr {
background-color: #000;
width: 33%;
height: 0.2vw;
margin-top: 4vw;
margin-bottom: 1vw;
border-color: #000;
}
.footnote {
font-size: 1.36vw !important;
text-align: justify !important;
line-height: 1em !important;
}
<article class="text text-column">
...
<small class="footnote">
<hr>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi tempore nostrum laboriosam laborum sed nulla
quae libero distinctio consequuntur. Ut sint molestiae, placeat voluptatibus vitae repudiandae architecto nemo
et in?
</small>
</article>
Yes. In fact, the MDN page for <small> itself showcases a <small> tag nested inside a <p> tag as its example:
<p>This is the first sentence.
<small>This whole sentence is in small letters.</small>
</p>
<p> is a flow content element, and <small> is a phrasing content element. Any phrasing content can go inside of any flow content. In addition to this, <small> is an inline element, so will not break the flow of the content.
However, keep in mind that <small> sets the size one size smaller than the default text size on the page, so you may need to adjust it accordingly. This can be done by nesting <small> within <small>, as <small> is also a valid parent of <small> itself. Note that there is an equivalent <big>, though this is obsoleted in favour of CSS' font-size.
Yes you can, According to Official document also allow it.
https://www.w3.org/MarkUp/html3/footnotes.html
Related
How can i aligning texts in multiple html p tags:
<div>
<p>aaaaaa</p>
<p>bbbbbbbbbbb</p>
<p>cccccccccccc</p>
</div>
Making them have word-wrap property like normal text and break line like below?
aaaaaa bbbbbbb
bbbb ccccccccc
ccc
Text in p tags needs to be dynamic and trigger seperate events onClick. Is there any css tricks like
"display: flex" that can achieve this?
edit:
Sorry for being unclear, I would try to explain again.
I would like to put the 3 p tags into a container that have uninsuffiecnt width to display all in one line.
And the desired beviour would be something like this: desired
<style>
div {
display: flex;
max-width: 200px;
border: 1px solid black;
line-break: anywhere;
}
</style>
<div>
<p onclick="someEvent()">aaaaaaa</p>
<p onclick="someEvent()">bbbbb</p>
<p onclick="someEvent()">ccccccccccccccccccccccccccccccc</p>
</div>
Above Snippet is my failed attempt, hope this helps in explaining my question
You can achieve your desired output by using the following code:
Run this snippet to show the output.
.container {
max-width: 200px;
border: 1px solid black;
background: yellow;
}
p {
word-break: break-all;
white-space: normal;
display: inline;
}
<div class="container">
<p class="word-break" onclick="someEvent()">aaaaaaa</p>
<p class="word-break" onclick="someEvent()">bbbbb</p>
<p class="word-break" onclick="someEvent()">ccccccccccccccccccccccccccccccc</p>
</div>
Aside from that, here is a demo of my JS fiddle. : https://jsfiddle.net/rutikpatel/d1s7t64g/
Screenshot of output :
I would recommend flexbox:
<style>
div {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
}
</style>
<div>
<p onclick="someEvent()">aaaaaa</p>
<p onclick="someEvent()">bbbbbbbbbbb</p>
<p onclick="someEvent()">cccccccccccc</p>
</div>
You can also use text-align to align the text in multiple <p> tags within the <div/>.
<style>
div {
text-align: justify;
white-space: pre-wrap;
}
</style>
<div>
<p onclick="someEvent()">aaaaaa</p>
<p onclick="someEvent()">bbbbbbbbbbb</p>
<p onclick="someEvent()">cccccccccccc</p>
</div>
Use the CSS' property word-break: break-all to achieve the desired result.
.my-block {
max-width: 75px;
padding: 5px;
word-break: break-all;
}
.my-block--design {
border: 1px solid red;
border-radius: 3px;
box-shadow: 0 0 3px 0 red;
}
<p class="my-block my-block--design">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur officiis cupiditate placeat. Numquam, error dicta ea voluptatem cupiditate dolore, aperiam aspernatur at, quaerat est repellat possimus!
</p>
Please Note: Decrease the max-width manually for now, to see every letter-by-letter break. You can also use relative unit(s). For demo purposes, I've used an absolute unit. More here on JSFiddle
I am building a Portfolio website that will have a few sections like home, about me, skills, services, projects, and contact. I built a section of every part, then I have usually a header and some paragraph or a photo. At the center bottom of the every section I would like to have a button that leads to another section/part. So for example in the home section I wish to have a button that will direct me to another page which will be about me.
I have written a HTML code for the section and have a design in CSS, but not sure how to make, the button" work"
I don't want to have a separate HTML file for every section, this is why I am thinking if there is any better way to do it.
.btn {
margin-top: 1rem;
display: inline-block;
padding: 1rem 3rem;
font-size: 1.7rem;
color: #d9296f;
border: 0.2rem solid #d9296f;
border-radius: 5rem;
cursor: pointer;
background: none;
}
.btn:hover {
background: #d9296f;
color: #08122f;
}
<section class="home" id="home">
<div class="content"><span data aos="fade-up" data-aos-delay="150">Hi, I'm Emilia</span>
<h3 data-aos="fade-up" data-aos-delay="300">Your Web Developer</h3>
<p data-aos="fade-up" data-aos-delay="450">Lorem ipsum dolor, sit ametconsectetur adipisicing elit. Consequatur doloremque eius sit ratione eveniet laborum inventore recusandae consequuntur ipsum, nostrum aspernatur, ab, libero quos natus iusto et quasi sed est!</p>
about me
</div>
</section>
As you already use, you can use the anchor. You just have to use #id as hyper reference such as: Button Name. This will move your site to the elemnt with that id. The default behavior is an instant jump which you can change to scroll by using: scroll-behavior: smooth;
/* only for styling purpose - no actual use */
html {
scroll-behavior: smooth;
}
body {
margin: 0;
}
a {
color: white;
}
section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
}
section:nth-child(1) {
background-color: blue;
}
section:nth-child(2) {
background-color: orange;
}
section:nth-child(3) {
background-color: red;
}
section:nth-child(4) {
background-color: green;
}
<section id="section-1">
<h1>This is Section 1</h1>
Go to Section 2
</section>
<section id="section-2">
<h1>This is Section 2</h1>
Go to Section 3
</section>
<section id="section-3">
<h1>This is Section 3</h1>
Go to Section 4
</section>
<section id="section-4">
<h1>This is Section 4</h1>
Go to Section 1
</section>
Do you have an idea to add a "background-color" property on a multi-line text, with two difficulties:
Background must stop after the last word of each line
No space between each line without background
Example :
Thanks !
I think this is what you are looking for: http://jsfiddle.net/9BTYQ/1/
span {
color: white;
background-color: #343132;
box-shadow: 0.5em 0 0 #343132,-0.5em 0 0 #343132;
}
div {
width: 100px;
}
<div>
<span>Do you have an idea to add a background-color property on a multi-line text, with two difficulties:</span>
</div>
The box-shadow solution as shown by #gabitzish stopped working properly in IE11 and FF34+ (released 09-2014).
You can add box-decoration-break:clone; to make it work in IE11 and FF34+ too:
p {
display: inline;
padding: 0.5em 0em;
background-color: #FFAA3B;
box-shadow: 1em 0 0 #FFAA3B, -1em 0 0 #FFAA3B;
box-decoration-break: clone;
}
Works in Webkit, Firefox, IE9+ with proper prefixes.
Demo : http://jsfiddle.net/cLh0onv3/1/
Note: Already stated this elsewhere.
I've found this solution works nicely with a combination of the box-shadow method and some corresponding padding on a <p> element around the <span> element
p {
display:block;
padding:0 10px;
font-size:2em;
}
span {
color: white;
background:#333;
box-shadow: 0 0 0 10px #222;
padding:0;
line-height:1.5;
}
http://jsfiddle.net/tsoligo/mMg4B/
Just change the display box type to inline:
p {
display: inline;
}
body {
width: 170px;
}
p {
display: inline;
background: black;
color: white;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
And if there is space between each line, then set font-size equal to line-height, or v.v.
Getting it perfect with pure CSS is difficult and only achievable under certain conditions. For example, if you use breaks and set the line-height to big, you'll see gaps in between. And what about the padding around the sides?
Also, you'll need spans and that will just uglify your markup.
Luckily Sam Croft came up with a simple jQuery plugin to counter this. It's quick, light and works under most conditions.
Article: http://samcroft.co.uk/2011/jquery-plugin-for-inline-text-backgrounds/
Demo: http://samcroft.co.uk/demos/inline-backgrounds/
Source: https://github.com/samcroft/css-inline-backgrounds/blob/master/inline-backgrounds.js
This is one of the difference between <span> and <p> tags.
<span style="background:black; color:white;">
Lorem Ipsum is simply dummy text of the<br>
printing and typesetting industry.<br>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
<br> when an unknown printer took a galley of type
<br> and scrambled it to make a type specimen book.</span>
This box-shadow Example works just great:
HTML
<p class="title step-1">
<span class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, qui suscipit error quasi tempore magni sit nostrum aliquam soluta vel. Dolorem, reprehenderit sint molestiae in est perspiciatis quas accusantium commodi. </span>
</p>
CSS
.title {
font: 20px/1.25 Ubuntu, sans-serif;
text-transform: uppercase;
margin-bottom: 1rem;
line-height: 45px;
display: inline-block;
width: 300px;
}
.title .highlight {
display: inline;
background: #ee4035;
color: white;
padding: 0.5rem;
padding-left: 0;
padding-right: 0;
}
.title.step-1 .highlight {
box-shadow: 10px 0 0 #ee4035, -10px 0 0 #ee4035;
}
JSFiddle: http://jsfiddle.net/verber/WmRT3/
P.S. But not in IE8...
I see a lot of posts on adding the "img" tag inside of a "header" tag and from what I see it's bad practice even though it does what intended for me. I would like to know an alternate way to properly format the way I want.
I have an image icon that I am trying to place left of the "h4" tag on the same line. The only way I could figure out on doing this is as follows:
<div class="col-md-4 service-header-bar">
<h4 class="service-heading"><img src="img/icons/wheel-icon.png" class="icon-size" alt="Furnace Servicing">Furnace Servicing</h4>
<p class="text-muted service-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
.page-section .service-header-bar .icon-size {
margin-right: 20px;
max-width: 50px;
}
.page-section h2.section-heading {
font-size: 45px;
margin-top: 0;
margin-bottom: 15px;
font-family: 'Gotham';
font-weight: 700;
}
.page-section p.service-paragraph {
margin-left: 71px;
margin-right: 35px;
}
.service-heading {
margin: 15px 0;
text-transform: none;
}
Here is a screenshot of what my code produces, although I would like the same result without using an img tag inside of a h tag.
https://gyazo.com/f139612f2902d5c0152f2eb33026af2c
Thanks in advance,
Nick
To avoid using an img tag you can use a background image for the heading instead. And then extend the class for different images. Fiddle here.
Markup:
<h1 class="heading-icon">Heading</h1>
<h1 class="heading-icon heading-icon-blue">Heading</h1>
CSS:
.heading-icon {
padding-left: 50px;
background: url("http://placehold.it/25x25") left center no-repeat;
background-size: contain;
}
.heading-icon-blue {
background: url("http://placehold.it/25x25/1382d2") left center no-repeat;
}
Thanks for all the feed back and help, adding "float: left" in:
.page-section .service-header-bar .icon-size {
float: left;
margin-right: 20px;
max-width: 50px;
}
did exactly what I wanted.
Nick
We have a duplication issue while selecting content that contains a screen reader block, such as the following:
https://jsfiddle.net/dowbuabr/1/
<div class="content">
<div class="screen-reader">2 squared</div>
<div class="display" aria-hidden="true">2^2</div>
</div>
.screen-reader {
position: absolute;
clip: rect(1px,1px,1px,1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
By using aria-hidden, we're able to indicate to screen readers that the second content block is for display purposes and should not be read out loud. However, when highlighting the entire block and using a tool like Google Chrome's speak command, both blocks are spoken.
Is there a best practice for specifying that the first piece of content should be selected when the content block is highlighted? Using user-select: none doesn't feel right because it doesn't highlight the block if we want to copy it, and even though it technically solves the problem, it's a UX concern if we're highlighting a hidden block. See the following screenshot, which is "correct" but doesn't look right because there's no visual cue that we've highlighted the right thing.
https://jsfiddle.net/dowbuabr/2/
I think you are looking for pointer-events css property.
The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.
.avoid-clicks {
display: block;
width: 8em;
height: 8em;
background: rgba(51,51,51,0.85);
position: absolute;
top: 1em;
left: 4em;
padding: 0.75em;
pointer-events: none;
color: whitesmoke;
}
body {
font: 14px/1.4 "Trebuchet MS", sans-serif;
padding: 3em;
max-width: 600px;
background: whitesmoke;
}
p {
padding: 0.75em;
background: #ddd;
}
<p>This is some basic flow content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni eos ipsum sunt repellat nisi modi voluptatum ipsa eligendi minima cumque. Accusantium laudantium autem quae earum eaque expedita quia molestiae in.</p>
<div class="avoid-clicks">try selecting text through me</div>