This question already has answers here:
How to align content of a div to the bottom
(29 answers)
Closed 4 years ago.
I would like to create a border with 2 two colors inside. The first color will be in blue and the next in white.
In my code, there is the colors which are inverted... The white before the blue... I don't understand why ?
.border-color-blue{
height: 182px;
width: 260px;
background-color: blue;
}
.border-white{
border: 1px solid #e0e0e0;
background: white;
width: 260px;
}
<div class="border-color-blue">
<div class="border-white">Lorem ipsum dolor sit amet, ei cum option deserunt, sed cu dicta albucius dissentias.</div>
</div>
This is all regular.
The whole container is blue.
Inside there is another container, with a white background.
To illustrate, added the opacity rule to border-white.
The one in forefront is hiding.
You can adjust which one end on top with the z-index rule.
.border-color-blue{
height: 182px;
width: 260px;
background-color: blue;
}
.border-white{
border: 1px solid #e0e0e0;
background: white;
width: 260px;
opacity: 0.7
}
<div class="border-color-blue">
<div class="border-white">Lorem ipsum dolor sit amet, ei cum option deserunt, sed cu dicta albucius dissentias.</div>
</div>
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
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'm dealing with images that may or may not have a caption.
I've created a polaroid effect around each image via the following:
<div style="text-align:center">
<img src="daenerys.png" style="border: 10px solid #FAFAFA;border-bottom: 45px solid #FAFAFA;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
</div>
Results look acceptable:
But this can't support captions the way I want it to. I need to write a caption under the image, within the white border of the polaroid effect.
I changed my code to:
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy"></div>
</div>
This gives me an image that is stretched:
How do I keep my image resolution and aspect ration intact, while ensuring the text dynamically grows the white space under the image as required? I've taken a look at this SO post for help, but to no avail.
The overall goal is to keep the polaroid look (even for images that have no caption), and to use the white space below the image to display text for images that do have captions.
I found a solution with keeping aspect ration:
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E;-moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<div style="display: inline-table;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy" style="display: table-caption;width: 100%;caption-side: bottom;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae necessitatibus architecto quis non error placeat illo enim illum quo corrupti molestias id sint recusandae animi obcaecati, laudantium nostrum fugit eaque.
</div>
</div>
</div>
Here is preview link : https://codepen.io/ziruhel/pen/RjwmQg
For creating how you want to create the polariod, there is a new html tag that can have a caption and and image inside one element.
The Structure is this :
-- Figure
---- img
---- figcaption
I have made a jsfiddle keeping in mind your structure and the code also.
You can style the figure tag with your card stylings and also keep the text for caption if you want.
The jsfiddle link: https://jsfiddle.net/vmt5w1u8/
SCSS code:
figure {
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 10px;
height: 100%;
-webkit-box-shadow: 3px 3px 3px #9e9e9e;
-moz-box-shadow: 3px 3px 3px #9e9e9e;
box-shadow: 3px 3px 3px #9e9e9e;
img {
display: block;
margin: 0 auto;
margin-bottom: 20px;
width: 100%;
height: 100%;
}
figcaption {
text-align: center;
}
}
Figure tag reference link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
The reason you are getting image stretch is because you are not setting a fix/max width for your div, without width specified text will stretch the image as the width gets longer
Try adding:
div{
/*width:300px; use max-width if responsive*/
max-width: 300px; /*maximum width the image will stretch*/
box-sizing: border-box; /*include padding as part of the specified max-width above*/
}
Example:
div {
max-width: 300px;
box-sizing: border-box;
}
<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="https://dummyimage.com/300x250/4168a3/fff" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim.
</div>
</div>
You don't have to set max-width, just set .image width to width: 100% and height: auto
Fiddle: http://jsfiddle.net/MBLZx/2312
Setting max width to your image might help. Image will be resized to fit the aspect ratio without stretching beyond required width. And also the text content will be wrapped accordingly.
CSS:
.img-wrapper {
max-width: 500px;
padding: 10px;
background: #fff;
text-align: center;
position: relative;
box-sizing: border-box;
}
.image {
width: 100%;
}
.text {
word-wrap: break-word;
}
Here is the Fiddle.
Hope this helps :)
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?
The div below shows error messages now I want to add a image that would appear before error message. It will be just small error image which I want to appear on the left side of div so that it appears before error text. I tried to do it with background image now text is overlapping image as image is background for text. Is there any way in which error message instead of overlapping follows image.
<div id='er'><?php echo $er; ?></div>
<style>
#er{font-size: 14px;color:blue; background: url(img_stop.gif);
background-size: 35px 35px;
background-repeat: no-repeat;}
</style>
Something like this JS Fiddle
#er{
font-size: 14px;
color:blue;
min-height:45px; /* so that the image will always be shown even for short error messages */
background: transparent url(http://www.willowsigns.com/images/products/reflective-stop-sign-circular-icon-600mm-dia-Ehwf.png) no-repeat;
background-position: 5px center; /* image positioned 5px of the 0 left and centered top */
background-size: 35px 35px;
border:1px solid red;
padding:5px 5px 5px 45px; /*giving left padding as 45, 35px for the image, and 5px on each side */
}
<div id='er'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores soluta accusamus dolorum ut odit voluptatem, autem sint!
</div>