Context
I'm trying to show an icon icon-delete-2a.png on the border of a div.
I can't seem to bring the icon forward using z-index.
Furthermore I am also looking at 'the best way' to dynamically position the icon using CSS. When innerText would equal "TestTestTest", the width of my userItem is adjusted, but the icon should shift to the right as well. Calculating the length of the userItem with JS to then adjust it's style ain't that practical.
Related issues
Several other people asked about this, but unfortunately, the proposed solutions (setting position: relative; on the parent and setting position: absolute; z-index: 1 on the child) didn't seem to resolve my issue. See:
CSS - Add icon on left of border with relative position
z-index not working with fixed positioning
Position div on the border of another div
Minimal Working Example
.useritem {
position: relative;
height: 15.625px;
padding-left: 6.25px;
padding-right: 6.25px;
display: inline-block;
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
background: #ff0000;
/* Center slide text vertically */
align-items: center;
border: 1px solid #ff0000;
border-radius: 10px;
margin-bottom: 1px;
margin-right: 3px;
overflow: auto;
word-wrap: break-word;
}
.icon_delete {
position: absolute;
bottom: 7.5px;
left: 20px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.useritem:focus {
background: #ffffff;
color: #000000;
border-radius: 10px;
border: 1px solid #000000;
}
[contenteditable] {
outline: 0px solid transparent;
}
<body>
<div class="useritems">
<div class="row">
<div class="useritem" id="Location_Explore_UserItem_00" contenteditable="true" style="border: 2px solid black; background: rgb(255, 255, 255); color: rgb(0, 0, 0);">Test<img class="icon_delete" src="https://i.ibb.co/jTQckJm/icon-delete-2a.png" width="15" height="15">
</div>
</div>
</div>
</body>
This happens because of overflow attribute. Set the overflow value to initial or scroll on .useritem and you will see the icon outside.
.useritem {
position: relative;
height: 15.625px;
padding-left: 6.25px;
padding-right: 6.25px;
display: inline-block;
text-align: center;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: 400;
line-height: 1.5;
color: #ffffff;
background: #ff0000;
/* Center slide text vertically */
align-items: center;
border: 1px solid #ff0000;
border-radius: 10px;
margin-bottom: 1px;
margin-right: 3px;
word-wrap: break-word;
overflow: initial;
}
.icon_delete {
position: absolute;
bottom: 7.5px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.useritem:focus {
background: #ffffff;
color: #000000;
border-radius: 10px;
border: 1px solid #000000;
}
[contenteditable] {
outline: 0px solid transparent;
}
<body>
<div class="useritems">
<div class="row">
<div class="useritem" id="Location_Explore_UserItem_00" contenteditable="true" style="border: 2px solid black; background: rgb(255, 255, 255); color: rgb(0, 0, 0);">Test<img class="icon_delete" src="https://i.ibb.co/jTQckJm/icon-delete-2a.png" width="15" height="15">
</div>
</div>
</div>
</body>
You have used "overflow" css that's why it's not showing. Remove overflow css you can see your icon position.
Related
I have created a series of image links for gallery categories. Each "button" has an image in the background and the gallery title overlaying this. I've set it to change out the background and the the title also changes to the gallery on hover using css, but the issue I'm running into is with the heights. The divs are loading to fit the titles, but then jump larger on mouseover to accommodate the description text. I need it to load large enough for the description text to fit nicely inside.
I want this to be responsive, so the text needs to be able to wrap, and the divs need to expand accordingly (and not jump heights on mouseover ever). So the height cannot be fixed heights or these will be way too tall when the divs are full width. I've got a single test one set up here
body{
font-family: Arial, Helvetica, sans-serif;
}
.item1{
width: auto;
display: table-cell;
}
a{
text-decoration:none;
}
.label1 {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: 100% auto;
transition: background 0.5s ease;
}
.label1.success {
background-color: #FFFFFF;
}
.label1:hover {
width: auto;
height: auto;
padding-left: 20px;
padding-right: 20px;
background: #FFFFFF ;
background-position: center top;
background-size: 100% auto;
-webkit-box-shadow:inset 0px 0px 0px 4px #000000;
-moz-box-shadow:inset 0px 0px 0px 4px #000000;
box-shadow:inset 0px 0px 0px 4px #000000;
}
.item1 a p.new-label1 span{
position: relative;
content: 'NEW'
}
.item1:hover a p.new-label1 span{
display: none;
}
.item1:hover a p.new-label1:after{
content:attr(data-title);
white-space: normal !important;
overflow-wrap: normal;
font-size: 14px;
color: #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix">
</div>
I'm also having an issue with transition effects between, but this issue is far more pressing. That said, if anyone wants to throw me a solution to that, I wouldn't mind at all ;)
I don't know this is exactly you want , but i made demo with my understanding .It might might help
body {
font-family: Arial, Helvetica, sans-serif;
}
.item1 {
width: auto;
display: table-cell;
}
a {
text-decoration: none;
}
.label1 {
position: relative;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
text-decoration: none;
background: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png') no-repeat;
background-position: center top;
background-size: cover;
transition: all .4s;
margin: 0;
}
.label1.success {
background-color: #fff;
}
.item1:hover .label1 {
}
.item1 a p.new-label1 span {
content: 'NEW';
position: absolute;
right: 0;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 1;
visibility: visible;
transition: all .4s;
}
.item1:hover a p.new-label1 span {
opacity: 0;
visibility: hidden;
}
.item1 a p.new-label1:after {
content: attr(data-title);
background-color: transparent;
white-space: normal;
overflow-wrap: normal;
font-size: 14px;
color: #000;
padding: 20px 10px;
opacity: 0;
visibility: hidden;
display: block;
transition: all .4s;
}
.item1:hover a p.new-label1:after {
content: attr(data-title);
background-color: #fff;
opacity: 1;
visibility: visible;
-webkit-box-shadow: inset 0px 0px 0px 4px #000000;
-moz-box-shadow: inset 0px 0px 0px 4px #000000;
box-shadow: inset 0px 0px 0px 4px #000000;
}
<div style="width: 50%; display: table;">
<div class="item1">
<a href="">
<p class="label1 success new-label1" data-title="I Show up on Hover and have lots and lots of things to say and it takes up too much space" ><span class="align">New</span></p>
</a>
</div>
</div>
<div class="cleafix"></div>
After I kept trying I made some tweaks that would allow me to have the div on the same line with h3, but it's not centered. I simply want to have the div on the same line, next to the h3, with vertically centered h3 text (or the div, it doesn't matter as long as text appears .
I guess that position: absolute; is a problem, but if I remove it, the circle around the number won't be a circle anymore (and I need to keep it a circle)
As it is now, the circle will be positioned on the same line, but it vertically aligns top, if the heading text has enough space on the page (one line)
or bottom, if the heading text goes on two lines (due to being too long)
And also add 10px between the circle and the text, horizontally.
I use this html:
<h3> <div class="numberCircle">
<div class="content">24</div> </div>Smallest Personal Computer - Micro Mote </h3>
and this css:
.numberCircle {
border-radius: 50%;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
width: 50px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;
}
.numberCircle:before{
content:"";
display:block;
margin-top:100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
for h3:
h3 {
line-height: 1.17391em;
color: #242d36;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
margin: 27px 0;
display: flex;
align-items: center;
justify-content: center;
vertical-align:middle;
}
You can easily achieve it changing a bit your HTML and moving the flexbox to the wrapper.
.numberCircle {
border-radius: 50%;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
width: 50px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;
}
.numberCircle:before{
content:"";
display:block;
margin-top:100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
h3 {
line-height: 1.17391em;
color: #242d36;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
margin: 27px 0;
vertical-align:middle;
}
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<div class="numberCircle">
<div class="content">24</div>
</div>
<h3>Smallest Personal Computer - Micro Mote </h3>
</div>
You can also make this easy for yourself by rather using a table.
Check this out:
CSS:
.MyTable {
width: 300px;
}
.MyTable tr td {
vertical-align: middle;
}
.circle {
background: red;
width: 40px;
height: 40px;
text-align: center;
position: relative;
display: inline-block;
border-radius: 100%;
border: 1px solid black;
padding: 10px;
font-size: 32px;
}
.text {
background: green;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
}
HTML:
<table class="MyTable">
<tr>
<td>
<div class="circle">
24
</div>
</td>
<td class="text">
Smallest Personal Computer - Micro Mote
</td>
</tr>
</table>
With this, you don't have to worry about the line-heigt, and all those "itty gritty" stuff. You will be able to change your font-size and still have your text centered perfectly.
This is where I am trying to accomplish this effect:
http://www.smalldot.agency/ccren/goals-page/
As the "val" bar increases in width, it should overlap the "current" text ((which is the same text as "val" but a different color)). I am able to force "current"'s copy on top of the "val" element, but I can't get it to rest underneath instead.
If I place the "current" p class below the "val" div class, the the text from "current" shows up south of the progress bar, rather than beneath it.
Also, the z-index: 0; doesn't seem to be doing anything to fix the problem.
HTML:
<div class="progdiv" style="width:100%;">
<p class="current">1,234</p>
<div class="val" style="width:3%;">1234</div>
</div>
CSS
.val {
height:100%;
border-radius:3px;
line-height: 1.5em;
font-size: 12pt;
background: #019BA9!important;
text-align: left!important;
vertical-align: center;
-webkit-box-shadow: 3px 3px 2px #bbbbbb;
overflow:hidden;
}
.progdiv {
background-color: #FFFFFF!important;
height: 1.5em;
text-align: right;
vertical-align: center;
border: solid 1px #eeeeee;
border-radius: 3px;
-webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
text-align: left!important;
overflow: hidden!important;
}
.current {
text-indent: 6px;
height:100%;
border-radius:3px;
font-size: 12pt;
line-height: 1.5em;
text-align: left!important;
vertical-align: center;
color: #019BA9!important;
position:absolute!important;
text-align: left!important;
z-index: 0;
}
Just add position: absolute; to the .val CSS. Also remove the height:100% from both the .val and .current CSS.
You can visit the site I am trying to work on here.
I am trying to get basically the layout as in the top right box in the bottom right box, but for some reason I cannot get it to float to the right. Is there something I am missing here? It's driving me nuts because my code works in the upper box but not in the lower one.
Here's the HTML.
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
</div>
</div><!--end hours-->
</div><!--end container-->
And the CSS.
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-right: -11px;
margin-top: 11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10p;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 150px;
display: inline-block;
}
Thanks for any help! It's probably something simple and I just need a fresh pair of eyes.
you seem to have a typo,
under the style rule for
div#hours
you have
padding: 11px 11px 10px 10p;
your missing an 'x' at the end. Which means the padding rule is not being applied
Now this solves the alignment, but the height might not be right now, but I'm sure that should be straight forward
Can't figure out how I"m getting this extra white space around my image:
The markup:
<div id="member-name" hidden="true">
<button type="submit" id="btnExpandSection"><img src="~/Content/Images/plus.jpg" /></button><p id="member-fullName"></p>
</div>
the styles:
input, textarea
{
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: .9em;
margin: 5px 0 6px 0;
padding: 5px 2px 5px 5px;
width: 300px;
}
img
{
display: block; /* gets rid off any unexpected margins round the image */
border: 0px;
}
input[type="submit"], input[type="button"], button
{
background-color: #ffffff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
width: auto;
vertical-align: middle;
border: 0px;
}
td input[type="submit"], td input[type="button"], td button { font-size: 1em; }
UPDATE:
There's also this style in there:
#member-name
{
margin: 30px 0px 0px 0px;
height: 30px;
font-weight: bold;
color: white;
padding: 1px 1px 0px 1px;
background-color: #d28105;
border: 1px solid darkgray;
}
#member-fullName { margin: 0px 0px 0px 20px;}
#member-fullName p{ display: inline;float: left;overflow: hidden;}
Can't you just provide the image as a background to the button element?
#btnExpandSection {
background: #ffffff url('/Content/Images/plus.jpg') no-repeat center center;
height: /* image height */;
width: /* image width */;
}
I would start with this, and build it back from here...
button,
#member-fullName,
#member-name,
#btnExpandSection,
#btnExpandSection img {
margin: 0;
padding: 0;
}
But the following would definitely be preferably to an image nested between <button></button> tags. Replace 32px with actual width and height values of your image.
button {
background-image: url(~/Content/Images/plus.jpg);
width: 32px;
height: 32px;
}