I have a cshtml page that has a list of images in DIV tags. It looks like this:
<div id="ActionButtonContainer" class="containerRight">
<div id="ActionButtonSidebar" class="sidebarRight">
<ul style="list-style-type:none">
<li title="Show More"><div class="icon lefticon" onclick="openNav()" /></li>
<li title="Edit"><div class="icon editicon" /></li>
<li title="Save"><div class="icon saveicon" /></li>
<li title="Cancel"><div class="icon cancelicon" /></li>
</ul>
</div>
</div>
When I run the above code, nothing shows up on the page. If change 1 of the elements to an image tag, all of a sudden all 4 items show up:
<div id="ActionButtonContainer" class="containerRight">
<div id="ActionButtonSidebar" class="sidebarRight">
<ul style="list-style-type:none">
<li title="Show More"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="icon lefticon" onclick="openNav()" /></li>
<li title="Edit"><div class="icon editicon" /></li>
<li title="Save"><div class="icon saveicon" /></li>
<li title="Cancel"><div class="icon cancelicon" /></li>
</ul>
</div>
</div>
The reason the src is that string, is that represents a blank 1kb image. If that's not there, Chrome will automatically put a border around the image for some stupid reason. I have tried src='', src='#', src='//:0', src='javascript:void(0)', they all end up showing a broken image on top of the image defined in the CSS class.
The reason I want the image source defined in the CSS file that when I change the src of the image tag to the actual image file, it refuses to size properly. I fought with it for an hour and I don't hate myself enough to continue down that road.
Any idea why none of the elements show when it's all DIV tags? Or how to remove the border around the image when no source is defined in Chrome in a more elegant less 'hacky' way?
Here's the CSS for reference:
.containerRight {
clear: both;
width: 80px;
margin: 0 auto;
float: right;
position: relative;
left: 90%;
}
.containerRight li {
padding-bottom:5px;
}
.containerRight button {
width: 100%;
}
.sidebarRight {
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 100px;
left: 93%;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar2 */
float: right;
vertical-align: middle;
text-align: center;
}
.icon {
background-size: contain;
background-repeat: no-repeat;
height: 25px;
width: 100%;
cursor:pointer;
}
.editicon {
background-image: url("../../../Images/edit.png");
}
Remove border around the image: Should work with outline: none. Therefore it should be put to your .icon css class as far as I understood your issue.
.icon {
outline: none;
border: none;
background-size: contain;
background-repeat: no-repeat;
height: 25px;
width: 100%;
cursor:pointer;
}
However, you should generally try to provide a valid link with a img source that will be found and always include an alt-attribute on your image tag, so there will be an alternative text when the image couldn't be found.
I tried to reproduce your issue here. I can't see your local images of course, therefore it is all blank and I typed in ABC, so I don't really can reproduce your issue: https://codepen.io/alexiovay/pen/qBELZzy
Really confused by this one. I have a grid of items with a link to wrap the image, an image overlay div, and a title. When the link is visited, the nested image overlay should change its background color opacity. But it's not being applied. I can verify that the :visited pseudoclass is taking effect, because it will apply color change to the nested title. But the opacity won't change. I've tried numerous methods of applying it. Here's a pen:
https://codepen.io/heaversm/pen/gOYNJQv
HTML
<div class="gallery__container">
<div class="gallery__item">
<a class="gallery__link" href="http://codepen.io">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
<div class="gallery__item">
<a class="gallery__link" href="http://nonsensesite.com">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
</div>
CSS
.gallery__container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1.375vw;
margin: 0 auto;
padding: 40px 50px;
}
.gallery__image_container {
position: relative;
}
.gallery__item {
width: 100%;
height: auto;
}
.gallery__link {
display: block;
width: 100%;
height: 100%;
&:visited {
color: red; //just to verify visited pseudoclass is applied
.gallery__overlay {
background-color: rgba(0,0,0,.1) !important; //NOT WORKING
}
}
}
.gallery__image {
//width: 100%;
//height: auto;
}
.gallery__overlay {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(black, 0.9);
z-index: 1;
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
Allowable CSS properties are
color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
Allowable SVG attributes are fill and stroke.
The alpha component of the allowed styles will be ignored. The alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely.
Although these styles can be change the appearance of colors to the end user, the window.getComputedStyle method will lie and always return the value of the non-:visited color.
And from my own observation, child elements of a link are also subject to the same styling restrictions.
I am trying to show an image inside the customized circular li. I just want to show a success tick image in that li. I have a CSS as -
span.round-tabs {
width: 50px;
height: 50px;
line-height: 50px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
li.success span.round-tabs.one {
background-image: url('img/if_Tick_Mark_Dark_1398912.png');
}
<li class="success">
<a href="#" aria-controls="home" id="DivPatientDetails" name="PatientDetails" >
<span class="round-tabs one">
<i class="icon icon-profile-male"></i>01
<h4>Patient's Details</h4>
</span>
</a>
</li>
But I am getting the result as:
instead of:
What am I missing here?
Either use
background-position: center center;
or use
background-position-y or background-position-x to position the image correctly.
Then you may want to make sure the size is correct using the background-size rule in CSS. If you post a jsfiddle, I'll be happy to implement this solution into that for you to see.
I'm trying to make a menu and i'm stuck.
I want to know if someone have some idea without make too much black magic (js and stuff).
Here is my CSS:
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
background: red;
}
.ul-one {
background: green;
position: static;
display: inline-block;
}
.ul-two {
background: gray;
position: absolute;
left: 50px;
top: 0;
}
and HTML:
<div class="wrap">
<ul class="ul-one">
<li>um</li>
<li>dois</li>
<li>tres</li>
<li>quatro</li>
<li>
<ul class="ul-two">
<li>__um</li>
<li>__dois</li>
<li>__tres</li>
<li>__quatro</li>
<li>__cinco</li>
<li>__seis</li>
<li>__sete</li>
<li>__oito</li>
<li>__nove</li>
<li>__dez</li>
<li>__once</li>
</ul>
</li>
</ul>
</div>
Here's the jfiddle:
http://jsfiddle.net/4m5g09Lb/
I want the parent (red div) grow with the children ul.
I'm reading on the web a lot and found some solution, but none of them work when use with position absolute.
This structure will be inside more divs, but i think if work for some levels, it will work with a lot of levels.
Thanks in advance.
you can use
ul:nth-child(even){
}
for all even children
ul:nth-child(odd){
}
for all odd children.
It's a screenshot from a page currently I'm building. I'm trying to make sure the green button is always on the bottom of the container. Here is a piece of the code:
HTML
<div class="list-product-pat">
<article>
<!-- title, image, spec ... -->
<div class="pricing-pat">
<!-- the button goes here -->
</div>
</article>
</div>
CSS
.list-product-pat article {
position: relative;
min-height: 260px;
}
.list-product-pat .pricing-pat {
position: absolute;
bottom: 0;
width: 100%;
}
So far there is no problem... until the product spec gets too long and it breaks into the green button.
I want to maintain the green button in the most bottom position, but in the same time I also want the height to extend if the product title/product spec gets too long.
In the ideal world, it should be something like this:
So my idea is to maintain the absolute positioning while still keeping it inside the document flow (so the product spec knows the green button is there and doesn't break through it).
I need it only to extend if the spec height gets too long. In other words, if the spec is in normal height, it wouldn't extent. I'd like to avoid a weird gap between the spec and the green button.
Is there any idea how to do it?
Here is a fiddle to see how I did it: http://jsfiddle.net/xaliber/xrb5U/
Adding position:absolute takes it out of the document flow, there's no way to keep it in it.
But you can add padding-bottom equivalent to height of the button to the article container instead, which will prevent long text overrunning the button.
.list-product-pat article {
position: relative;
min-height: 260px;
padding-bottom:80px;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
http://jsfiddle.net/xrb5U/3/
A separate issue is that two containers with different amount of texts will be different sizes (if one is larger than the min-height set). There's no easy fix for this in CSS positioning, you have to resort to Javascript, Flexbox or display:table-cell to keep the height of all them the same but each of them has their own issues too.
As #mikel already pointed out, you can't keep an element with position: absolute inside the normal document flow, but you can workaround this problem by simulating it.
Considering the example below:
img {
position: absolute;
}
<img src="https://dummyimage.com/300x400/d9ca29/ffffff">
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
The <img> element is out of flow, this cause the <span> to be hidden behind it.
You can wrap the absolute element inside an empty container, then add height and width to container equal to height and width of the absolute element. By doing so, an invisible box is created around the absolute element, which makes it appear as part of the document normal flow.
If you already know the exact dimensions of the <img> element, you can simulate normal flow using just css:
div {
border: 2px dotted grey;
position: relative;
width: 300px;
height: 400px;
}
img {
position: absolute;
}
<div>
<img src="https://dummyimage.com/300x400/d9ca29/ffffff">
</div>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
Else, if you don't know the dimensions of the absolute element upfront you have to simulate the normal flow dynamically with javascript:
window.addEventListener('load', function() {
var div = document.querySelector('div');
var img = document.querySelector('img');
var rect = img.getBoundingClientRect();
div.style.height = rect.height + 'px';
div.style.width = rect.width + 'px';
});
div {
border: 2px dotted grey;
position: relative;
max-width: 200px;
}
img {
position: absolute;
width: 100%;
}
<div>
<img src="https://dummyimage.com/300x400/d9ca29/ffffff">
</div>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
At some point in the (hopefully near) future, you'll be able to use the subgrid feature of CSS Grids. Currently, only Firefox supports this, but other browsers should add support soon.
Subgrid enables you to use Grid features with a non-flat structure (eg, an unordered list). That is, you can line up children of one element with children of another element, or in this case, the image, title, description, and price button.
.list-product-pat {
/* Create a grid with 5 columns that are 175px wide,
each with 5 rows that are sized based on the smallest item in the row */
display: inline-grid;
grid-template-columns: repeat(5, 175px);
grid-template-rows: repeat(5, min-content);
/* Colors and spacing to match design */
background: #f4f4f4;
padding: 1em;
grid-column-gap: 1em;
border: 1px solid #ddd;
}
.list-product-pat li {
/* Ensure this item takes up the column */
grid-row: 1 / -1;
/* Make children grid items */
display: grid;
/* Use parent's grid for children */
grid-template-rows: subgrid;
/* Styles to match design */
text-align: center;
justify-items: center;
border: 1px solid #ddd;
background: #fff;
}
/* STYLES TO MATCH DESIGN BELOW */
.list-product-pat > li > img {
margin-top: 1em;
}
.list-product-pat > li > h1 {
margin: .8em 0;
font-size: 1em;
}
.list-product-pat > li > p {
margin: 0;
color: #bbb;
font-size: .8em;
margin: 0 .5em 1em;
}
.list-product-pat > li > a {
text-decoration: none;
color: white;
font-weight: bold;
background: linear-gradient(#60bb76, #48b161);
border-radius: .5em;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
padding: .5em;
min-width: calc(100% - 1em);
margin-bottom: .5em;
box-sizing: border-box;
}
.list-product-pat > li > a > small {
display: block;
font-weight: normal;
font-size: .7em;
margin-top: .2em;
}
<ul class="list-product-pat">
<li>
<img src="https://placehold.it/40x70/">
<h1>HTC Desire C</h1>
<p>GSM, GPS, WiFi, kamera 5MP, bluetooth, Android, touchscreen, 600MHz</p>
1.699.000 <small>6 Produk/4 Website</small>
</li>
<li>
<img src="https://placehold.it/40x70/">
<h1>Samsung 19300 Galaxy S III</h1>
<p>GSM, GPS, WiFi, kamera 8MP, bluetooth, Android, touchscreen, 1.4GHz</p>
5.300.000 <small>8 Produk/5 Website</small>
</li>
<li>
<img src="https://placehold.it/40x70/">
<h1>Samsung Galaxy Grand i9082</h1>
<p>GSM, GPS, WiFi, touchscreen, 1.2GHz</p>
3.499.000 <small>10 Produk/8 Website</small>
</li>
<li>
<img src="https://placehold.it/40x70/">
<h1>Apple iPhone 5 16GB</h1>
<p>GSM, GPS, WiFi, kamera 8MP, bluetooth, iOS 6, touchscreen, 1.2GHz</p>
7.599.000 <small>6 Produk/5 Website</small>
</li>
<li>
<img src="https://placehold.it/40x70/">
<h1>BlackBerry Curve 9360 (Apollo)</h1>
<p>GSM, GPS, WiFi, kamera 5MP, bluetooth, 800MHz</p>
225.000 <small>9 Produk/4 Website</small>
</li>
</ul>
The solution is actually quite simple. Duplicate the absolutely positioned footer with visibility hidden.
<div style="background: silver; position: relative; height: 100px">
Height is 100px
<div style="position: absolute; bottom: 0; left: 0">Footer</div>
<div style="visibility: hidden">Footer</div>
</div>
<br />
<div style="background: silver; position: relative">
No height specified
<div style="position: absolute; bottom: 0; left: 0">Footer</div>
<div style="visibility: hidden">Footer</div>
</div>