|
CSS - I Need To Slightly Edit This Progress Bar
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. Similar TutorialsOkay, because of a conflict with Sothink Menu Builder I cannot use the container or wrapper tag the way I normally would on my CSS. Instead, I've done this: Code: * { margin:0; padding:0; }
body {
margin: 0 auto;
width: 1000px;
text-align: center;
background-color: #e0d7e6;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
letter-spacing: normal;
vertical-align: top;
word-spacing: normal;
white-space: normal;
line-height: normal;
padding: 0px;
background-image: url(../images/shared/gifs/bacgrnd.gif);
background-repeat: repeat-x;
}
#wrapper {
text-align: left;
position: relative;
z-index: 0;
}
And the HTML: Code: </head> <body><div id="wrapper"> webpage content </div></body> And it works well, except the page is off center (to the right) by a couple of pixels. It's in all browsers. Does anyone have a fix? Thanks in advance. In my first attempt at a heavily CSS-based layout, I've run into this frustrating problem. I currently cannot get IE to remove 2px around my search box and line up correctly. Example FF: Everything lines up perfectly. Example IE: You can see that the box around the search input is 2px lower than the box to the left. Here are the applicable classes: css Code: Original - css Code /* class for the div containing the search input */ .search { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; border-bottom:1px solid black; vertical-align:middle; background-color:#FFFADE; text-align:center; padding-top:3px; margin-bottom:5px; height:20px; } /* class for the input fields */ .inputbox { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000000; background-color : white; border : 1px solid black; } /* for the containing table td */ #right_boxes { font-family:arial,helvetica,sans-serif; font-weight:normal; font-size:12px; width:145px; border-left:1px solid black; padding:20px; border-top:4px solid black; }
The HTML for this section: html4strict Code: Original - html4strict Code <td id="right_boxes" valign="top"> <form action="index.php" method="post"> <div align="left" class="search"> <input alt="search" class="inputbox" type="text" name="searchword" size="20" value="search..." onblur="if(ths.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> </div> <input type="hidden" name="option" value="search" /> </form> <td id="right_boxes" valign="top"> I have tried everything that I can think of. Any suggestions or answers would be greatly appreciated. TIA, Conor BIO BIO CSS i would like for both the image and text to be centered on page-- they are just a little off.... am using FOX as primary browser -- but IE displays pretty much the same-- anyone got a fix for this??? its late and i have been over the coding a million times but just dont see the solution it right now thanks in advance! 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 Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference. Thanks for looking at it because I have been working on this for quite a few days now and it is buggin the ba-jesus out of me? I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot - here is the site in question sorry everyone forget about it. Didnt mean to make people start to cry That is really it. Can some one help? ok the stylesheet contains this: BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; } and I need to add this into it BODY { scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } Ok here's what I don't understand. The original stylesheet(used by a php script) contains lots of things at the top separated by commas. Does that mean that it will affect all of those things? So I have to do this? BODY { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; } Sorry about the newbie question, but I gotta start some where. Hi, I'm totally new to CSS and I need to edit a TEXT of our login page portal. I'm using firefox/firebug to view the contents but i can't seem to find the exact html file to edit it. I tried to edit the login.aspx file but I cannot find the contents to edit there. All I see is runat="server" if i follow my page using "view code" in my browser instead of the actual TEXTS that i need to edit. Hope someone can help me on this. TIA! ok i have the style but i want to put some other stuff on like widgets but i dont know how to an i cant do it from the ACP I don't want a browser plugin. I want a tool to open a CSS file and show me samples of the styles. I would like to edit the styles and see the effects of my edits. Any suggestions? Hi. I have a question about how to edit specific elements in a profile page. Take this as an example; worldwideweb.teenspot.com/profiles/Mumfie Scroll down and look at the box named "Specifics". Lets say I want to edit "Location" in that section from Norway to Sweden by using CSS. What is the procedure I should follow? The page allows you to edit CSS in an advanced page editor. Should I search up the source for that page and do some modification by pasting a new code? |
|||||||