I'm by no means a web designer, so I'd like as detailed help as you're willing to give.
I'd like to make a website that that tracks some data I enter using a bar graph from 0-100%. I'd enter the maximum number the graph could go to and then some data point would be updated occasionally, which the completion bar graph would reflect.
How would I go about doing this?
I know basic HTML and PHP, but have not used either in a very long time.
I think most of the suggestions are overkill. No need to have an extra library / dependency when all you need is some simple bargraphs. Plain HTML/CSS should do...
PS: quick code sample, only tested in Firefox 3.x
<style type="text/css">
.bar
{
background-color: green;
position: relative;
height: 16px;
margin-top: 8px;
margin-bottom: 8px;
}
</style>
<div id="barcontainer" style="width:200px;">
<div id="bar1" class="bar" style="width:43%;"></div>
<div id="bar2" class="bar" style="width:12%;"></div>
<div id="bar3" class="bar" style="width:76%;"></div>
<div id="bar4" class="bar" style="width:100%;"></div>
</div>
You can change the width of individual bars easily with javascript (just change the width).
I know you said you're new, but you should take a look at the google visualization api. It's got some good stuff to do the kind of thing you might want.
http://code.google.com/apis/visualization/
There are two ways you could tackle this problem; generate the graph on the backend (probably using PHP in your case) or do it on the client side using javascript.
I'm not sure the specifics of doing it in PHP, as I don't really know the language, but I'm sure there is alot of info out there on graph generation in PHP.
For the javascript approach, I've used both flot (for jquery) and flotr (for prototype) before. I like them alot, and there is some good documentation and examples for both libraries on how to generate all kinds of charts, including bar charts.
Related
I tried to make a responsive card layout with even gap between each card , unfortunately bottom space not coming on card, but right side gap showing , can any one help how to achieve this scenario. below is my code
Html Code
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutAlign="space-around center" fxLayoutGap="25px">
<mat-card *ngFor="let member of members" fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" >
stack-blitz link
https://stackblitz.com/edit/card-responsive?file=app/card-overview-example.html
The problem seems to be the fxLayout="row wrap" functionality. the suggestion from the doc says to use fxLayoutGap="10px grid"but this works even less.
I have come up with this css3 which solved your problem. not very elegant, flex-layout-wise but this seem like a limitation
mat-card.mat-card {
margin-bottom: 10px;
}
I would like to be able to add picture that always shows at the top part of the screen. I want a bar that stays at the top of it all the time. I do not know how to do it but I believe YouTube has something like it. Except I want it without the content on the side because that is a little annoying.
In order to do this, you have to use absolute positioning. This requires you to use CSS with your HTML (if you are talking about web design).
Here is the CSS
img {
position: fixed;
left: 0px;
top: 0px;
}
Here is the HTML:
<img src="YOURIMAGE.jpg" height="100" width="100">
Not to be disrespectful, but it seems as though you are not familiar with web design. I would recommend looking at W3 schools and try to grasp some of the concepts there before you continue.
I've been working on this site http://minta.jvsoftware.com/ and I have a problem in FF/Linux, everything looks fine but the search button is showing at the bottom of the search box, I assume it's because the spacing of the elements in the top bar are too wide and since they're all floated to the left it jumps to the bottom for lack of space.
The problem is I can't debug properly since I don't have a linux distro available for testing (I used browsershots) so I was wondering if anyone on linux could point me in the right direction, I'm almost sure that if I reduce the right margin on the address it'll fix but I'm not sure by how much.
Thanks in advance!
The best way to make a horizontal menu that has a minimum of cross-browser hassles is to use the following pattern:
<div class="menu">
<ul>
<li>SOME TITLE</li>
<li>link1</li>
<li>2</li>
<li><input type="text" .../></li>
<li><input type="submit" class="submit" value="Submit"></li>
</ul>
</div>
CSS:
.menu ul, .menu li {
list-style=type:none;
padding:0;
margin:0
}
.menu li {
display:inline-block
}
.menu a {
display:block;
....other styles....
}
You started off this way in your menu for the store hours, then half-way you went to DIVs.
If you continue this pattern using <li> to wrap each item in your menu you'll find that things will work out fine.
Well the main issue was that I wasn't setting the text input's width in the css so the browser was rendering it with the default settings making it too large, but will definitely keep in mind Diodeus solution on using li instead of p tags for this kind of stuff.
I have some text in Photoshop & it's set to "crisp". When I put it on my site it doesn't quite look the same.
Does anything exist in CSS yet that I can use to make it crisp? Or not?
Or do you have any suggestions to achieve a similar effect?
Not only is it not possible, but different browsers on the market enforce different antialiasing settings, meaning that you can't get consistent results, even if they are not what you want.
For a good article on how the various browsers deal with font rendering, I'd suggest reading this: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
this is what I found on a big company's web site:
body, table, form {
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
background-color: transparent;
color: #333;
-webkit-font-smoothing: antialiased;}
What you're really asking is:
"Is it possible to control anti-aliasing from the web development perspective?"
The answer, for now, and for at least some time into the future (until OS/browser vendors start giving that kind of developmental control [don't hold your breath]) is undeniably: NO.
Forcing AA is a myth
No way to smooth text
Use images to simulate AA
Forcing anti-aliasing using css: Is this a myth?
Try This code snippet
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.