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! :)
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 am trying to place a div with text on top of an image but for some reason it doesn't work. My code is:
<div id="pics">
<div class="inner">
<img src=".." class="pic" height="310" width="310">
<div class="cover">blah blah</div>
</div>
</div>
my CSS is:
#pics{
overflow:hidden;
display:block;
}
.inner a{
position:relative;
margin:3px;
padding:10px;
top:10px;
}
.inner{
position: relative;
display: inline-block;
}
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
top: 0px;
}
I have tried many things but it doesn't seem to work. I might have messed up my cs somewhere
That's because you're targetting an ID and not a class.
In other words, in the CSS you have the definition for an ID (#cover) and the HTML code has a class:
<div class="cover">blah blah</div>
Either change the HTML to have an ID:
<div id="cover">blah blah</div>
or change the CSS to target the class name:
.cover{
position: absolute;
background-color: black;
color: white;
width: 100%;
height: 100%;
border-style: solid 5px;
top: 0px;
}
UPDATE:
You are giving the .cover a width and height of 100%, but absolute positioned elements don't really "understand" that, so I suggest changing it to:
(place the left, bottom and right to the edges, this will fit the div as 100% width and height of the relative parent)
.cover{
position: absolute;
background-color: black;
color: white;
left: 0;
right: 0;
bottom: 0;
border-style: solid 5px;
top: 0px;
}
How about setting the picture as background via the background-image: attribute.
You then could make your div clickable with <div onclick="window.location="url";>
In detail your css would look like this:
.image {
width:310px;
height:310px;
background-image:url('pathtoimage');
}
I know it's been asked a few times, but upon playing around a bit I still couldn't center what I need to. What I'm looking to do it center those buttons vertically on the page. I want to put centered text above it, too.
My (sloppy) code: JsFiddle
HTML:
<div>
</div>
CSS:
div {
text-align: center;
}
a {
text-align: center;
margin: auto;
}
.cbtn {
display:inline-block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
Here is one way of doing it, assuming you want the buttons centered both horizontally and vertically on the page.
The HTML is:
<div class="wrap">
<div class="button-wrap">
</div>
</div>
and the CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 100%;
width: 100%;
}
.button-wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 60px;
width: 350px;
margin: auto;
text-align: center;
}
You need to declare the width and height properties of the body and html elements to be 100%, and the same for div.wrap.
The trick is to wrap the links/buttons in div.button-wrap, which is absolutely positioned and given specific width and height values to match the buttons. The height of 60px is based on the height of the .cbtn, and the width of 350px is 5 times (60px + 2x2px + 2x1px + 4x1em) which is about 350px. However, since we can use text-align: center for centering the inline blocks, the exact width is not too critical, just make it wide enough.
The centering works by setting all the position values to 0 (left/right/top/bottom) and then setting margin: auto.
This is all based on CSS 2.1 so it should work in most browsers. The only limitation is the inline-block property, which IE7 does not recognize.
However, since you are using CSS2 animations, inline-block is probably okay.
Fiddle reference: http://jsfiddle.net/audetwebdesign/METYC/
Full page view: http://jsfiddle.net/audetwebdesign/METYC/show
check this :
http://jsfiddle.net/AT8S6/
you can change the width,height and margin property of section for different results .
HTML
<div>
<section>
</section>
</div>
CSS
div {
text-align: center;
height:400px;
width:100%;
border:2px #000 solid;
}
a {
text-align: center;
margin: auto;
}
div section {
width:65%;
height:50%;
margin:20% auto;
}
.cbtn {
display:block;
width:60px;
height:60px;
border-radius:50px;
background:transparent;
border: solid gray 1px;
margin: 2px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
float:left;
}
.cbtn:hover {
text-decoration:none;
background:#F3734F;
}
#mail {
background-image:url(http://data.novicode.com/data/img/mail.png);
background-position:50% 50%;
background-repeat:no-repeat;
}
You could set the following rules on the div:
div {
position: absolute;
left: 50%;
height: 50%;
margin-top: -(height of div);
margin-left: -(width of div);
}
Example link below:
http://jsfiddle.net/AT8S6/1/
I have a div block that overlays on top of its parent div, but when the window is resized, the child div moves around like crazy. How can I prevent that from happening. Here is the link to my site: http://raider.grcc.edu/~ryanduffing/recordstore/
Here is the relevant CSS code, and HTML code:
<div id="overlayDescription" class="my_corner">
<span id="overHeader"><span id="chevron">»</span>THE CORNER</span>
<span id="overHeader2">RECORD SHOP</span>
<p id="overContent"></p>
</div>
<div id="pictureBox">
<img src="img/storefront.jpg" />
</div>
#pictureBox{
margin-top: 10px;
margin-left:auto;
margin-right:auto;
width: 940px;
height: 420px;
position: relative;
z-index: 1;
}
#overlayDescription{
font-size: 11px;
position:absolute;
top: 290px;
right: 489px;
height: 265px;
border: 1px solid #FFFFFF;
width: 240px;
color: #FFFFFF;
background-color:rgba(0,0,0,.9);
z-index: 2;
border-radius: 100px 0 0 0;
}
#overlayDescription span#overHeader{
font-family: Arial Narrow;
position:relative;
font-size: 25px;
left: 80px;
top: 10px;
}
#overlayDescription span#chevron{
position:relative;
left: -5px;
font-family: Arial Narrow;
font-size: 35px;
color: yellow;
}
#overlayDescription span#overHeader2{
font-family: Arial Narrow;
color: yellow;
position:relative;
top: 10px;
left: 80px;
font-size: 25px;
}
#overlayDescription p#overContent{
position:absolute;
padding-left: 25px;
}
You have to make the child's absolute position relative to its parent.
#content {
position: relative;
}
#overlayDescription {
top: 140px;
right: 327px;
/* rest of the styles for this element */
}
It's because you give your child div absolute position means that this element is positioned relative to the first parent element that has a position other than static.
But as I can see from your website, all parent divs of your #overlayDescription div are static positioned element since static is the default position value.
So currently, your div are positioned according to your html element which is your window so you need to give one of its parent another position method rather then static then you'll be fine, for example:
#content {
position: absolute;
}
Set position: relative; on div.content.
Then set right: 0px; on #overlayDescription and adjust the top value to get it to sit in the right spot vertically.
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.