|
CSS - Vertical Progress Bar
Hey guys,
I am trying to create a vertical progress bar using CSS. I am using width/height of the image in % to set the value of the progress bar. I want my vertical progress bar to start at the bottom but CSS set up my height starting point at the top. My problem in image: Is there anyway to set the height starting point at the bottom? Thanks for your time! J0kerz Similar TutorialsHi, Does anyone know how to veritcally align text using CSS? like <tr valign='middle'> when using tables. My page is on: http://www.3003online.com/demos/ecoceylon/v2/ You can see a difference in the "Home - About Us - Products - Contact Us" links when viewing from IE and Mozilla Firefox. Basically, I would like the text to be centered vertically in the bar... but CSS by default puts it on top. I tried adding padding,which helped in IE... but Firefox still shows the links a bit higher than they should be.,... any ideas how to fix this? Also, a different problem in case anyone knows how to fix it... you can see a small brown bar on the top bar. It is 50px in height. But I have no idea how to make its width as wide as the remainder of the page (this would change with different resolutions). The main content of the page is 760px wide. I would like a brown box next to that, which is 50px in height and the remainder width. Any ideas? "width: auto;" doesn't work unfortunately [ this is a follow up to my previous thread http://forums.devshed.com/showthread.php?t=270438 Any help would be greatly appreciated. Thanks very much. Hello, I have the following code that creates a progress bar: Code:
<style>
table.meter {
background: url("img/m_bg.gif") left center repeat-x;
height: 13px;
font-family: sans-serif;
font-size: 11px;
}
table.meter td.mark{
background: url("img/m_mark.gif") right center repeat-x;
}
table.meter td.mark div{
background: url("img/m_l.gif") left center no-repeat;
}
table.meter td{
background: url("img/m_r.gif") right center no-repeat;
}
</style>
<table cellspacing="0" cellpadding="0" class="meter" width="250">
<tr>
<td id="mark" width="60%" class="mark"><div> </div></td>
<td> </td>
</tr>
</table>
This will make only image progress bar, but how can I write percents straight after table (on the right)? I need it to look something like this: <|||||||| > 60% But if I write "60%" after </table> tag, it will appear on the next line, and if I add another <td> to the table, it will inherit background from table.meter style and I don't need that. Hope somebody help me. Thank you in advance. /*Left Links*/ #leftcol{ float: left; display: block; width: 200px; /*Width of left column*/ } ul#leftcol{ list-style-type: none; padding: 0.5em 0 1em 0; margin: 0; } li#leftcol{ margin: 0; padding: 0; } #leftcol a, #leftcol a:link, #nav a:visited { float: left; display: block; position:relative; width: 165px; height: 1%; padding: 8px 5px 8px 30px; margin: 0; font: normal 11px Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration:none; background-image:url(images/sidelinks_back.jpg); border-bottom: 1px solid #FFFFFF; } #leftcol a:hover { background-position: 0 -45px; color: #0C0F1B; } #leftcol img { border-bottom: 1px solid #FFFFFF; } <!--LEFT COLUMN --> <ul id="leftcol" ><li><img src="images/sidelinks_top.jpg" alt="Our Services" width="200" height="40" border="0" /></li> <li><a href="**">Collision Repair</a></li> <li><a href="**" >Heavy Frame Repairs</a></li> <li><a href="**">Truck Body Repairs</a></li> <li><a href="**" >Sprinter Repair Specialists</a></li> <li><a href="**">Commercial Van Repairs</a></li> <li><a href="**">Painting & Decaling</a></li> <li><a href="**">Custom Truck Body Services</a></li> <li><a href="**">Morgan Body Parts & Service</a></li> <li><img src="images/sidelinks_btm.gif" alt=" " width="200" height="10" border="0" /></li ></ul> 2 problems: 1) In IE and Firefox: gap between <img> and <li> 2) In IE6, a gap appears between all my <li>tags What to do? Do I have to put my <ul> in a <div> and keep my <img> out of the <ul>? How do I create div that shows vertical scroll bar if div id="content_area" is too big? Code: <div style="padding:10px; height: 100px"> <div id="content_area"> some text here </div> <div class="clear"></div> </div> Hi, The following example is positioned as I want. Code: <div><label id="day">Day:</label><span> <input type="checkbox" name="day" value="1" />Sat <input type="checkbox" name="day" value="2" />Sun </span> </div> How do I make in next example <table> vertically aligned with <label> element? Right now <table> element is positioned next to it but way below <label> element. Code: <div><label id="lang_lbl">What languages do you speak?:</label> <span> <table><tr><td><input type="checkbox" name="lang" value="1" />English </td> <td><input type="checkbox" name="langs" value="2" />Spanish</td> </tr> </table> </span> </div> Thank you. Hi I want to know if it is possible to vertical align the text in these div tags and how it's done. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="all">
#1 {width:15%}
#2 {width:20%}
#3 {width:25%}
#4 {width:20%}
#5 {width:20%}
#1,#2,#3,#4,#5 {
float:left;
overflow:hidden;
display:inline-block;
height:128px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="1"><a href="#"><img name="" src="" width="100" height="125" alt="" /></a></div>
<div id="2"><a href="#">fffffffffffggfgf fg gd</a></div>
<div id="3"><a href="#"> dfg dfg dg d</a></div>
<div id="4"><a href="#"> dgd gd d</a></div>
<div id="5"><a href="#"> gdf gdg ddg</a></div>
</body>
</html>
Greets, dabomb_gent hi, http://cyrusnetworkslive.com/products.php?sub_category_id=ph100ce10&brand_id=mo1 How can I get rid of vertical scrollbar, I want only the horizantal one. I am doing something like the in my css. Code:
<style type="text/css">
div
{
background-color:#FFFFFF;
width:950px;
overflow: auto
}
</style>
I would like to have the content section of my page have only a vertical scroll bar, an no horizontal one. How can I make content wrap if it goes over horizontaly, but scroll if it goes out of bounds verticaly? for example if there is a container div which holds an inner div, if i want the content of the inner div to appear exactly at the bottom edge of the inner div i have used the following code, #outer{ position: relative; float: left; width: 900px; height: 200px; } #outer .inner{ position: relative; float: left; width: 500px; height: 200px; vertical-align: bottom; } however the content of the inner div is starting at its default location which is top left of the inner div instead of using margin-top or padding-top, or positioning methods for the inner div to position the content at the bottom edge can the vertical-align: bottom; be used as this will be very accurate placed at the bottom edge even if the content increases the content will always appear at the bottom edge, unlike other methods where the margin-top, padding-top, and positioning, these values will have to be changed whenever content increases or decreases. please advice. thanks. Hi, I've seen a number of posts and web pages about this but so far have NOT found a method that conforms to the w3.orgs css standard. There seems to be a lot of interest in this and l wondered whether anyone has found a work around that is compatible on more browsers than I.E? Hi, I am trying to use the vertical-align property to make some text appear in the middle of a div (set float:left). However it is not working. Following is some sample code I have done for testing: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>ccc</title>
<style>
div{
width:16.7em;
height:6.8em;
border:1px solid black;
vertical-align:middle;
float:left;
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
Is this possible? Thanks and Regards, Sim085 hi is there a way to get a div to be in the vertical middle of the screen. i tried : margin-top: auto; margin-bottom: auto; but it doesn't work. thanks I'm trying to put a line of text on the bottom of a box. Code: <div style="width:500px;height:500px;background:black;vertical-align:bottom;"> This is a black box </div> <div style="width:500px;height:500px;background:black;vertical-align:baseline;"> This is a black box </div> What the above code displays: Code: ------------------------- | This is a black box | | | | | | | | | | | | | | | ------------------------- What I want it to display: Code: ------------------------- | | | | | | | | | | | | | | | This is a black box | ------------------------- I'm trying to get vertical text in a menu ie h o m e - l i n k - And so on how can this be done thanks PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? I'm trying to ensure the absence of the horizontal scroll bar within a div for all browsers. Is there a solution? overflow: -moz-scrollbars-vertical !important; only works in FF, but this is the effect I want. overflow-x and overflow-y only work in IE6 and below (right?), so does anyone know what to do for ie7 and safari and opera? I have a div that is 60px high. I want text to be centered vertically in that box. I know it is easy to do with tables, but how do you do it with css and divs? i tried using vertical-align, but that didn't seem to work. any ideas? I am new to CSS style sheets and coding. Best way to explain problem is to say: go to: sfsmokefree.org/test View in Firefox = no issues, looks good View in I.E. = left column is all pushed downwards what's up with that? Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side) Thanks! I'm sure this is some basic thing that's just slipped my mind. http://www.onlineeditions.com/opportunityhouse/ As you can see, it's rendered differently between FF and IE: the content column on the right has a few nested divs to hold background images, but on FF (And Safari) the "right" div seems to have slipped down and to the left a few pixels. Code and css is all valid, per w3c. If someone can help me find what's gone wrong here, I'd be most thankful. |
|||||||