I am having some troubles with check-box component in HTML. Currently my checkbox looks like this:
Code snippet:
<p class="rte" style="display:grid; grid-template-columns: auto auto; font-size:12px;font-weight:400;margin-bottom:10px;">
<input type="checkbox" checked style="width:auto;" />
<label>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
MY LINK.</label></p>
Now the checkbox is in the middle of the text but I need it to be in top left corner. How do I do that?
Use align-self: start; on the input element:
CSS:
input {
align-self: start;
}
https://jsfiddle.net/br3k1wfu
Like others mentioned your HTML has a few problems. The p and a element closing tags are in wrong spots. You can see them highlighted in red in the JS fiddle. Also using inline styles is a bad practice and will make your code hard to read and maintain. Prefer adding the styles to separate CSS files.
Example:
.rte {
display: grid;
grid-template-columns: auto auto;
font-size: 12px;
font-weight: 400;
margin-bottom: 10px;
}
#my-input {
width: auto;
align-self: start;
}
https://jsfiddle.net/xv3kyLqo/
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 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
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
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>
I am working on a website, and I need to blue the background behind a div, and I am unable to find a way to do it using CSS.
I found an article that showed how to do it, but I was unable to accurately replicate it.
Here is the article: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
Here is my page: http://biolinks.redxte.ch/blur
If anyone can let me know what I'm doing wrong that would be great, thanks.
backdrop-filter: blur(10px);
It will blur area behind the element.
You were so close!
Remove position: relative on .name-container and add it to .head
Update:
Remove .name-bg, (use display: none if neccessary), and change .name z-index to 1 or greater. Then add this code.
.name:after {
content: "";
display: block;
position: absolute;
background-position: center -373px;
left: 0;
right: 0;
top: 0;
bottom: 0;
filter: blur(10px);
border-radius: 8px;
z-index: -1;
}
.head, .name:after {
background-size: 1500px auto; /* Really, this */
background-position: center; /* and this is the only code .head needs */
background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}
Note: As the site used, you have to set an absolute background-size unfortunately. Also, as #media code gets used, you gotta tinker with the code a little.
Hope it helps!
add the blur filter to the #pp css (the img id used within your .name class) and remove it from the name-bg (which is affecting the whole background). That should work better for you. 10px might be a bit much. I previewed it (see image)
Hope this helps
EDIT:
After a closer look at your code (and seeing your comment, which clarified the question), you already have margin set to 0 auto around the name container, and the name-bg class is already being sized by this (it is being altered by the addition of the top/right/bottom/left coordinates) I adjusted the top/right/left/bottom to 2 or -2 (see fiddle), which decreased the size of the background div. I also changed the positioning to relative, so that when resized, that it will still come up in the middle.
https://jsfiddle.net/RachGal/rhav95o1/ :fiddle
I think this is closer to what you are looking for.
Yet another implementation. Note that the downside is that you have to duplicate the text in order to get the same height in both places (can probably do this with JS, or something, to be little cleaner)
html:
<div class="outer">
<div class="inner">
<h1>Blurred box</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
</div>
<div class="inner with-text">
<h1>Blurred box</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
</div>
</div>
scss:
#import "compass/css3";
$normal-img: "https://upload.wikimedia.org/wikipedia/commons/8/84/San_Stefano_Grand_Plaza%2C_Alexandria%2C_Egypt.jpg";
.outer{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:url($normal-img);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
.inner {
background-image:url($normal-img);
background-repeat:no-repeat;
#include background-size(cover);
background-attachment: fixed;
filter:blur(6px);
width:500px;
left:-webkit-calc( 50% - 250px );
top:20%;
position:absolute;
#include box-sizing(border-box);
color: transparent;
&.with-text {
color: white;
opacity: .5;
filter: none;
background: grey;
}
}
pen:
https://codepen.io/anon/pen/BxgyNR?