The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with creating a bar graph?
vbx
post Jun 28 2014, 03:39 PM
Post #1





Group: Members
Posts: 3
Joined: 28-June 14
Member No.: 21,162



Hi,

I'm trying to recreate a bar graph as seen in this about page below. Any here know how this is done? Any help would be appreciated. I understand an easy way out would to just create an image version in photoshop but this would be easier to update and skill set changes.

Thanks!

http://www.andrewreifman.com/#

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2014, 04:46 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,536
Joined: 9-August 06
Member No.: 6



Fun! What about this? I didn't spend too long time on font sizes, margins and such. But as a start maybe?

CODE

#graph      { width: 450px;
              padding: 1em 2.25em 1em 1em;
              background: #bec7c9; color: #626d6f;
              font: bold 150% Arial, sans-serif }
#ps         { width: 90% }
#ill        { width: 80% }
#html       { width: 85% }

#graph h3   { font-size: 100%;
              margin: 0 0 1em;
              border-bottom: 2px solid }
#graph p    { font-size: 50%;
              margin: .6em 0 0;
              border-top: 2px solid }

#ps,#ill,#html
            { background: #626d6f; color: #bec7c9;
              font-size: 60%;
              margin-bottom: .3em; padding: .2em;
              position: relative }
#ps span,#ill span,#html span
            { position: absolute; right: -2.5em;
              background: transparent; color: #626d6f  }



HTML
<div id="graph">
<h3>SKILL SET</h3>
<div id="ps">
PHOTOSHOP <span>90%</span>
</div>
<div id="ill">
ILLUSTRATOR <span>80%</span>
</div>
<div id="html">
HTML/CSS <span>85%</span>
</div>
<p>
LEVEL OF SKILL (MEASURED IN AWESOME)</p>
</div>


You'd only need to edit this bit as your skills improve. And the actual text in the graphs of course.
CODE
#ps         { width: 90% }
#ill        { width: 80% }
#html       { width: 85% }
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vbx
post Jun 29 2014, 01:26 AM
Post #3





Group: Members
Posts: 3
Joined: 28-June 14
Member No.: 21,162



QUOTE(pandy @ Jun 28 2014, 04:46 PM) *

Fun! What about this? I didn't spend too long time on font sizes, margins and such. But as a start maybe?



OMG. You are AWESOME! Thank you!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 29 2014, 05:05 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,536
Joined: 9-August 06
Member No.: 6



You like? biggrin.gif

One thing, I did a trick with the ems. I hope I was thinking right, it seems to work. The right padding on #graph is to make room for the positioned SPANs outside the graphs. To position the spans right: -2.5em seemed about right. I got the 2.25em padding on #graph by multiplying 2.5 with 0.9 since 0.9 in the factor between the font-sizes. I'm still not totally sure I was thinking right there. I think it looks like everything scales about right when I change the font size, but you can play with that if you find that it doesn't. And if you change font sizes you also need to modify that padding. Trial and error actually works pretty well for things like this if the math fails. wink.gif
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 29 2014, 08:21 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,536
Joined: 9-August 06
Member No.: 6



Forgot to say that maybe you rather want to use em or % for the width of #graph. Depends on your layout. But it must have a width.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Jun 29 2014, 08:50 PM
Post #6


This is My Life
*******

Group: Members
Posts: 1,125
Joined: 24-August 06
From: t-dot
Member No.: 16



Google Charts
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 30 2014, 04:41 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,296
Joined: 10-August 06
Member No.: 7



QUOTE(vbx @ Jun 28 2014, 10:39 PM) *

I'm trying to recreate a bar graph as seen in this about page below.

Seems that each such bar must be at least as long as its label text, or the graph will become distorted.

QUOTE

That site doesn't seem to work without javascript, also you can't bookmark the pages. Maybe the owner should contemplate an accessibility bar... tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
vbx
post Jul 1 2014, 02:06 AM
Post #8





Group: Members
Posts: 3
Joined: 28-June 14
Member No.: 21,162



Ok, I ended up just stealing the css off his site. LOL. My site is a mess on the coding part, but looking at it from the outside. It looks okay.
I should learn some coding.

Now, I am having trouble with my Education section. How do I add a Space between two texts?

For example.

Goldenwest College - Huntington Beach, CA 2012-2014

How do I get the year to align to the right? I did it the wrong way, but there has to be a better way using CSS.

I cheated by doing this.

Goldenwest College - Huntington Beach, CA <span style="margin-left:50px"> 2012-2014 </span>

Yeah, it's very ugly.

This post has been edited by vbx: Jul 1 2014, 02:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd February 2020 - 10:32 AM