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>
Related
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
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>
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?