How can I make a line under a , not stretch the whole way, lets say 70% centered and with rounded borders, see image here:
https://i.imgur.com/6O7mfn3.png
this is what I got so far, but its obviously not rounded, and its goes 100% of the width of the span.
<span class="button">
hello space!
</span>
.button{
border-bottom:6px solid blue;
}
Use an ::after element.
.button {
padding-bottom: 6px;
position: relative;
}
.button::after {
content: "";
position: absolute;
bottom: 0;
left: 15%;
width: 70%;
height: 6px;
background-color: blue;
border-radius: 6px;
}
<span class="button">
hello space!
</span>
Related
In below program why margin-right value (+ve/-ve) has no impact on the tooltiptext? The margin-left works fine but margin-right has no impact? Thanks
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
top: 100%;
margin-right: 100px;
}
<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
By default HTML elements are aligned to top left corner of their parent element which in this case is .tooltip. Adding a margin-right would push the elements on the right away. However there are no elements after .tooltip thus no effect.
Here are overlapping blocks. Each one has a semi-opaque background and a font-awesome icon inside it.
The goal: make icons not lose their brightness because of overlapping.
I tried applying z-index to font-awesome <i>, but with no luck: https://jsfiddle.net/zencd/62psvfos/
How it looks now / How I wanted it to be:
Just make the icons relatively positioned:
https://jsfiddle.net/Kredit/62psvfos/1/
Relevant changes:
i {
position: relative;
}
To improve the existing code, you don't need to supply z-index on .block, and z-indexes are relative. Rather than set crazy z-index numbers like 1000, using 1 accomplishes the same thing (1 layer "higher" than the parent).
.block {
width: 100px;
height: 100px;
line-height: 100px;
background: rgba(240, 200, 200, 0.8);
text-align: center;
}
i {
z-index: 1;
position: relative;
outline: 1px dashed black;
}
set position relative to i elements
body { background: white; }
.block {
width: 100px;
height: 100px;
line-height: 100px;
background: rgba(240, 200, 200, 0.8);
text-align: center;
z-index: 10;
}
.block2 {
position: relative;
top: -55px; left: 20px;
}
i {
z-index: 1000;
outline: 1px dashed black;
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="block">
<i class="fa fa-camera-retro fa-2x"></i>
</div>
<div class="block block2">
<i class="fa fa-camera-retro fa-2x"></i>
</div>
I want to create something like this.
I'm realy tired, cuz i can create only line with similar width like heading. I have to create "smaller" line then heading. Tried done it with ::before, but it doesn't work for me. Is there any possible way to create it.
<h1>Some heading here</h1>
http://jsfiddle.net/53zxor2k/
h1 {
display: inline-block;
position: relative;
}
h1::after {
content: '';
position: absolute;
left: 10%;
display: inline-block;
height: 1em;
width: 70%;
border-bottom: 1px solid;
margin-top: 5px;
}
Change the width to how long you would like it to be, and the "left" to where the line is located, and increase the "margin-top" to make it farther away from the text.
http://jsfiddle.net/53zxor2k/1/
h1 {
position: relative;
text-align: center
}
h1:before{
content: '';
position: absolute;
left: 50%;
bottom: -6px;
width: 130px;
height: 2px;
background: red;
transform:translateX(-65px) /* width/2 */
}
<h1>some heading here</h1>
<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1>
You can simply put a border under a specific word if that is what you are attempting to do.
I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).
The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.
html:
<div class="dataTables_processing">
<div class="dataTables_processing_custom">
<i class="fa fa-spinner fa-spin"></i> Please wait...
</div>
</div>
css:
.dataTables_processing {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
padding: 0;
background-color: #333;
opacity: 0.05;
cursor:wait;
z-index:9998;
}
.dataTables_processing_custom {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
margin-left: -100px;
text-align: center;
color:#3276b1;
font-size: 14px;
z-index:9999;
}
.dataTables_processing_custom i{
font-size:30px;
vertical-align:middle;
}
When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:
.parent {
background: rgba(0,0,0,0.5);
}
I have a set of progress bars displaying different values in real time. My only problem is that I can't seem to figure out how to keep the number value in the center of the bar, as well as on top at all times. Right now it's being pushed 'ahead' of the blue bar, and disappears when it goes outside the right side of the bar.
Here's how it looks:
Markup:
<td class="gridTableCell">
<div style='position: relative' class='progress progress-info'>
<div class='bar' id='signalRdepthRangePercentage-#:ViewUnitContract.ConveyanceId #' style='width: #: DepthRangePercentage#%'>
</div>
<span class='gridSpan' id='signalRdepth-#:ViewUnitContract.ConveyanceId #'>#: ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth#</span>
<span class='hidden' id='signalRMaxDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MaxDepthRange#</span>
<span class='hidden' id='signalRMinDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MinDepthRange#</span>
</div>
</td>
And my css 'gridSpan':
.gridSpan {
position: absolute;
top: 0px;
z-index: 2;
text-align: center;
color: #676767;
width: 100%
}
The first of the three spans is the one that displays the number value inside the bar.
Any suggestions how I can keep this centered at all times, and not pushed in front of the blue filler with a huge margin?
Do something like the following:
FIDDLE
The outer element has text-align:center
The gridSpan element has display:inline-block (not absolutely positioned)
The inner element (with the blue % progress) needs to be absolutely positioned, so as not to be effected by the text-align:center.
Markup:
<div class="outer">
<span class="inner"></span>
<span class="gridSpan">9048.343</span>
</div>
CSS
.outer
{
width: 70%;
margin:20px;
height: 30px;
border: 1px solid gray;
overflow: hidden;
border-radius: 15px;
position:relative;
text-align: center;
}
.inner
{
background: aqua;
display:inline-block;
position:absolute;
left:0;
width: 20%;
height: 30px;
}
.gridSpan {
display:inline-block;
margin-top: 5px;
color: #676767;
position: relative;
z-index:2;
}
Alternatively, if you knew the width of the value you could do this by adding display:block;left:0;right:0 and margin:0 auto to your class:
.gridSpan {
display:block;
position: absolute;
margin: 0 auto;
top: 0px;
left:0;
right:0;
z-index: 2;
color: #676767;
width: x px; /*(width of value)*/
}
Actually, I finally figured this out based on this fiddle:
http://jsbin.com/apufux/2/edit (Wonder why I've never seen this post before!?)
Seems that I was missing some style overrides to the .bar and .progress part:
.progress {
position: relative;
}
.bar {
z-index: 1;
position: absolute;
}
.progress span {
position: absolute;
top: 0px;
z-index: 2;
text-align: center;
color: #676767;
width: 100%
}
Anyways, thanks for your effort! :)