graphics for tables

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

hey fellas, I've posted once before, but still very new to the forumns. anyways, I wanna use graphics (as in mainly pictures) for my site. making sections and navigation areas bordered off like tables, yet using gfx to do it. this site is the site that I've been told to base my project site off of. the sections such as 'site highlights' and 'Online Services' are the parts i'm talking about. that gfx border. I know it's possible to make your own. yet, I am VERY unknowladgable with that stuff. I'm really stuck w/o it. any help would be MUCH appreciated. especially from the nova skoe kid Wink

you're the man mjpliv. but so will anybody else that helps out.

much appreciated,
' thrifty -

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

These graphics are easily made using Microsoft Paint. If you read the source code for the page you referenced and match the code to the results you will notice it is just a bunch of nested tables. They use left hand and right hand curves at the top of the table data and use a matching background color with the data entered as a contrasting color. The graphics for the sides of the tables are just colored vertical lines.

Here is a similar effect on a simpler page I did for some friends of mine (a work in progress).

http://www.buildersmatrix.com/nugget

Have a look at the source code and help yourself to the little graphics used. Open them up in you Paint program. Its actually pretty simple to do. Try assembling a few simple tables using this type of graphic and let us know how you make out.

And I can only wish I was still a kid! Older than dirt I am afraid!

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

w00p! thanks a whole lot fella. I def apprec. just another reason to respect our elders, eh? anyways, I'm gonna work on getting text over the table. the example page you gave was correct and all, but as far as using the table gfx that I made, I would suspect there would be problems using it as a background img in a <td> tag.I'll give it a shot though. I can't paste the gfx that I made, but it is basicly like the one on the example page I gave you. anyways, looking at their code I can tell I'm gonna be in for a lot of work. :/ oh well, thanks for the help! I'll be posting again probably...

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

You could save yourself a bit of work and use the graphics from the site you are looking at. Change the color or reshape to make them your own. Just use them as a template -

http://miamidade.gov/wps/skins/html/MiamiDade_Blue/header_blue_right.gif

http://miamidade.gov/wps/skins/html/MiamiDade_Blue/header_blue_left.gif

http://miamidade.gov/wps/skins/html/MiamiDade_Blue/left_corner_blue.gif

http://miamidade.gov/wps/skins/html/MiamiDade_Blue/right_corner_blue.gif

http://miamidade.gov/wps/skins/html/MiamiDade_Blue/bg_blue_white.gif

Have a look at this code from the page. You can see how they use a nested table as table data using these five GIFS (two top and three bottom) to make the top and bottom table rows. The center of the top row is just a table data cell with a matching color background and text.

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

awesome deal. I was doin that, and lookin at the exact samething, the same time you sent it. everythings workin out fine. when I get a template worked out for the site I'll let yu take a look at what yu helped me out with.! Very Happy

quick question though, can you explain the 'nowrap' that's in part of the code, as well as 'class'. just more specificly what it's purpose is. I may have a clue, but I wanna just fully understand every bit of this code so I can really grasp it and use it, instead the traditional "c + p = n00b imager" deal. thanks a lot man, again I appreciate it. Smile

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

You will notice in the head section of the HTML that they reference style sheets saved elsewhere on the server. Within these files you would fine all the classes and style defined - or would if you had access to them.

References to "class" allows the code writer to define the way an object should appear in one location and use it over and over again. Kind of like a virtual rubber stamp. Rather than typing out all of the criteria for a text string to get the right size, color, font, justification and weight every time you use the font tag you would just do it once and define it as a "class". Thats the simplified version anyway. For more information have a look at -

http://www.htmlcodetutorial.com/character_famsupp_200.html

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

alright, cool deal. I see what you mean. seems like it'd save a BUNCH of time esp with nested tables. I'll need a lot of practice and help on that I do believe. I'm having troubles with some spacing issues.

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

alright, so, I got the table worked out, but there's a prob with the verticle border. you may have explained how it is there. but, alas, I have no idea.

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

The following code start about 20 lines down from the top of the code shown in the previous post -

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

awesome! good deal. ok, I was thinking that. but, bad news is, that means the reason why what I was trying wasn't working is because of my style settings in my <head>. they are mischeiviously as follows:

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

Create different styles for different parts of the website.

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

hmm, well. I duno. looking at the givin code it only looks like it's changing links and fonts. That doesn't seem to be my problem. it seems to be overwriting the background somehow or something. Behind "Online Services" and the apperant absence of any verticle column on the table is obviously showing this. I dunno, well, I guess I'll give you some code as to what I've got. right now I've headached out, and so it's hard to focus on and see where I'm causing the conflict.

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

Have you got a test site up and running yet that I can look at?

DCCS - The Apprentice · Joined: 12 Jul 2004 Posts: 68 Location: DC

I'm gonna try and see if they'll let me publish it on the server. as for now though, no. mm, I can send you a screenshot image. that's pretty limited, but, as for the few content and such that I have, it may be helpful.

mjpliv · Joined: 11 May 2004 Posts: 406 Location: Nova Scotia

Whatever you have would be helpfull. I will look at it after lunch