|
CSS - Percentage Bars With Text
I think this is more of a css problem than php thats why its here
I can get percentage bars to work without text on them, but not with text, the bar is either pushed below the text, or the text is pushed onto 3-4 lines, depending on how wide the bar is So far i have: The php PHP Code: $poke[] = '<div class="percentage"> <span style="position:relative;">'.$text.' ('.round($per, 2).'%)</span> <div class="perc" style="width:'.$per.'%;"></div> </div>'."\n"; the css Code: .percentage {
background-color:#800000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
height:15px;
font-size:10px;
z-index:2;
}
.perc {
visibility:visible;
height:15px;
z-index:3;
background-color:#000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
This is how it looks with that code Similar Tutorialscan some one help me create a css scroll bar using the colors from my site http://jaygreentreejr.info/main here is the css for the main area(links) PHP Code: td { font-family: verdana; font-size: 11px; } A:link, A:visited, A:active { COLOR: #000000; } A:hover { COLOR: #73C42C; } A:link {text-decoration: none;} A:hover {text-decoration: underline;} A:active {text-decoration: underline;} A:visited {text-decoration: none;} A:visited:hover {text-decoration: underline;} A:visited:active {text-decoration: underline;} Hi, I'm trying to do a two column layout which spans across the whole screen. This would be easy if I was just using percentages because I could just go: Left: width:20%; Right: width:80%; But I need the left bar to be a fixed width and the right bar to span the rest of the screen. There might be something really simple here that I'm overlooking but at the minute I can't think of how I would do it... Joe Hi i've got a question... i have a text area block. When i assign a height of 200% to the block it doesnt seem to do anything, but when i assign a height in pixel eg 200px, it works? If I make a wrap, and put other elements in the wrap, and say I want those elements to be x% wide, am I saying x% wide of the window or the wrap? So I have read a bunch of different results from my google searches and none seem to do what I would like. I'm beginning to think that there isn't really a solution at this point in time. Here is my setup: Code: <div id='container'>
<div id='header'></div>
<div id='menuBar'></div>
<div id='main'>
<div id='content'></div>
</div>
<div id='footer'></div>
</div>
'header', 'menuBar', and 'footer' are all fixed height. 'main' MAY have a sub-menu div. When it does have this sub-menu, I would like for that sub-menu to be full height and 20% wide. Otherwise, I would like for 'content' to be as wide as possible. Currently I'm floating the sub-menu left and as a result the text in 'content' wraps around it after the bottom. In case my description makes no sense... Default Behavior: Current Behavior: Desired Behavior: It's so pretty and colorful I *could* create a second template for pages with a sub-menu, but I would prefer not to have to resort to that. How do I add scroll bar color in FireFox? I know how to do it in IE, But FireFox is different. Any Help apprecated, thanks. I'm working on a page that uses a sort of "pseudo-frame" effect, where the bulk of the page is in one div, and there is a second div which is a sort of "control panel" that never scrolls. Basically, I'm implementing this by "turning off" scrollbars for the browser, and applying "overflow-auto" to a div that takes up the whole page (basically). Long story short, I'm having a problem ONLY in IE7, in that when the page needs a vertical scroll bar, it does NOT resize the content horizontally to accomodate it, and thus adds an unneeded horizontal scroll bar to the page. This ONLY happens in IE7. What follows is the minimal code needed to reproduce the problem (it does not include the "control panel" pseudo-frame I mentioned.) I notice that when I change the width of the "wideDiv" to auto instead of 100%, this does not happen. Unfortunately, I think I need to use 100% on the real site (which is far more complex than this). Does anyone have a workaround? I've already wasted at least 8 hours on this... Can I send the bill to Microsoft? Code: <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en" style="overflow:hidden; height:100%;">
<body style="margin:0; padding:0; height:100%;" >
<div id="MainContentDiv" style="height:100%; width:100%; overflow:auto; overflow-x:visible; ">
<div id="wideDiv" style="width:100%; margin:0; padding:0; background-color:#ddd;">A Wide Div</div>
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
Stuff to Make the Page Taller...<br />
</div> <!-- MainContentDiv -->
</body>
</html>
Thanks! Jeff Hi all!! I've just finished this website relifeservizi.com but I have experienced some problems with browsers compatibility. .Links. In the index page relifeservizi.com links are buttons (images) you can click and they should have a complete border but it does work only for textual links, for the images I have only the bottom border. But I don't mind because I like it this way. The problem is that Firefox displays always the border at the bottom of each image, white Chrome and Safari don't. The only link without border is the first one, that is the company's logo and I really can't understand why!!! .Googlemaps. I embedded a googlemap here relifeservizi.com/contatti.htm with percentage sizes, width e height in %. It does work both with Chrome and Safari but not with Firefox, displaying it small. .Vimeo. Same problem for a video I embedded from vimeo. relifeservizi.com/relife.htm I used percentages in size and it displays correctly with Safari and Chrome but again not with Firefox. This is pretty much irritating, because I'm really not able to understand what is the problem and I do need that link underline on hover... And it's much more irritating because I'm a Firefox user anyway u___u Hi, First off, I've tried a quick search to see if anyone else has posted this problem, but didn't come up with anything. So, if I am repeating, apologies :-) Anyway, I've got a problem that hopefully someone will be able to help me with. It's probably quite simple, but my CSS is a bit hit and miss ;-) Anyway, firstly, here's the CSS: Code:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #8E959B;
}
#header {
width: 100%;
height: 225px;
margin: auto;
padding: 12px 0 0 0;
}
#logo {
float: left;
width: 208px;
height: 208px;
margin: 0px 0 0 14px;
padding: 0 15px 0 0;
border: 3px solid #EB850C;
}
#logo h1 {
padding: 120px 0 0 0;
text-align: center;
letter-spacing: -3px;
font-size: 2em;
font-weight: normal;
}
#logo h2 {
margin-top: -10px;
text-align: center;
font-size: medium;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
}
#logo a:hover {
color: #990000;
}
#splash {
position: absolute;
left: 250px;
margin-right: 10px;
top: 100px;
border: 3px solid #EB850C;
width: 73%;
max-width: 73%;
height: 115px;
}
#menu {
float: right;
padding: 0 0 0 0;
}
#menu ul {
height: 55px;
margin: 0;
padding: 41px 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
border: 3px solid #EB850C;
display: block;
float: left;
width: 80px;
height: 22px;
padding-top: 12px;
text-align: center;
text-decoration: none;
text-transform: lowercase;
letter-spacing: -1px;
font-size: 1em;
}
#menu a:hover, #menu .active a {
color: #FFFFFF;
}
And the HTML: Code: <body> <div id="header"> <div id="logo"> <h1><a href="#">Company Logo Image</h1> <h2></a></h2> </div> <div id="menu"> <ul> <li ><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="splash">This is the page heading montage image</div> </div> </div> </body> The problem is, I need the splash div to resize depending on the width of the screen. The idea being a cheat so depending on different resolutions, the different the size of the div and with a background-image set, the image will appear to expand/contract depending on the width of the screen. It's gonna be a repeating montage image. If the window is over, say, 80% wide, then it works fine. Thing is, if you shrink the width of the window past about 80%, then the div starts to go off the right hand side of the screen... Hopefully I've made myself reasonably clear? Any ideas? Thanks! Sorry if this is a common problem. I tried a search but didn't find anything that seemed helpful. I've got "frame" (not a <frame>) around the content of my site and I need this frame to expand vertically if necessary, according to the content. I've done this by having a 1px high image, set to 100% height and an exact pixel width. The frame is a table, three cells wide, with the side images in the two outermost cells and the content in the central cell. It's the side images that cause a problem. What I've got works fine in Firefox but in IE6, the sides of the frame don't display, or the image displays but doesn't stretch (I can't tell 'cos the images are only 1px high). Here's the basic table layout: Code: <table id="frameTable" border="0"> <tr> <td> <img id="FrameLeftImg" src="resource/frameleft.png" /> </td> <td> <?php /*Add constructed page data*/ ?></td> <td> <img id="FrameRightImg" src="resource/frameright.png"/> </td> </tr> </table> And here's the CSS for the side images: Code:
#FrameLeftImg {
position: relative;
width: 26px;
height:100%;
}
#FrameRightImg {
position: relative;
width: 28px;
height:100%;
}
The table is contained in a div that is absolutely positioned by pixels but has no value specified for width and height. Anyone know what I'm doing wrong? I have a left div which is fixed let is say 400px and the right div should extend to the edge of the screen. How can i get it to extend. If i don't give any width to the right div: The right div has other dives which has got dotted bottom border, these dotted border will not extend to the end any ideas? cheers IE seems to have a lot of trouble with percentage based heights. In certain circumstances they seem to be okay, other times they seem be completely ignored. Pixel based DIV heights seem to work, but I don't know if it is just the circumstance or what not. Does anyone know what the actual "rules" are about this as it applies to IE? Good morning. I'm in the procces of changing my old table based site to css/ divs layout. Instead of using a "position: absolute" setup, I was trying to get the page to fit dynamicaly with different screen resolution (I placed the initial divs with "left: 20%;" and "right:20%;" which seems to work fine in FF, but fails completely in IE). So, in the end I had to resort to fixed positions and sizes... not what I wanted... but it'll do in the meantime (Until I find the propper tutorials to get this done). Meantime, I have a problem with two small divs I'm trying to place at the center and bottom of the page. They do display at the right position with FF, but are placed on the left with IE. text-align: center doesn't seem to do the trick... and since the "align" tag is going to be deprecated... I don't want to use it. How do I set these to be placed in the bottom/center? The page: http://www.onpoi.net/ah/ (Note that only the index.php has been redone, the rest is still with the old table layout). Thanks in advance I hope I can explain this in a way that makes sense. I have a table layout where the number of columns is variable (sometimes it can have 1 column, sometimes it can have up to 9 columns), depending on what data is filled out on a previous form. The code in question: Code: <tr> <td> <div style="float: left; width: 13px"><img src="arrow.gif"></div> <div style="float: left; width: 93%;">My explanatory text goes here!</div> </td> <td> Column 2 Text </td> <td> Column 3 Text (and so on) </td> </tr> The two divs there need to float next to each other -- the first div is a little 13x13 arrow, the second div is some explanatory text. I can not just float the image left (and not put the text in a div), because the client wants the text to be left aligned in the div, not wrapping around the image. The issue: If there are less than 5 or 6 columns, it works beautifully. If you put more columns in there, then the second div appears below the first div. I've been fiddling with the widths on the second div, but it has to be a percentage (not a set number of pixels), because the number of columns is variable (as is the width of those columns). How can I make the columns float next to each other regardless of the width of the table cell that they are within? Any help is appreciated. I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example: Code:
.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}
.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}
and then using html in the following way: Code: <div class="item1"><a href="pagelink.htm"></a></div> My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still OMG I'm going insane When I place my flash file in a html document I don't want the scroll bars visible, unless the window is resized smaller than the dimensions of the flash movie. I'm using this piece of code nicely to turn the scroll bars of the browser window off, but it dosn't turn them back on when needed. <STYLE TYPE="text/css"> BODY {overflow:hidden;} </STYLE> This link, http://www.one9ine.com/flash.html works the way I'm trying to work out. No scrollbars visible untill, the browser window is rezised smaller that the flash movie content. Cheers for the help. Hi All, I have a skeleton css site here http://www.10eight-design.co.uk/temp/layout_test_float.htm You'll notice that there is a LR scroll bar at the bottom of the scrollable div. Is there a way to remove this? That's all. Rob I'm doing a 2 column layout via css (my first attempt at doing full css layout) and I'm having some problems in firefox getting it to work right. Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #0163CB;
}
#content{
width: 80%;
float:left;
}
then my divs are as follows:
<div id=navBar>
stuff
</div>
<div id=content>
more stuff
</div>
The problem is that in firefox the top of content sits directly to the bottom and left of the end of navBar . If I set conent width to 78% it seems to be fine but it there are borders inside content that i want to take up 100% of the remaining page. Thanks Dave I have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon. 1. I have a question about scroll-bars, how are they implemented to be translucient? 2. How can I make <DIV>'s auto-stretch to whatever is in them? 3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)? 4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread). Thanks, -Sam |
|||||||