I'm trying to build a CSS selector that specifically distinguishes between elements that have a background image given as data URI:
<div style="background-image: url("data:image/svg+xml;base64,PD94b…9zdmc+");">
And elements that have a background image provided as internet URL:
<div style="background-image: url("https://my.example.com.png");">
To select data URL images only, I built this selector (escaped special characters):
.card-img[style*='background-image\: url\(\"\;data\:image'] {
display: none;
}
But unfortunately, it doesn't work:escaping the first open bracket worked, but I got stuck by escaping the ampersand.
EDIT: Since the HTML is rendered by a CMS and isn't alterable, a correct answer has to deal with the CSS!
span {
background: yellow
}
.card-img {
height: 120px;
width: calc(100% - 4rem);
display: block;
margin: 2rem;
}
.card-img[style*='background-image\: url\(\"\;data\:image'] {
display: none;
}
<div class="card-img" style="background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/3b/Pyramide_von_Athribis.jpg");">
<span>Image with Internet URL</span>
</div>
<div class="card-img" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3msSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0HYnydMtUlIqUfywxb60AxZqEXaoifgMCXptR9MtklHpEY2iUHWnSjvvRr70QujkC+pUC/90glMuEnlOjVMt0j70QriLS1LtEnnRj3qUUXfIidOjsxAhcZFo0bjNDH0xxNLr0dIrUdmntVTkMoyfL8jcLBRuErhJyrgKyb4zA/5zg3tYFBBmUTmQTnhMinruBzvvhnxwxZ/st+Ktt5zp9hqota2vtK6y9FemNBblc9HiMiTtMbFtsM6gcPV2r6dwroseLrMrbQrdLGdyKoobKbo3Zh+ynrgVllZulTsXE3rV0pIqUf42UVUo0JyjEHoS0HmsiHRGR/lmRz/1hjqnxjvpRWfwtOhusaz0LRGf7FEfbDVmqHXlJeW0pbXq5bec3fX0nTnzmuJuWvhoFFhm0FtrziBsjaAaDCYWC+uSi6jQS3FsSfLJiTirCOkuCG1KiG+wSC+GBvgyhTszQ64Z77KAAAARXRSTlMAIQRDLyUgCwsE6ebm5ubg2dLR0byXl4FDQzU1NDEuLSUgC+vr6urq6ubb29vb2tra2tG8vLu7u7uXl5eXgYGBgYGBLiUALabIAAABsElEQVQoz12S9VPjQBxHt8VaOA6HE+AOzv1wd7pJk5I2adpCC7RUcHd3d3fXf5PvLkxheD++z+yb7GSRlwD/+Hj/APQCZWxM5M+goF+RMbHK594v+tPoiN1uHxkt+xzt9+R9wnRTZZQpXQ0T5uP1IQxToyOAZiQu5HEpjeA4SWIoksRxNiGC1tRZJ4LNxgHgnU5nJZBDvuDdl8lzQRBsQ+s9PZt7s7Pz8wsL39/DkIfZ4xlB2Gqsq62ta9oxVlVrNZpihFRpGO9fzQw1ms0NDWZz07iGkJmIFH8xxkc3a/WWlubmFkv9AB2SEpDvKxbjidN2faseaNV3zoHXvv7wMODJdkOHAegweAfFPx4G67KluxzottCU9n8CUqXzcIQdXOytAHqXxomvykhEKN9EFutG22p//0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aEfEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC");">
<span>Image with Data URL</span>
</div>
If you can change the HTML, replace the " with actual quotes, as you can use double combined with single for this sort of stuff:
span {
background-color: yellow
}
.card-img {
height: 120px;
width: calc(100% - 4rem);
display: block;
margin: 2rem;
}
.card-img[style*='background-image\: url\(\'data\:image'] span {
background-color: cyan;
}
<div class="card-img" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Pyramide_von_Athribis.jpg');">
<span>Image with Internet URL</span>
</div>
<div class="card-img" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3msSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0HYnydMtUlIqUfywxb60AxZqEXaoifgMCXptR9MtklHpEY2iUHWnSjvvRr70QujkC+pUC/90glMuEnlOjVMt0j70QriLS1LtEnnRj3qUUXfIidOjsxAhcZFo0bjNDH0xxNLr0dIrUdmntVTkMoyfL8jcLBRuErhJyrgKyb4zA/5zg3tYFBBmUTmQTnhMinruBzvvhnxwxZ/st+Ktt5zp9hqota2vtK6y9FemNBblc9HiMiTtMbFtsM6gcPV2r6dwroseLrMrbQrdLGdyKoobKbo3Zh+ynrgVllZulTsXE3rV0pIqUf42UVUo0JyjEHoS0HmsiHRGR/lmRz/1hjqnxjvpRWfwtOhusaz0LRGf7FEfbDVmqHXlJeW0pbXq5bec3fX0nTnzmuJuWvhoFFhm0FtrziBsjaAaDCYWC+uSi6jQS3FsSfLJiTirCOkuCG1KiG+wSC+GBvgyhTszQ64Z77KAAAARXRSTlMAIQRDLyUgCwsE6ebm5ubg2dLR0byXl4FDQzU1NDEuLSUgC+vr6urq6ubb29vb2tra2tG8vLu7u7uXl5eXgYGBgYGBLiUALabIAAABsElEQVQoz12S9VPjQBxHt8VaOA6HE+AOzv1wd7pJk5I2adpCC7RUcHd3d3fXf5PvLkxheD++z+yb7GSRlwD/+Hj/APQCZWxM5M+goF+RMbHK594v+tPoiN1uHxkt+xzt9+R9wnRTZZQpXQ0T5uP1IQxToyOAZiQu5HEpjeA4SWIoksRxNiGC1tRZJ4LNxgHgnU5nJZBDvuDdl8lzQRBsQ+s9PZt7s7Pz8wsL39/DkIfZ4xlB2Gqsq62ta9oxVlVrNZpihFRpGO9fzQw1ms0NDWZz07iGkJmIFH8xxkc3a/WWlubmFkv9AB2SEpDvKxbjidN2faseaNV3zoHXvv7wMODJdkOHAegweAfFPx4G67KluxzottCU9n8CUqXzcIQdXOytAHqXxomvykhEKN9EFutG22p//0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aEfEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC');">
<span>Image with Data URL</span>
</div>
If HTML cannot be changed, one workaround could be to split your attribute selector into two:
span {
background-color: yellow
}
.card-img {
height: 120px;
width: calc(100% - 4rem);
display: block;
margin: 2rem;
}
.card-img[style*="background-image"][style*="data\:image"] span {
background-color: cyan;
}
<div class="card-img" style="background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/3b/Pyramide_von_Athribis.jpg");">
<span>Image with Internet URL</span>
</div>
<div class="card-img" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAB+FBMVEUAAAA/mUPidDHiLi5Cn0XkNTPmeUrkdUg/m0Q0pEfcpSbwaVdKskg+lUP4zA/iLi3msSHkOjVAmETdJSjtYFE/lkPnRj3sWUs8kkLeqCVIq0fxvhXqUkbVmSjwa1n1yBLepyX1xxP0xRXqUkboST9KukpHpUbuvRrzrhF/ljbwaljuZFM4jELaoSdLtElJrUj1xxP6zwzfqSU4i0HYnydMtUlIqUfywxb60AxZqEXaoifgMCXptR9MtklHpEY2iUHWnSjvvRr70QujkC+pUC/90glMuEnlOjVMt0j70QriLS1LtEnnRj3qUUXfIidOjsxAhcZFo0bjNDH0xxNLr0dIrUdmntVTkMoyfL8jcLBRuErhJyrgKyb4zA/5zg3tYFBBmUTmQTnhMinruBzvvhnxwxZ/st+Ktt5zp9hqota2vtK6y9FemNBblc9HiMiTtMbFtsM6gcPV2r6dwroseLrMrbQrdLGdyKoobKbo3Zh+ynrgVllZulTsXE3rV0pIqUf42UVUo0JyjEHoS0HmsiHRGR/lmRz/1hjqnxjvpRWfwtOhusaz0LRGf7FEfbDVmqHXlJeW0pbXq5bec3fX0nTnzmuJuWvhoFFhm0FtrziBsjaAaDCYWC+uSi6jQS3FsSfLJiTirCOkuCG1KiG+wSC+GBvgyhTszQ64Z77KAAAARXRSTlMAIQRDLyUgCwsE6ebm5ubg2dLR0byXl4FDQzU1NDEuLSUgC+vr6urq6ubb29vb2tra2tG8vLu7u7uXl5eXgYGBgYGBLiUALabIAAABsElEQVQoz12S9VPjQBxHt8VaOA6HE+AOzv1wd7pJk5I2adpCC7RUcHd3d3fXf5PvLkxheD++z+yb7GSRlwD/+Hj/APQCZWxM5M+goF+RMbHK594v+tPoiN1uHxkt+xzt9+R9wnRTZZQpXQ0T5uP1IQxToyOAZiQu5HEpjeA4SWIoksRxNiGC1tRZJ4LNxgHgnU5nJZBDvuDdl8lzQRBsQ+s9PZt7s7Pz8wsL39/DkIfZ4xlB2Gqsq62ta9oxVlVrNZpihFRpGO9fzQw1ms0NDWZz07iGkJmIFH8xxkc3a/WWlubmFkv9AB2SEpDvKxbjidN2faseaNV3zoHXvv7wMODJdkOHAegweAfFPx4G67KluxzottCU9n8CUqXzcIQdXOytAHqXxomvykhEKN9EFutG22p//0rbNvHVxiJywa8yS2KDfV1dfbu31H8jF1RHiTKtWYeHxUvq3bn0pyjCRaiRU6aDO+gb3aEfEeVNsDgm8zzLy9egPa7Qt8TSJdwhjplk06HH43ZNJ3s91KKCHQ5x4sw1fRGYDZ0n1L4FKb9/BP5JLYxToheoFCVxz57PPS8UhhEpLBVeAAAAAElFTkSuQmCC");">
<span>Image with Data URL</span>
</div>
Related
I would like the text to line up nicely with the article-images to the right.
I expect that the .watch-listen-link will have to be altered in order to change align it the right way.
I have tried adding a top-margin property to the class with no results. What should I try next?
.article-side-image{
float: left;
width: 140px;
margin-left: 8px;
margin-right:4px;
margin-top: 8px;
}
.watch-listen-link {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 18px;
}
.watch-listen-link:hover{
color: #1167a8;
}
.side-article {
float: right;
width: 250px;
position: relative;
top: -13px;
}
.no-border{
border-left: none;
padding: 0;
}
.border-right{
border-right: 1px solid #CCCCCC;
}
</style>
body section:
img class="article-side-image" src="images/article3.png">
<div class= "side-article">
<p><a class= "watch-listen-link" href=""> SpaceX rocket explodes during landing </a></p>
<p> <img class="clock" src="images/Clock-image.png"> <span class= "date border-right"> 19 January 2016 </span> <br> <a class="topic-link no-border" href=""> Science & Environment </a> </p>
</div>
What you're trying to build looks a lot like a media object. This pattern is used all over the web.
You probably don't want to use float for this. More recent additions such as CSS grid or Flexbox make creating media objects way, way easier.
I adapted the recipe from the article on media objects I mentioned earlier:
.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows:1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}
<div class="media">
<div class="img">
<img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</div>
<div class="content">
<p>
<a>SpaceX rocket explodes during landing</a>
</p>
<p>
<img class="clock" src="images/Clock-image.png">
<span class= "date border-right"> 19 January 2016 </span> <br>
<a class="topic-link no-border" href=""> Science & Environment </a>
</p>
</div>
Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
I've got this strange issue with my body content container. I want it to be as tall as the view port so I set its height to 100vh in the css. It works in all pages except for the one where I try to make a bootstrap grid inside this body content container.
Here you can see how it looks:
The blue-ish div is my body content.
When I zoom all the way out, they blue div's height is indeed 100vh.
Inside of it I've got this
<div class="container body-content">
<div class="row text-center">
#foreach (var item in Model.Products)
{
#Html.Partial("ProductColumn", item)
}
</div>
</div>
where Html.Partial renders on every iteration something like this:
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 product-column-wrapper">
<div class="product-column">
//product title
<div id="thumbnail-container">
<a class="d-block mb-4 h-100" asp-route="#WebConstants.Routes.ProductDetails" asp-route-id="#Model.Id" asp-route-title="#Model.Name">
<img id="thumbnail" src="#Model.ThumbnailSource" class="img-responsive img-thumbnail" alt="#Model.Name">
</a>
</div>
//price
//Edit, Delete buttons
</div>
</div>
Here is some of my css classes:
body {
padding-top: 50px;
padding-bottom: 20px;
}
footer {
color: white;
font-size: 13px;
text-align: center;
vertical-align: middle;
max-height: 15px;
}
.body-content {
background: aliceblue;
border-radius: 5px;
padding: 10px;
height: 100vh;
}
If anyone could help me find out how to stretch the body content in this scenario, that would be great.
Instead of height: 100vh try using min-height: 100vh. E.g.
.body-content {
background: aliceblue;
border-radius: 5px;
padding: 10px;
min-height: 100vh;
}
I has this code
.cont {
width: 150px;
overflow: hidden;
resize: both;
border: solid;
}
.wrap:after {
content: 'A';
background: #ccc;
display: inline;
}
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao
</span>
<span class="emptyornot">
</span>
</span>
</div>
http://jsfiddle.net/rcsd7L74/
I need that :after always stay with last word in .wrap.
And if container too small - break line before last word.
The CSS you have will do this perfectly well; the problem you're having is that new-lines, in HTML, collapse to a single white-space character; remove those and it works (leading to this, admittedly ugly, HTML):
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span><span class="emptyornot"></span></span>
</div>
To allow for slightly prettier HTML (though, in fairness, HTML should be minimsed when sent to the client anyway), such as:
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span>
<span class="emptyornot"></span>
</span>
</div>
JS Fiddle demo.
The following CSS can be used:
.wrap {
/* sets the wrapping element's font-size to 0, to hide the collapsed white-spaces: */
font-size: 0;
}
.inner {
/* overrides the parent's font-size:
font-size: 16px;
}
.wrap:after {
/* as above, to make the text of the pseudo element visible */
/* no other changes */
font-size: 16px;
}
JS Fiddle demo.
Change width:
.cont { width: 160px }
I have this header bar.
<div id="header">
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
</div>
I need the searchBar to fill whatever the remaining gap is in the div. How would I do this?
Here's my CSS
#header {
background-color: #323C3E;
width:100%;
}
.button {
padding:22px;
}
.orange {
background-color: #FF5A0B;
}
.red {
background-color: #FF0000;
}
.inline {
display:inline;
}
#searchBar {
background-color: #FFF2BC;
}
Use calc!
https://jsbin.com/wehixalome/edit?html,css,output
HTML:
<div class="left">
100 px wide!
</div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
Fills width!
</div>
CSS:
.left {
display: inline-block;
width: 100px;
background: red;
color: white;
}
.right {
display: inline-block;
width: calc(100% - 100px);
background: blue;
color: white;
}
Update: As an alternative to not having a space between the divs you can set font-size: 0 on the outer element.
You can realize this layout using CSS table-cells.
Modify your HTML slightly as follows:
<div id="header">
<div class="container">
<div class="logoBar">
<img src="http://placehold.it/50x40" />
</div>
<div id="searchBar">
<input type="text" />
</div>
<div class="button orange" id="myAccount">My Account</div>
<div class="button red" id="basket">Basket (2)</div>
</div>
</div>
Just remove the wrapper element around the two .button elements.
Apply the following CSS:
#header {
background-color: #323C3E;
width:100%;
}
.container {
display: table;
width: 100%;
}
.logoBar, #searchBar, .button {
display: table-cell;
vertical-align: middle;
width: auto;
}
.logoBar img {
display: block;
}
#searchBar {
background-color: #FFF2BC;
width: 90%;
padding: 0 50px 0 10px;
}
#searchBar input {
width: 100%;
}
.button {
white-space: nowrap;
padding:22px;
}
Apply display: table to .container and give it 100% width.
For .logoBar, #searchBar, .button, apply display: table-cell.
For the #searchBar, set the width to 90%, which force all the other elements to compute a shrink-to-fit width and the search bar will expand to fill in the rest of the space.
Use text-align and vertical-align in the table cells as needed.
See demo at: http://jsfiddle.net/audetwebdesign/zWXQt/
I know its quite late to answer this, but I guess it will help anyone ahead.
Well using CSS3 FlexBox. It can be acheived.
Make you header as display:flex and divide its entire width into 3 parts. In the first part I have placed the logo, the searchbar in second part and buttons container in last part.
apply justify-content: space-between to the header container and flex-grow:1 to the searchbar.
That's it. The sample code is below.
#header {
background-color: #323C3E;
justify-content: space-between;
display: flex;
}
#searchBar, img{
align-self: center;
}
#searchBar{
flex-grow:1;
background-color: orange;
padding: 10px;
}
#searchBar input {
width: 100%;
}
.button {
padding: 22px;
}
.buttonsHolder{
display:flex;
}
<div id="header" class="d-flex justify-content-between">
<img src="img/logo.png" />
<div id="searchBar">
<input type="text" />
</div>
<div class="buttonsHolder">
<div class="button orange inline" id="myAccount">
My Account
</div>
<div class="button red inline" id="basket">
Basket (2)
</div>
</div>
</div>
This can be achieved by wrapping the image and search bar in their own container and floating the image to the left with a specific width.
This takes the image out of the "flow" which means that any items rendered in normal flow will not adjust their positioning to take account of this.
To make the "in flow" searchBar appear correctly positioned to the right of the image you give it a left padding equal to the width of the image plus a gutter.
The effect is to make the image a fixed width while the rest of the container block is fluidly filled up by the search bar.
<div class="container">
<img src="img/logo.png"/>
<div id="searchBar">
<input type="text" />
</div>
</div>
and the css
.container {
width: 100%;
}
.container img {
width: 50px;
float: left;
}
.searchBar {
padding-left: 60px;
}
in css:
width: -webkit-fill-available
I would probably do something along the lines of
<div id='search-logo-bar'><input type='text'/></div>
with css
div#search-logo-bar {
padding-left:10%;
background:#333 url(logo.png) no-repeat left center;
background-size:10%;
}
input[type='text'] {
display:block;
width:100%;
}
DEMO
http://jsfiddle.net/5MHnt/
Include your image in the searchBar div, it will do the task for you
<div id="searchBar">
<img src="img/logo.png" />
<input type="text" />
</div>
I did a quick experiment after looking at a number of potential solutions all over the place. This is what I ended up with:
http://jsbin.com/hapelawake