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.
Related
i want to draw something like this in html.is that possible in html that i can label the rectangle ? i think may be by using <hr> ?
at the moment i have just draw a rectangle
here is the code
<div style="width:150px;height:80px;border:1px solid #000;">This is a rectangle!</div>
how can i draw lines around it and then label it
You can construct the lines and labels with pseudo elements and data attributes using just 2 elements
FIDDLE
Markup:
<div data-label1="a" data-label2="b">
<span data-label3="c">XYZ Pty Ltd</span>
</div>
CSS
div
{
width:150px;
height:80px;
border:1px solid #000;
font-size: 25px;
text-align:center;
margin: 100px;
position: relative;
background: #fff;
}
span
{
padding: 10px 20px;
display: inline-block;
}
div:before, div:after
{
content: attr(data-label1);
position:absolute;
left: -50px;
top: 40px;
width: 50px;
height: 1px;
z-index: -1;
background: #000;
text-align:left;
font-size: 18px;
}
div:after
{
content: attr(data-label2);
right:-50px;
left: auto;
text-align: right;
}
span:after
{
content: attr(data-label3);
position:absolute;
left:0;right:0;
margin: auto;
padding-top:100px;
top:20px;
font-size: 18px;
width: 1px;
height: 0;
z-index: -1;
background: #000;
}
This code will give you the output you want but this is a kind of hard coding.
<div style="display:inline-block; position:relative;top:20px;">a</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;"></div>
<div style="width:150px;height:80px;border:1px solid #000;display:inline-block;position:relative;left:-5px;">This is a rectangle!</div>
<div class="hLine" style="width:150px;height:1px;background:#000;display:inline-block;position:relative;top:20px;left:-10px;"></div>
<div style="display:inline-block; position:relative;top:20px;">b</div>
<div class="vLine"style="height:40px;width:1px;background:#000;position:relative;left:230px;"></div>
<div style="position:relative;left:230px;">c</div>
For line segments don’t use
<hr>
because its width is dependent on the width of the parent container. So in order to set its width you need to introduce a div to restrict its width. so instead of creating two elements. create the line with just div by keeping its height:0px, and width: desired width. you got your horizontal line segment. If you want a vertical line then keep width zero and height the desired amount.
Hope this helps you out.
You can do using normal HTML and css or using HTML5 Canvas,I am giving you with html and css
http://jsbin.com/IlArOTE/1/edit
I written multiple borders using pseudo elements way of CSS-tricks.
<span class="something">
label: <span id="count">20</span>
</span>
CSS style is like this:
.something {
background-color: #B3B3B3;
padding: 10px;
position: relative;
border: 2px solid #000;
}
.something:before {
content: " ";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 2px solid #FF6666;
}
It looks good. but if I changed count, it cause change width and inner border isn't changed like this:
You can see this demo at jsfiddle.
How can I fix it?
do you really need flexible width of element .something? if the element .something would have fixed width, the problem would be solved:
.something {
display: block;
width: 200px;
background-color: #B3B3B3;
padding: 10px;
position: relative;
border: 2px solid #000;
}
HOWEVER
if you need flexible width, you should redraw the .something:before element after you increase the .something width. i updated jsfiddle for that - check it out.
the <div id="container"> is added only because jsFiddle does not support $(document) modifications.
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! :)
how is it possible to do that, compatible, good looking and responsive ? I think to make the H2 box with a background, but it make a lot of problem interacting with the background... it's a lot of png. I prefer a way to do it with pure css, padding, margin etc
full resolution image (too see texture)
This can be done with any semantically appropriate element of your choice, without having to set a background color.
http://cssdeck.com/labs/n2z0icvf
<h1>Technique</h1>
h1 {
overflow: hidden;
padding-left: 2em;
}
h1:before,
h1:after {
content: " ";
display: inline-block;
border-bottom: 2px solid;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
width: 100%;
}
Working fiddle: http://jsfiddle.net/58JCY/
HTML:
<fieldset>
<legend>LEVE TECHNIQUE</legend>
</fieldset>
CSS:
fieldset {
border:none;
border-top: 1px solid #999;
}
legend {
padding: 0 5px;
}
I have an element that looks something like this:
___
| X|
‾‾‾
So essentially a tiny box with a button to close it.
I have also applied CSS to the element, so that when hovered, it will turn to something like this:
___________________
| X|
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
Simply put, it'll just become wider.
Now. what I want to do is that whenever the user hovers over the close button (X), the box will not change its size.
But when the user hovers on anywhere else on the box, it would behave as suggested.
Is this possible with pure CSS?
EDIT: Sorry that I added this late, but the answers should be based around this example: http://jsfiddle.net/fpY34
Using the markup you have, I have no clue how to do it without fixed widths, and absolute nastiness. But here's me giving my all! http://jsfiddle.net/fpY34/15/
<div id='outer'>
<div id='notOuter'>
<div id='content'>
<div id='img'>
</div>
<div id='label'>
Text example
</div>
<div id='closeButton'>
X
</div>
</div>
</div>
</div>
and the beauty:
#outer { height: 30px; }
#notOuter {}
#content { float: left; position: relative; }
#closeButton { background: #0f0; position: absolute; top: 0; left: 30px; width: 30px; height: 30px;}
#img { background: #f0f; width: 30px; height: 30px; position: absolute; left: 0; top: 0; }
#label { display: none; position: absolute; left: 0; top: 0; width: 60px; height: 30px; background: #f00; }
#img:hover { width: 60px; z-index: 10; }
#img:hover + #label,
#label:hover { display: block; z-index: 20; }
#img:hover ~ #closeButton,
#label:hover + #closeButton { left: 60px; }
would you check this please and tell me if that what you want ?
http://jsfiddle.net/UjPtv/10/
<style>
.divs
{
height: 20px;
width: 100px;
border: 1px solid;
padding: 5px 3px;
}
.divs:hover
{
width: 50px;
padding-left: 150px
}
</style>
<div class="divs"><span>X</span></div>
You could float them:
<div class="box">
<div>
Content
</div>
<span>X</span>
</div>
.box {display:inline-block;border:1px solid black}
.box div {width:100px;float:left}
.box div:hover {width:200px}
.box span {float:left}
Might not work in older browsers though.