My goal (note the small grey circle under "BEFORE CLEANSING" and "AFTER CLEANSING"):
WIth this code I can only view a RED SQUARE, not the image (but in firebug I can view that image is properly loaded:
HTML:
<p class="before-after">Before Cleansing</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
CSS:
p.before-after:after{content:"";width:11px;height:11px;background:red url('/../images/template/small-circle.png') no-repeat top left fixed;display:block;margin:0 auto;}
My result:
Of course If I change background color to transparet, I see nothing.
Thank you.
Lose the first / from the image url:
p.before-after:after {
content:"";
width:11px;
height:11px;
background: red url('../images/template/small-circle.png') no-repeat top left fixed;
display:block;
margin:0 auto;
}
Edit:
Also remove fixed from the background properties.
#Catalin is right, that might work better if you remove the /.
For your info, do you know you can achieve the same effect with css only? You can make a circle with css in your p.before-after::after class with the following code:
p.before-after::after {
border-radius: 50%;
background-color: grey;
width: 11px;
height: 11px;
}
I think there is problem with your shorthand notation of background property. Try this instead:
background: red url('../images/template/small-circle.png') 0 0 no-repeat;
background-attachment: fixed;
Related
This question already has an answer here:
Media query in responsive email template
(1 answer)
Closed 3 years ago.
I'm setting up an email which contains in the body a picture and some text. On normal computer screens the image is to the left and the the associated text to the right (using inline-block).
This looks like so:
(https://www.flickr.com/photos/183424995#N08/48518551371/in/dateposted-public/)
When the screen size is changed ie. for an i-phone, I'm aiming to get the text to move underneath the image and rather than just having a width of half the screen (as it's inline-block), to take up the whole width of the screen underneath.
What I'm trying to get:
https://www.flickr.com/photos/183424995#N08/48518549646/in/dateposted-public/
What is actually happening:
https://www.flickr.com/photos/183424995#N08/48518724692/in/dateposted-public/
I've created a "main" div containing the image div, and a div containing the text, both inline-block. The "main" div has a width set to 100% and the text div has a min and a max div so it can move from next to the image to under the image depending on screen width.
I've tried rejigging the max width of the text div to be wider, but then the text never remains to the side of the image. And I'm trying to avoid floating anything.
I can't use bootstrap or flexbox as it's an email so am limited to fairly basic CSS.
The JSFiddle is https://jsfiddle.net/cfn76vqz/ to show what kind of responsiveness I have so far. And the general HTML structure is as below.
<div id="main">
<div id="left">
<div >
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div >
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</div>
TLDR: I'm stumped on how to make the text div essentially be 100% of the width if underneath the image but also 50% if there's space to have it to the side of the image. As far as I understand it's always going to be limited to 50% as it's part of an inline-block section.
Because you set width with this why it's not fully of width
max-width: 50%;
So... How we can do
We need to use FLEX display
like this
#main {
/*---HERE---*/
display: flex;
flex-wrap: wrap;
/*----------*/
background: yellow;
width: 100%;
}
#left {
background: orange;
}
#right {
/*---HERE---*/
flex-basis: 0;
flex-grow: 1;
min-width: 50%;
/*----------*/
background: green;
vertical-align: top;
}
<!-- YOUR OLD CODE -->
<div id="main">
<div id="left">
<div>
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</div>
if you want to learn about flex ...more here
you can use viewport units like width: 100vw and height: 100vh for make it responsive depending upon height and width of display.click here
So here is what I am trying to accomplish...
I want to place a perfect square that always covers one or possibly both corners without ever going over in the top right corner of a div... no matter the size or dimensions of the div in question that requires the gradient corner effect.
The reason I want to do that is so I can add gradient effects to corners of sections of a website as so many designers are asking me to do.
The simplest way to do it would be with a transparent PNG file of the gradient obviously... and just set it's height, width, max-height, and max-width to 100% and pin it to the top right of the div in question.
I am too stubborn, though!
This should be possible with pure CSS!
I just can't seem to figure out how.
I have tried nesting multiple responsive square divs and rotating them but to no avail.
I think I am just too tired, and will hopefully be able to answer my own question in the morning!
Thanks for reading.
you can use psedu element :after or :before
You can use position absolute logic in CSS.
Try with this concept.
.container {
width: 25%;
position: relative;
background: #ccc;
border: 1px solid #333;
padding: 10px 15px;
}
.corner-element {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="container">
<div class="corner-element"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
This question already has answers here:
How can I use a data attribute to set a background-image in CSS?
(2 answers)
Closed 7 years ago.
Is there a convenient way to set the background image of a pseudo element via data attributes?
I'm trying to achieve something like this, but i want to be able to set the background image in the markup via my CMS:
.full-width {
background-color: #ededed;
width: 100%;
position: relative;
z-index: -1;
}
.full-width:after {
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
left: 50%;
top: 0;
background-image: url(//unsplash.it/1080/1920);
background-size: cover;
background-position: left center;
z-index: -1;
}
.full-width .container {
z-index: 99;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-width">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Test 123</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
not directly a duplicate of How can I use a data attribute to set a background-image in CSS? because i'm talking about pseudo elements. Thanks for linking me up with this, but I was already aware of these techniques.
As per the compatibility table for the CSS attr function, you can only use the value returned by attr in the content rule (if you want any form of cross-browser support).
So you'd need to use JavaScript if you want to implement something similar to what you're hoping for, as attr can not be used in background.
Right now, it is not possible. In the future, hopefully. Using the attr() function, you can get the attribute value from the element. When using a pseudo-element, it gets the attribute from the original element. So you can do background-image: attr('data-bg' 'url') to get the data-bg attribute and treat it as a URL.
Unfortunately, this is not supported in any browsers yet, and is still an experimental (subject to removal) part of the spec.
.full-width {
background-color: #ededed;
width: 100%;
position: relative;
z-index: -1;
}
.full-width:after {
content: '';
display: block;
position: absolute;
width: 50%;
height: 100%;
left: 50%;
top: 0;
background-image: attr('data-bg' 'url');
background-size: cover;
background-position: left center;
z-index: -1;
}
.full-width .container {
z-index: 99;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-width" data-bg="//unsplash.it/1080/1920">
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Test 123</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
.rounded-box(#border; #radius; #bg-color: transparent; #padding: 5px 10px) {
border:1px solid #border;
.border-top-radius(#radius);
.border-bottom-radius(#radius);
.border-left-radius(#radius);
.border-right-radius(#radius);
background-color: #bg-color;
padding: #padding;
}
I have a mixin creating a rounded corner box, in the screenshot below, you can see that it does not have any spacing between each div, which has .make-column(4) applied to each.
*I do include the bootstrap.less into my main less file and run lessc to compile and this is in the screen shot you see is over 990px wide. Any help is appreciated.
#rounded-box-radius: 10px;
#rounded-box-border: #ccc;
#rounded-box-height:230px;
#box-bg-color: #eee;
.article {
.make-column(4);
}
.promo {
.make-column(4);
.visible-lg;
.rounded-box(#rounded-box-border, #rounded-box-radius);
height: #rounded-box-height;
} // promo end
HTML
<div class="promo">
Promo
</div>
<div class="article">
<h3>Blog Entry 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor.</p>
<div class="date">March 23, 2013</div>
<div class="read-more">Read more</div>
</div>
<div class="promo">
Promo
</div>
I think bootstrap 3 uses padding for column separation instead of margins. Your border wraps around the entire element, including the padding. You may need supply your own margin rules for column separation instead of padding to get bordered boxes with separation between them.
#jtlowe is right in https://stackoverflow.com/a/18127896/1596547 about the padding. But applying margin rules on your columns will break the grid (due to margins adds up with the width).
Use an extra container, just like here: need spacing between divs using twitter bootstrap v3 (duplicate??)
html
<div class="promo">
<div class="rounded-box">Promo</div>
</div>
less
.rounded-box(#border; #radius; #bg-color: transparent; #margin: 5px 10px) {
border:1px solid #border;
.border-top-radius(#radius);
.border-bottom-radius(#radius);
.border-left-radius(#radius);
.border-right-radius(#radius);
background-color: #bg-color;
margin: #margin;
height:#rounded-box-height;
}
NOTE apply the height (#rounded-box-height) here and replace the padding with margin
I have 3 divs inside a wrapper div. Inside my wrapper div, my leftmost div is an arrow image I'm using to navigate between sliders using js. The middle div is the slider, and the right div is the right arrow to move to the next slider.
Here's the code for the slider:
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">
<h3>Heading1</h3>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
There will be multiple slide classes, but for the sake of the question I only added 1.
For some reason though, my right div with my right arrow is being pushed down. Looking at it in Chromes element inspector there is a 50px right margin on my slider div that I'm not defining anywhere (I see the orange color, but there's no CSS markup for it).
I've recreated the problem in jsfildde here: http://jsfiddle.net/maZbF/1/
I want that right arrow to line up with the other two divs. I've wrecked my brain trying to figure this out and debug it in chrome with no avail. Am I missing something simple?
In order for floated content to stay on the same line, all floated content has to be defined before any normal content.
In this case, you have your left button floated to the left first, which works because it was first. Then you have your division which is not floated and is display: block. A block-level element will always push anything after it down to the next line, even if you define a width for it. So when it gets to your right button after that, it is starting on a new line and floating to the right of that new line. It's starting 131px down from the top, since your division before that has a height: 131px defined on it (and the other content inside it is just overflowing past the boundaries, not interfering with your right-floated element).
So, you have a couple options:
Define your right button immediately after the left button.
Float all three elements to the left so they stack on top of each other.
I think the issue you're having is that your right div is position:relative while the left is position:absolute. I think you can simplify this layout using simple floats though:
HTML
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide">
<h3>Heading1</h3>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
CSS
.twocol_double {
width: 500px;
float: left;
font-size: 1.2em;
}
.btn_left {
cursor: pointer;
display: block;
width: 20px;
height: 170px;
float: left;
background: #ccc url("http://i.imgur.com/7bYsZJD.gif") no-repeat center center;
}
#slide_wrapper {
width: 460px;
height: 131px;
display: block;
float:left;
}
.btn_right {
cursor: pointer;
width: 20px;
height: 170px;
float: right;
background: #ccc url("http://i.imgur.com/0QRkQ2M.gif") no-repeat center center;
}
h3 {
font-size: 1.5em;
color: #7DAC20;
}
p, blockquote {
padding-bottom: 20px;
font-size: 1.3em;
color: #636B75;
line-height: 20px;
}
http://jsfiddle.net/Eb3TA/