RSS Forums RSS
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 3007 | Replies: 18
Reply
Join Date: Mar 2007
Posts: 83
Reputation: rgtaylor is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 2
rgtaylor rgtaylor is offline Offline
Junior Poster in Training

Re: Trying to use not tables, only CSS, but can I?

  #11  
Mar 26th, 2007
We could comment better if you showed us a code sample so we could understand exactly how you implemented it, rather than assuming things from your post above.

However, one danger here is the term "fixed width"... if you want to fix widths, there are a large number of ways to implement it, but then you need to design with 2 caveats....

1, it should be centered in the screen or it will look bad...

2, it should be designed to look good on the smaller screens


there is also a 3rd issues which should be considered...
make the site's left and right have some kind of boarder to differentiate it from the huge amount of white space that I will see on my screen when I view the site...since my PC is set to 1680 x 1050...
just look at this forum site's left and right on a large screen to get the idea...
Reply With Quote  
Join Date: Mar 2007
Posts: 9
Reputation: wpcoe is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
wpcoe wpcoe is offline Offline
Newbie Poster

Re: Trying to use not tables, only CSS, but can I?

  #12  
Mar 26th, 2007
Originally Posted by rgtaylor View Post
We could comment better if you showed us a code sample so we could understand exactly how you implemented it, rather than assuming things from your post above.
That's why I included the link ( www.kecsvcs.com/test ) in the previous message. To see the code, just view the source in your browser. Perhaps wrongly, I thought that would be better than filling the forum with the different page's sources and the CSS style sheet?
However, one danger here is the term "fixed width"... if you want to fix widths, there are a large number of ways to implement it, but then you need to design with 2 caveats....

1, it should be centered in the screen or it will look bad...

2, it should be designed to look good on the smaller screens
It is centered and I sized it at 640px wide, realizing that 640x480 screens would need to scroll a little bit. I also realize that not all users with 800x600 resolutions and above will be viewing full-screen, but thought 640px wasn't *too* wide?
there is also a 3rd issues which should be considered...
make the site's left and right have some kind of boarder to differentiate it from the huge amount of white space that I will see on my screen when I view the site...since my PC is set to 1680 x 1050...
just look at this forum site's left and right on a large screen to get the idea...

Hmmm. What type of border? Is the background pattern I used adequate, or did you have something else in mind?

Ok, what the heck, here's all the source code and my style sheet. Happy scrolling!

style1.css:
html { overflow:scroll;}

#Content {
width:640px;
margin:5px auto;
background:#fff url(col_blue_bg.gif) repeat-y 400px 0;
padding-bottom:0px;
line-height:0px;
font-size:1px;
}

body { background:url(bg.gif);
font-family:Arial, Tahoma, Sans-serif;
background-color:#fff;
font-size:14px;
LINE-HEIGHT:130%;
text-align:center;
}

em {font-weight:bold; font-style:italic;}

img {padding:0; margin:0; border:0;}

.menu1on {
background:url(button.gif);
display:block;
padding-top:12px;
padding-bottom:12px;
color:#fff;
border-bottom:1px solid #fff;
}

.menu1 a
{ background:url(button.gif);
display:block;
text-decoration:none;
padding-top:12px;
padding-bottom:12px;
color:#fff;
border-bottom:1px solid #fff;
}

.menu1 a:hover, .menu1 a:active, .menu1 a:focus
{ background:url(button_press.gif); }

.menu1 ul {margin:0; padding:0; list-style-type:none;}

.menu1 li
{ float:left;
text-indent:0;
width:20%;
font-size:16px;
line-height:16px;
}

.leftcolumn
{ width:317px;
float:left;
color:#000;
text-align:left;
line-height:18px;
font-size:13px;
padding:40px;
border:0;
}

.rightcolumn
{ color:#fff;
font-size:13px;
font-style:italic;
line-height:18px;
padding-top:70px;
padding-bottom:20px;
}

.rightcolumn img {padding-bottom:40px}

.title1 {font-weight:bold; font-size:20px; line-height:120%;}

.title {font-weight:bold; font-size:20px; padding-left:40px;}

.title2 {font-weight:bold; font-size:20px; margin-bottom:20px; text-align:center;}

.service
{padding:0; line-height:16px; font-size:12px; text-align:left;}

.servicehead
{ background-color:#ffe599; line-height:16px; font-size:12px;

display:block;
font-weight:bold; width:300px; padding:10px 0 10px 0; margin:0 auto 10px auto;}

.service ul {margin-top:0;}


index.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>Welcome to KEC Bookkeeping Services, San Diego</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<link href="style1.css" rel="stylesheet" type="text/css">

<BODY><div id=Content>

<img src=logo_banner2.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">
<div class=menu1>
<ul>
<li class=menu1on>Welcome
<li><a href=services.htm>Services</a>
<li class=menu1on>&nbsp;
<li><a href=qb.htm>QuickBooks</a>
<li class=menu1on>&nbsp;
</ul></div>

<div class=leftcolumn>

<span class=title1>Welcome to KEC Bookkeeping Services Online</span><br>

<p><b>Dear Small Business Owner:</b>

<p>Hello! My name is Kathy, and I own and operate <b>KEC Services</b>, a small bookkeeping firm here
in San Diego.

<P>With over <em>30 years experience</em> in the field &ndash; including 15 years in the automotive field and 10 years with enrolled agents &ndash; I enjoy bookkeeping and working to help <em>small businesses</em> like yours.</P>

<P>My services are offered on a <b>part-time</b> (temporary or permanent) basis &ndash; as an <em>outside consultant</em> &ndash; to help you and your clients. <em>Flexible scheduling</em> is basic to my business &ndash; I even offer <em>free pickup and delivery!</em>

<P>Whether you have one, or several, employees or clients, if you need assistance preparing
<em>financial statements, payroll </em>or <em>bill paying</em>, my expertise and experience can work for you. I can work with you "behind the scenes" or directly with your clients.</P>

<P>Please give me a call when you or your clients need any help. I look forwarding to helping you!

<P>Sincerely,

<p>
K. E. Coe,<br>
Owner
</div>


<div class=rightcolumn>
<img src=kec7.jpg width="180" height="255" alt="Kathy, owner, KEC Bookkeeping Services, San Diego">

<img src=logo_blue_bg1.gif width="237" alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">

1666 Garnet Avenue, PMB #601<br>
San Diego CA 92109-3116
<p>(619) 285-1828<br>
fax (858) 273-0588<p>
e-mail: <a style=color:white href="mailto:kecsvcs@aol.com">kecsvcs@aol.com</a>
</div>
<div style=clear:both></div></div>

</BODY></HTML>

services.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>KEC Bookkeeping Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<link href="style1.css" rel="stylesheet" type="text/css">

<STYLE type="text/css">

.support
{ width:160px;
background-color:#fff;
color: #00f;
text-align:center;
padding:0 20px 0 20px;
font: 26px Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:30px;
}

.counton
{ position:relative;
margin:auto;
margin-top:-6px;
width:225px;
background-color:#f00;
color:#fff;
text-align:center;
padding:4px 20px 4px 20px;
font: 18px Arial, Helvetica, sans-serif;
font-weight:bold;
display:block;
}

.leftcolumn {width:367px; padding:40px 20px 20px 10px}

ul { list-style-type:square; }

</style></HEAD>
<BODY><div id=Content>

<img src=logo_banner2.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">
<div class=menu1>
<ul>
<li><a href=index.htm>Welcome</a>
<li class=menu1on>Services
<li class=menu1on>&nbsp;
<li><a href=qb.htm>QuickBooks</a>
<li class=menu1on>&nbsp;
</ul></div>

<div class=leftcolumn style=text-align:center;>

<div class=title2>KEC Bookkeeping Services</div>

<div class=servicehead>ACCOUNTING</div>

<div class=service>
<div STYLE="float:left; width :50%;">
<ul>
<li>Invoicing
<li>Bank Reconciliation
<li>Cash Receipts
<li>Cash Disbursements
<li>Accounts Receivable
<li>Accounts Payable

</ul></div>

<ul>
<li>General Ledger
<li>Payroll and Reports
<li>Preparing Financial Statements
<li>Sales Tax Reports
<li>New/Used Car Sales Journals
<li>Service/Warranty Sales Journals
</ul></div>

<span class=servicehead>GENERAL OFFICE</span>

<div class=service>
<div STYLE="float:left; width :50%;">
<ul>
<li>Telephone
<li>Typing/Filing
<li>Cashier

</ul></div>

<ul>
<li>Inventory Control
<li>Staff training
<li>Office Organization
</ul></div>

<span class=servicehead>COMPUTER</span>
<div class=service>

<span style="text-align:left; float:left; padding:0 35px 0 40px; width:30%;"><i>General Programs</i></span>

<span style="text-align:left; font-style:italic;">Accounting</span>

<div style="float:left; width:50%;">
<ul>
<li>WordStar
<li>WordPerfect
<li>Microsoft Word
<li>CalcStar
<li>Lotus 1-2-3
<li>Quattro Pro
<li>Excel
</ul></div>

<ul>
<li>TCS
<li>Dimensional Software
<li>Business Works
<li>OWP Plus
<li>Quick Books
<li>Quicken
<li>CFS Payroll/Sales Tax

</ul></div>

<div style="padding:10px 0 0 0;">
<span class=support>SUPPORT</span>

<span class=counton>YOU CAN COUNT ON</span></div>

</div>

<div class=rightcolumn>

<img src=kec7.jpg alt="Kathy, owner, KEC Bookkeeping Services, San Diego" width="180" height="255">

<img src=logo_blue_bg1.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert" width=237>

1666 Garnet Avenue, PMB #601<br>
San Diego CA 92109-3116
<p>(619) 285-1828<br>
fax (858) 273-0588<p>
e-mail:<a style=color:white href="mailto:kecsvcs@aol.com ">kecsvcs@aol.com</a>

</div>
<div style=clear:both></div>

</div>
</html>

qb.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-us">
<head><title>KEC Bookkeeping Services QuickBooks</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<link href="style1.css" rel="stylesheet" type="text/css">
<STYLE type="text/css">

.constr {padding:85px 0 85px 80px; font-style:italic; color:#f00;}

.constry {background-color: #ffe599; padding:105px 0 115px 80px; font-style:italic; color:#00f; margin:0}

.leftcolumn {padding:40px 0 20px 0; width:397px;}

</style></HEAD>

<BODY><div id=Content>

<img src=logo_banner2.gif alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">
<div class=menu1>
<ul>
<li><a href=index.htm>Welcome</a>
<li><a href=services.htm>Services</a>
<li class=menu1on>&nbsp;
<li class=menu1on>QuickBooks
<li class=menu1on>&nbsp;
</ul></div>

<div class=leftcolumn>
<span class=title>Intuit QuickBooks<sup>&reg;</sup></span>

<h3 class=constr> Under Construction ...<br> please check back later!</h3>
<h3 class=constry> Under Construction ...<br> please check back later!</h3>
</div>

<div class=rightcolumn>
<img src=kec7.jpg width="180" height="255" alt="Kathy, owner, KEC Bookkeeping Services, San Diego">

<img src=logo_blue_bg1.gif width="237" alt="KEC Bookkeeping Services, San Diego, QuickBooks expert">

1666 Garnet Avenue, PMB #601<br>
San Diego CA 92109-3116
<p>(619) 285-1828<br>
fax (858) 273-0588<p>
e-mail: <a style=color:white href="mailto:kecsvcs@aol.com">kecsvcs@aol.com</a>
</div>
<div style=clear:both></div></div>

</BODY></HTML>
Reply With Quote  
Join Date: Mar 2007
Posts: 17
Reputation: justinm is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 0
justinm justinm is offline Offline
Newbie Poster

Re: Trying to use not tables, only CSS, but can I?

  #13  
Mar 28th, 2007
Originally Posted by rgtaylor View Post
We could comment better if you showed us a code sample so we could understand exactly how you implemented it, rather than assuming things from your post above.

However, one danger here is the term "fixed width"... if you want to fix widths, there are a large number of ways to implement it, but then you need to design with 2 caveats....

1, it should be centered in the screen or it will look bad...

2, it should be designed to look good on the smaller screens


there is also a 3rd issues which should be considered...
make the site's left and right have some kind of boarder to differentiate it from the huge amount of white space that I will see on my screen when I view the site...since my PC is set to 1680 x 1050...
just look at this forum site's left and right on a large screen to get the idea...


true, you can desgign fixed width websites without needing to be centered, just preferred left aligned, and at least 800wide.

best sizes these days are 800-1024 wide, and a lot of sites that are centred are referring to pixel borders, and curved edges, adding to size. The only time percentages are needed in fixed width is when you expect the size of the page to be resized (i.e. small resolutions, windowed browsers etc.), but other than that you shouldn't use % unless you are using tables, and you want to force the width of one cell to its maximum width which can change depending on content in other cells. But still use fixed width for flow.
Last edited by justinm : Mar 28th, 2007 at 1:05 am.
Reply With Quote  
Join Date: Mar 2007
Posts: 83
Reputation: rgtaylor is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 2
rgtaylor rgtaylor is offline Offline
Junior Poster in Training

Re: Trying to use not tables, only CSS, but can I?

  #14  
Mar 28th, 2007
fixed width website that are left aligned, 1) shows Eurocentric design 2) still looks bad on large screen compared to a centered page...

CSS has a minHeight and minWidth and maxHeight and MaxWidth properties but they are not well supported yet...

I have used JS to simulate these functions in some sites, where JS calculated based on document.body.clientHeight and document.body.clientWidth... This way I can have minimum and maximum sizes, within this range I can handle things 1 way and outside these paratmeters I can handle things a different way... i.e. very tight screens become fixed width and very wide screen become fixed width, within the range I may have fixed width components with the page overall being % sizes... % sizes are specially valid when you have say 3 columns, 1 fixed (i.e. menu) and two variable which should share 50/50 or 60/40 etc. the remaining space...

I agree that you should probably code for 800x600 not too many people are using 640x480 anymore, most new machines won't even support that size anymore...

Also, I always expect users might resize my pages... if you don't think so, think again...
Reply With Quote  
Join Date: Mar 2007
Posts: 9
Reputation: wpcoe is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
wpcoe wpcoe is offline Offline
Newbie Poster

Re: Trying to use not tables, only CSS, but can I?

  #15  
Mar 28th, 2007
In my particular case, my sister's bookkeeping site, I considered what her clients might be using, and figured they probably are not state-of-the-art web geeks, and may well have older computer equipment. If they were high-tech and up-to-date on things, they probably already have their own bookkeeping/accounting software and/or accountant. I believe most of her existing clients are non-tech savvy, and that's the target profile I was aiming for, someone who might one day Google "bookkeeper San Diego" and come across her site. (SEO is another of my future projects.)

My main point of resistance at using JS, was that if they are using IE with default settings, which they I'm pretty sure they would be, they have to click three times to view site content:
  • once on the IE pop-up banner to get the menu,
  • once on the menu item to "View Blocked Content" and
  • once to clear the Security Warning dialog box
That's a lot of effort and doubt in the mind of an inexperienced internet user. The original "warning" could be enough to steer them clear from even viewing her site. "Why risk opening a virus-laden site?" is what they might be thinking.

If I were desiging a web site for, say, Epson Printers, I would probably assume a higher level of web sophistication and experience, but not for this site.

That said, I decided to hope that they were all at least at 800x600, but chose a size that wouldn't look *too* bad on 640x480.

OK, back to my current concern, using the "faux columns":

I'd appreciate any comments on how this technique dovetails with accessibility and w3 standards. Unless someone can shame me out of using this method, I like it because it avoids tables and JS.

Thanks for the great ideas and discussion so far!
Reply With Quote  
Join Date: Mar 2007
Posts: 17
Reputation: justinm is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 0
justinm justinm is offline Offline
Newbie Poster

Re: Trying to use not tables, only CSS, but can I?

  #16  
Mar 28th, 2007
I do also expect users to resize my pages, however I prefer it if the information does not get squashed or mangled/deformed. When I design something, I design it a specific way, and I dislike the fact of it looking, well ridiculous when the screen is resized to 300x200.
I do agree on % for content, I do still use it in that fashion, but primarily for expanding content. I am still learning CSS (I like div overflow, very nice!), but I am becoming rather efficient at developing sites without aids from either dreamweaver, or internet resources.

I do design in dreamweaver, and the only reason I do is because of color coding. I don't really bother about page validation or visual designs in dreamweaver (they usually are wrong/look wrong), and dreamweaver has the tendency to throw in some bs code too. Delete the header, redo it and your good

800x600 is just the go at the moment, it will be 1024x768 in at least 2-3 years once most computers have upgraded/improved resolutions. I don't know about Vista, but I would assume its default resolution to be 1024x768 or larger, and then again I could be wrong...

But the biggest thing I dislike, is IE. I hate that browser with a passion. BS <!--[If IE]-> statements, why can't Microsoft just design something that adheres to accepted standards for a change instead of being different. FF > IE, and its only 5mb, compared to IE's wonderful 70-80 odd...
Last edited by justinm : Mar 28th, 2007 at 7:30 am.
Reply With Quote  
Join Date: Mar 2007
Posts: 83
Reputation: rgtaylor is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 2
rgtaylor rgtaylor is offline Offline
Junior Poster in Training

Re: Trying to use not tables, only CSS, but can I?

  #17  
Mar 29th, 2007
Hey, I will look at what you have provided to see if I can find any serious problems with the method...

If you are using CSS and HTML and you are sure to include the "alt" etc. parameters for non-visual clients then you should have relatively few issues with accessibility.

The #1 problem on the web with regard to accessibility is the rampant use of tables for layout control...

#2 is lack of tooltip text and alternative text for links and images, respectively.

It is nice that you are concerned with accessibility, since so few people can think past their own browser for access issues...

If I find anything I will post a reply...

Good luck and happy coding ;-)
Reply With Quote  
Join Date: Mar 2007
Posts: 83
Reputation: rgtaylor is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 2
rgtaylor rgtaylor is offline Offline
Junior Poster in Training

Re: Trying to use not tables, only CSS, but can I?

  #18  
Mar 29th, 2007
I agree with your take on IE, in fact I setup FF as the default browser in all my machines... I just got a new Laptop at work Tuesday this week and the first thing I did, after setting up the network connection of course, was to install the latest verision of FF.

My other Laptop has FF, IE & Opera, I use the others just to ensure that the thin clients my company builds look correct in all 3 browsers... we have a policy of coding for commonality... We do not support custom code for specific browsers, and we talk our customers out of when they ask...

Customers like the "cool" things may be done on some browsers, but when they realize the added cost of coding that way, and the loss of market exposure by introducing atrificial limitations, they usually don't feel it is worth the real costs to do it... they usually agree to a standards compliant, similar / functionally compatable method.

I use an editor with good text highlighting, color coding, and code completion for several langauges, including CSS, HTML, Java, JSP, PHP, Perl, C, C++ etc... It is extensible so I can add more if I need to...

It has 2 preview options, 1 previews in a pane in the application but uses the PC's browser engine to do the rendering... the other launches the browser separately loading the code... it does this even if you haven't saved it yet, which is a cool feature... once it looks right in your preferred browser you can save and then launch manually into any other browser, of course...

The first thing I do when I get a code file that was wirtten with poor format is to remove all the tabs... by selecting all the text and pushing shift+tab until everything is flush to the left... then I reformat the code while I read it, so I 1) understand the code completely and 2) fully understand the layout and placement of each part...

When I am done with my first read through, the page is format the way I prefer...

As for old machines, if they have old PCs they may have old browsers, if they have old browsers, they won't have the default IE JS blocking function....

I worked with a customer who is a MAJOR insurance/financial market leader... can't say names... they have about 15,000 PCs in their main business offices alone... They wanted to upgrade their thin client applications to my latest versions... BUT, the deal was eventually postponed indefinitely, because their machines are STILL Windows 98.... They can't even use the modern browsers... They started a plan to upgrade, but that plan was going to take several years to complete the upgrade alone.... They should be done late this year or early next year... THEN, I can talk to them again about moving ahead with the upgrade of my systems....

They still had 640x480 on 14" screens all over the place... But that is an extreme case... MOST companies I deal with are using larger than 1024x768, most have a minimum of 1280x1024... I am set to 1680 x 1050 on my laptop... But I always run my tests through 640x480 upto 1280x768... If you want things to look the best for 90% of the market, code for 800x600 and center it... the bigger browsers will just havce varying amounts of border space on the right and left of the content area... which is usually a visually acceptable, if not appealing way...

On my screen right now, this web site has about 4 inches of light-grey on each side of the site content... it doesn't look too bad
Reply With Quote  
Join Date: Mar 2007
Posts: 17
Reputation: justinm is an unknown quantity at this point 
Rep Power: 2
Solved Threads: 0
justinm justinm is offline Offline
Newbie Poster

Re: Trying to use not tables, only CSS, but can I?

  #19  
Mar 29th, 2007
640x480 14" damn! that is plain awful!

haha yeah, first thing i do after setting up and installing network is straight away to firefox to get latest version, the MS updates.

Centred is the way to go at the moment with webdesign. Pixelated borders etc. offer a more professional look, shiny orbs offer attractiveness etc. Side aligned can look sloppy, but can also look good depending...

Are you using a program called AceHTML or JCreator?? JCreator Lite is fantastic for Java, C etc. Dreamweaver is a little big, but I suppose its for its cross product support, and its many useless libraries of rubbish that are really needed by beginners only. The inbuilt FTP is very slow

I am however interested in the software you use, if it is commercial, free to test, or custom built...
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 9:11 am.
Newsletter Archive - Sitemap - Privacy Statement - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC