Skip to main content

Banner Sponsors

No Monkey Biz - Domain name registration, hosting
Intercal Trading Group - Your mohair supplier

Pages:
Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

I'm finally learning html, as in "coding by hand."  I've been relying on my WYSIWYG site creation program to write my html code FOR me for my website, and that's all well and good, but I've wanted a custom designed auction template for some time.  And the only way to go with that, AND retain total creative control, AND match it to my website, AND "try on" various arrangements and outcomes, is to do it myself. 

So the inevitable has arrived, and I've spent the last three INCREDIBLY frustrating days swearing at my computer, crying, stomping around my house like a petulant toddler, learning FTP software and procedures, screwing up my website by accidentally deleting my index.htm file from my host server, fixing THAT, loathing firewalls, loathing tech "support" even MORE (where's the "support" part???), and hand-coding my first EVER bit of html.  So far, so good... kinda.  I have a big headache.  I want some chocolate, a blankie, and my mommy.

Despite seeking answers to most of my questions with the tenacity of a bulldog, I'm still having some trouble with nested tables and cellpadding/cellspacing concepts and need to ask SOMEONE my questions on this stuff, directly.  But I can't remember which of you here knows this stuff, so I don't know where to direct my question.

Anybody... ???

Thanks in advance!  I know SOMEONE here will be able to answer my question!

If you'd like I'll continue to post on this to the board so others can potentially learn from it... otherwise I'll ask privately.

bearlyart Canna Bear Paint
NY
Posts: 749

Fire when ready, I will help as best as I am able  bear_original

Interestingly enough, I've been working on a website overhaul of my own recently, so it's all at the forefront of my noggin.  Kudos to you for picking up HTML and all those other goodies!  The learning curve is a pain, but once you learn certain things, it's not so bad.

Cheers,
Kelly

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Oh, yay!

Okay, so here goes...

GOAL:  To get the TEXT on this template page "narrower."  In other words, I want to keep the three table margins as they currently exist (dark blue outside, light blue middle, brown inner and main.)   But I want there to be a larger space (this is the "cellpadding", right?) between the edges of the inner brown table, and the TEXT. In other words, if you're thinking like a WORD .doc file... I want to increase the margin size, assuming the brown table is the "paper."

Here's a screen cap so you know what I'm talking about:

htmlquestion1.jpg

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Now...

My understanding (a dim one at that, I admit) is that this requires an adjustment to the "cellpadding" number.  My understanding (equally dim) is that "cellspacing" refers to the way the tables themselves, and not the text IN them, arrange themselves to one another.

Here are my current table settings, and please don't laugh if I did this wrong, as it is truly and literally my first ever attempt at writing code.  I followed a tutorial I found online for creating nested tables.  It seems to work okay if I test it in a browser; in fact, that's how I got the screen cap pictured above. 

I spaced all my code out, paragraph-style, because it's easier for me to refer to in that way; I know it's not relevant to how the code is read.

<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#50869E">
<tr>
<td>

<table width="90%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#C8DDEE">
<tr>
<td align="center">

<table width="75%" align="center" cellspacing="0" cellpadding="72" border="0" bgcolor="#B4A296">
<tr>
<td align="center">

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Continuing on...

So I've tried to variously adjust the cellpadding, especially for the inner table (the brown one), but what keeps happening when I increase the cellpadding number (which, to me, suggests a LARGER "margin") is NOT that I get a larger margin... but isntead, that the OTHER tables (the colored borders, light blue and dark blue) get squished smaller and smaller, get narrower and narrower.

Rather than ending up with bigger margins on the brown table... I end up with a LARGER brown area and SMALLER blue areas.

What am I doing wrong????

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

OH, and [size=25]THANK YOU!!![/size]

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

PS  One more question...

Given that I've used percentages for my table sizing, rather than rigidly fixed pixel numbers... will the size of the photos that I include in my template effect the size of the tables?

What I mean by that is... since the tables will adjust according to each viewer's resolution settings (won't they?  Isn't that the point of using percentages in the first place?  Do you see how I'm still fuzzy on this stuff?), but the photo sizing will NOT... does that mean that, if I use photos that are too big for someone with a low resolution, everything will get all screwy?

Man.  I need more than chocolate, blankies, and mommies right now. 

Anybody know how to make a Manhatten???

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Am I the only one noticing that I'm talking to myself?

:crackup:  :crackup:  :crackup:

bearlyart Canna Bear Paint
NY
Posts: 749

Sorry Shelli, dinner break this end  bear_original

It's going to take a few minutes to read this, hang tight!

Cheers,
Kelly

kbonsall Kim-Bee Bears
Pennsylvania
Posts: 5,645

LOL... yes, I am noticing LOL... :crackup:  :crackup:

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Hurry up.

bear_tongue  bear_grin  bear_flower

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Kelly... it might be helpful for you to know that I have a rather large image, like eight inches large, at both the top and bottom of my template.  Maybe what's happening is that the "margins" can't be any smaller than the "margins" created by the edges of those PHOTOS... and that's why, rather than bringing my text inward, it's pushing the edges of the brown table outward.

???

I don't know what the heck I'm talking about.  At least now, though, somebody is listening and watching while I slowly go insane...

bear_original

Dilu Posts: 8,574

a037.gif


thinking of you, Shell.....

bearlyart Canna Bear Paint
NY
Posts: 749

Hmmm, where to begin.  The beginning, I suppose.  Actually, you're very correct in all of this.  Cellpadding expands the amount of space between the cell and its contents (the text).  Cellspacing expands the distance between two cells <td></td><td></td>.  If you are only working with ONE cell here, which it looks like you are, cellpadding and cellspacing will accomplish pretty much the same thing for you.  But technically yes, it is cellpadding that you want.

Your table code is absolutely correct to start three nested tables.  And yes, increasing the cellpadding in the central table should give you exactly what you want.  HOWEVER (and I see from your most recent post, I think you've figurd this out), the width it can shrink inwards is affected by the WIDEST content in the cell (an image).  Remember when calculating how much space your cell will take on the screen, that you're telling it to pad that cellpadding on both sides of your widest image.  (I'm taking random numbers for this example).  So if your widest image is 800 pixels wide, and you tell it to add 100 pixels on each side, your central cell cannot be smaller than 1000 pixels.  If your browser resolution is set smaller than that (let's say 800 pixels across), it is going to compress the outer tables until they disappear completely off the screen, and eventually all you'll see will be the central table.  Try it with your code, tell it to add a huge number like 400 cellpadding or something, the other tables should disappear. 

Let me post more separately so you don't explode waiting  bear_original
Kelly

shantell Apple Dumpling Designs
Willamette Valley Oregon
Posts: 3,128

I've spent the last three INCREDIBLY frustrating days swearing at my computer, crying, stomping around my house like a petulant toddler.

I have nothing important to add EXCEPT...that is it very reassuring to know that I'm not the only 40+ year old woman who does these thing!!!

:crackup:   :crackup:   :crackup:

Good Luck Shelli!!

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

More like this, Dilu...

GuyWithComputerIssues.gif

SueAnn Past Time Bears
Double Oak, Texas
Posts: 22,134

SueAnn Help Advisor, Banner Sponsor

bear_shocked  bear_shocked  bear_shocked  bear_shocked  :crackup:  :crackup:  :crackup:  :crackup:  :crackup:

bearlyart Canna Bear Paint
NY
Posts: 749

Adding to the last post.  Easiest way to get around your problem without changing your images... add another nested table for your text to push it farther away from the blue edge, just make it an appropriate percentage smaller than your last table at 75% (for example 60%).

<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#50869E">
<tr>
<td>

<table width="90%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#C8DDEE">
<tr>
<td align="center">

<table width="75%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#B4A296">
<tr>
<td align="center">
   
<table width="60%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#B4A296>
<tr>
<td align="center">
blahblahblahblahtext

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Kelly, thanks for verifying that I'm on the right track, generally speaking.  I totally understand, now that you've explained it to me!, that the margins can't be narrower than my widest image.  I didn't realize that the images played a part in setting those margins but duh, I guess it's ALL the table data that's being directed by that cellpadding number, eh?

I don't understand your suggestion, though, and I'm sure this has to do with ME, not understanding... and not with your suggestion. bear_original

How does creating an extra table get me around the problem of using images that are too wide for the margins I'd ideally like to use?  Wouldn't I still have to place my images in that new table, for them to be visible?

This is actually kinda a nitpick point with me... I think the template looks pretty dang good as it is.  But it drives me BONKERS when I WANT to do something and for the life of me, no matter how long I try, I just can't.

I've been sitting at this stinking computer for so long -- I actually went to sleep the other night at 5:00 a.m. over this stuff, it was driving me THAT nuts! -- that my butt has turned to stone.

bearlyart Canna Bear Paint
NY
Posts: 749

Regarding using percentages for tables versus fixed numbers...

Yes, the size of the images you use in your tables can indeed affect them.  We saw that above with a wide image + an increased cellpadding number pushing the edges of your central table out so far they shrunk the outer tables.  So if your images are VERY large (if you are designing with your images at the max width for your tables on a monitor set at a high resolution), then everyone with a monitor set at a lower resolution will experience distortion of the tables.  The central table will bulge out, and so on.

Now it is possible to combine percentages and fixed values.   Your outer tables can stay at percentages so that they will always cover the outer edge of every viewer's screen, no matter what their resolution.  Try experimenting with a fixed number for your central table.  If all you want in the innermost table is a narrow row of text, set the width value on the fourth table to width="450", for example, and see if you like the results. 

Forgot to add earlier, make sure you ditch the cellpadding number in the third table if you add the fourth table... 

Kelly

shantell Apple Dumpling Designs
Willamette Valley Oregon
Posts: 3,128

Once again....I read with great interest....my eyes say "hey, I kinda think I get that"...then it gets to my brain and "blah blah blah blah"

fribblesltd fribbles, ltd.
Kalispell, Montana
Posts: 679

..I was about to chime in with the same thing.  Also, have you tried to just use the code for margins?  You stick in your table code..

<TABLE TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0>

..this link is full of helpful tips.

http://www.htmlcodetutorial.com/



Amelia

bearlyart Canna Bear Paint
NY
Posts: 749
Shelli wrote:

How does creating an extra table get me around the problem of using images that are too wide for the margins I'd ideally like to use?  Wouldn't I still have to place my images in that new table, for them to be visible?

Actually, no.  Leave the wide images where they are in the third table.  Eliminate the cellpadding number in the third table, so put cellpadding and cellspacing at zero.  Going back to the four table snippet of code I posted earlier, check out what I added in the third table.  I think you said your wide images were at the top and bottom of the page, so it would go like this...  Inside the third table, your first row <tr> and the cell in that row <td> would hold the image at the top of the page.  Close that </td> and </tr>.  The next row <tr> and cell <td> in the same third table holds the fourth table with all your text.  Close the </td> and </tr>.  The last row <tr> and <td> in the third table in your last wide image, then close it too </td></tr>.  Hope this helps! Kelly

<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#50869E">
<tr>
<td>

      <table width="90%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#C8DDEE">
      <tr>
      <td align="center">

            <table width="75%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#B4A296">
            <tr>
            <td align="center">
                  <img src="here is your big image at the top of the page.jpg">
            </td>
            </tr>
            <tr>
            <td>
   
                  <table width="60%" align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#B4A296>
                  <tr>
                  <td align="center">
                               Here's your fourth table with all the text
                  </td>
                  </tr>
                  </table>
            </td>
            </tr>
            <tr>
            <td align="center">
                  <img src="here is your big image at the bottom of the page.jpg">
            </td>
            </tr>
            </table>
      </table>
</table>

Shelli SHELLI MAKES
Chico, California
Posts: 9,939
Website

Shelli Retired Help Advisor, Banner Sponsor

Shantell, it's really not easy, and I'd guess that I've spent maybe 80 hours or more over the last few days reading tutorials, troubleshooting problems, testing, checking, looking at the code for other templates I like, to see how "they" did it -- for example, that's how I learned to create a LINK to my EMAIL using html code.  It's a huge time investment!

Today hubby is bringing home a real treat for me -- a cheat sheet from Barnes & Noble, laminated and everything!, with ten bajillion more codes than any sane person would ever want to use!  What is WRONG with me!  I could have asked for a Frappucino instead!

It's absolutely NOT easy or clear, or concise, or logical, to learn this stuff.

Can you make any sense of this gobbledygook at first glance?  Cause... I sure can't!

<a href="http://hub.ebay.com/buy"><img border="0" alt="Shop for items" title="Shop for items" src="http://pics.ebaystatic.com/aw/pics/navbar/buyOn.gif" align=""></a><a href="http://sell.ebay.com/sell"><img border="0" alt="Sell your item" title="Sell your item" src="http://pics.ebaystatic.com/aw/pics/navbar/sell.gif" align=""></a><a href="http://my.ebay.com/ws/eBayISAPI.dll?MyeBay"><img border="0" alt="Track your eBay activities" title="Track your eBay activities" src="http://pics.ebaystatic.com/aw/pics/navbar/myebay.gif" align=""></a><a href="http://hub.ebay.com/community"><img border="0" alt="Learn, connect, and stay informed-for business and for fun" title="Learn, connect, and stay informed-for business and for fun" src="http://pics.ebaystatic.com/aw/pics/navbar/comm.gif" align=""></a><a href="http://pages.ebay.com/help/index.html"><img border="0" alt="Get help, find answers and contact Customer Support" title="Get help, find answers and contact Customer Support" src="http://pics.ebaystatic.com/aw/pics/navbar/help.gif" align=""></a></td><td align="right" class="novisited" nowrap valign="top"><span class="ebay"><a class="standard" style="margin:0 12px 0 10px;display:block" href="http://search.ebay.com/ws/search/AdvSearch?sofindtype=1&amp;ssPageName=h:h:advsearch:US">Advanced Search</a></span></td></tr><tr><td bgcolor="#000099" colspan="4" height="1"><img src="http://pics.ebaystatic.com/aw/pics/s.gif" height="1"></td></tr></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr valign="top"><td class="navigation" nowrap><br><table border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table><script language="JavaScript">

This excerpt, by the way, is entirely beyond me and will stay that way for a goodly while.  Borrowed from one of my favorite glassbeadmaker's auctions on eBay.

Anyway... my point is, if you want to learn this stuff, and I mean really LEARN it, which I haven't been willing to do because I KNEW it would drive me to the brink of my sanity, you really have just got to sit down with a GIANT bag of Reese's peanut butter cup minis and a huge tumbler of water, and dig in for days on end.  And even then, you're going... "Gawd, I'm such a rock star!  Look what I've learned!"

And when you test it in a browser, what you've accomplished -- your huge, amazing achievement! -- is that you've made, like, a big green rectangle, with the words "My Auction" on the top.

bear_noexpression

It's all learnable and do-able, really.  I'm no better or smarter than anybody else.  Kelly is, but I'm not.

bear_tongue

I'm just saying... don't get discouraged.  This is wacky complicated stuff and not nearly intuitive at all.  It just takes time... something most of us have in only very short supply.

:hug:

bearlyart Canna Bear Paint
NY
Posts: 749

At some point though, you need to design for MOST people and not every possible monitor configuration.  (The latter is impossible.)  Look up data on the most popular monitor resolution settings, and don't even worry about the people with miniscule screen settings, the worst that will happen is your blue tables may disappear for them.  And then there's the group of people surfing on handheld devices...  LOL!

Pages:

Board footer

Powered by FluxBB

Banner Sponsors


Tedsby - Handmade teddy bears and other cute stuffed animals. Hundreds of teddy artists from all over the world and thousands of OOAK creations.
Johnna's Mohair Store - Specializing in hand dyed mohair and alpaca