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.
Related
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.
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.
I am trying to make a vertical navbar. I have used an unordered list, with a border-left propoerty, so that on hover, I can change the opacity/color of the border. The problem right now, is that this border appears as a continuous line across the list items. I want to include some space between the list items so that the borders are separated and one can make out which border belongs to which list item.
HTML:
<div class="leftNavbar">
<span class="navLine"></span>
<ul>
<li>Introduction</li>
<li>Whats new?</li>
<li>Gallery</li>
</ul>
</div>
CSS:
.leftNavbar{
position: absolute;
top: 100px;
z-index: 500;
left: 50px;
vertical-align: middle;
}
.leftNavbar ul{
list-style: none;
}
.leftNavbar ul li{
font-family: 'Sintony', sans-serif;
height: 100px;
text-transform: uppercase;
color: white;
font-weight: bold;
text-shadow: 0px 0px 2px #000;
vertical-align: middle;
line-height:100px;
border-left:4px solid blue;
}
JSFIDDLE: http://jsfiddle.net/ATQ4Q/
You could add a margin to the list items. Something like margin-bottom:5px;:
.leftNavbar ul li {
font-family:'Sintony', sans-serif;
height: 100px;
text-transform: uppercase;
color: white;
font-weight: bold;
text-shadow: 0px 0px 2px #000;
vertical-align: middle;
line-height:100px;
border-left:4px solid blue;
margin-bottom:5px;
}
jsFiddle example
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.
I'm trying to center a single character, like this:
<div class='button'>x</div>
<div class='button'>+</div>
<div class='button'>*</div>
.button {
border: solid 2px #aaa;
-moz-border-radius:2px;
-webkit-border-radius:2px;
color: #888;
width: 16px;
height: 16px;
font-weight: bold;
text-align:center;
float: left;
margin-right:5px;
font:14px Helvetica Neue,Helvetica,Arial,sans-serif;
line-height: 100%;
}
this centers the character in each div horizontally, but not vertically - what do we need to do to center it vertically as well?
Thanks
Since it's a single character:
line-height: 100%;
and if setting line-height to 100% didn't work set it to the fixed height of the container:
.button {
height:300px;
width: 300px;
text-align: center;
line-height: 300px;
border: 1px dotted #999;
}
Check here: http://jsfiddle.net/7afUH/1/