Some website size questions

Factual Questions
101

It looks like you leapt into a deep end. You wanted something simple that you could easily have figured out if you’d learned HTML step by step over a period of weeks. However, HTML is now coming close to being superceded, so a lot of the recommendations were coming from a more modern ‘consider the future’ approach.

In the end, most of the things you wanted to achieve can easily be done with basic HTML, which is what you have discovered. Sometimes, even if it isn’t elegant or easily adapted for the future, it’s the correct answer; because it gets it done.

102

On the other hand, he’s now managed to learn something new like CSS and have fun during the process. Something that happens rare enough that it should be rejoiced for. I’m sure after the end product is made, it will turn out that he had to make several unneccesary detours but if he never made those detours, the final site most likely would not have ended up like this. He now has the knowledge and appreciation of all these new features so that if he ever decides to make a page in the future, he can choose whatever tools are appropriate out of his ever expanding tool box.

103

Well guys, I was trying not to bug you too much, but I need some input.

I’ve done the graphics, I’ve fixed 95% of the glitches, I just got the little comment form working, and I’m plugging in some of the content.

http://www.subtechbeats.com/final.html

I was thinking about using an image button on the contact us page instead of the generic “windows” button. I’ve seen some pros and cons, any suggestions?

104

The site looks really good!

I think you should go with a custom button for the contact page. The standard browser buttons (mine are from Mozilla on Linux, so I won’t say Windows buttons) look sort of lost in among the rest of the cool graphics.

105

FTR, no and yes.

The last version of HTML (which the W3C has declared WILL be the last version of HTML: see below), version 4.01, lists the

iframe element with no notes about deprecation. But then again, that was five years ago.

Since that time, however, HTML has been reformulated as an instance of XML (the generic web content markup language, where you can make up your own tag names) called XHTML 1.0. XHTML is now the “official” HTML, and all future advances to the language will be made here.

Furthermore, it was agreed amongst the powers that be that having each browser support a hodgepodge of tags and attributes was not a good thing, so XHTML was broken up into sets of related tags and attributes called modules. This way, a future browser manufacturer will state that their product supports modules X, Y and Z, and the public (who, of course has been spending their precious free time keeping up with all of this) will know the browser’s capabilities, because they’re not supposed to say they support a module if they don’t support all its tags and attributes.

That done, XHTML was (and from now on, will be) re-published with modules in mind, as XHTML 1.1. Along the way, styling elements and attributes are being left by the side of the road, their functions being picked up by the styling languages CSS and XSLT.

So far, no worries, as IFRAMES have been included all down the line.

HOWEVER, the in-progress XHTML 2.0 makes no mention of frames. Whither frames? They are being addressed in ANOTHER recommendation in progress, XFrames, which seems to be languishing, perhaps due to the fact that frames are falling out of favor with many web designers. At a cursory glance, however, it doesn’t seem to mention Iframes either.

So it looks as though Iframes may eventually be headed for the trash-heap.

106

Thanks Scot, I’ll take that into consideration when I do a redesign in 6 months or so.

Thanks Mort, I’m pretty happy with it so far. I agree, I’m itching to do some custom buttons, so images here we go.

107

The site is up people, thanks for all the help. I still have a good deal to do, but between the old and the new, the files were getting confusing, so I nuked the old one and decided to finish the new one on the fly.

Anyhoo, I have another question. The appearance of the html contact form is driving me nuts, I have to change it somehow. I’ve figured out that I can stick a background in the table the form is in, but is it wise to? I see that netscape and IE support table backgrounds, but what about mozilla and others? Also I know I can change the colors of the form elements, but is there a way to get rid of the inner bevel? I want the text inputs to look flat.

I’ve activated the table border on the contact page incase anyone wants a look.

Click here for the site

As always, thanks.

108

Your ContactUs page is squirrelly. The light blue background repeats horizontally and vertically on Mozzie and IE.

109

Yeah, I should have mentioned that. I made a test image to throw up to see if the table background code worked. I’ll fit the image to the table, or vice versa, but I hadn’t fixed it yet because I figured that was the least of my problems. :stuck_out_tongue:

I found some css code the might get rid of the element bevels, I’m messing with it now.

Aside of the current funky look, do I get technical clearance to use a background in my table?

110

To change the appearance of form elements, you WILL need to use CSS. No way around it.

Styles on form elements work in all the browsers AFAIK. But they don’t all work in the same way. The below is an example of tidy textboxes with a little black border and a white background. The Textarea style has IE-specific style elements to it (that may work in Mozilla, I didn’t try) that change the scrollbar.



<style>
.textbox
{
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #000000 1px solid;
    FONT-SIZE: 12px;
    BORDER-LEFT: #000000 1px solid;
    COLOR: #000000;
    BORDER-BOTTOM: #000000 1px solid;
    FONT-FAMILY: Arial, Helvetica, Sans-serif;
    BACKGROUND-COLOR: #ffffff
}
.textarea
{
    BORDER-RIGHT: #000000 1px solid;
    BORDER-TOP: #000000 1px solid;
    FONT-SIZE: 12px;
    BORDER-LEFT: #000000 1px solid;
    COLOR: #000000;
    BORDER-BOTTOM: #000000 1px solid;
    FONT-FAMILY: Arial, Helvetica, Sans-serif;
    BACKGROUND-COLOR: #ffffff
   scrollbar-base-color : Black;
   scrollbar-arrow-color : White;
   scrollbar-highlight-color : White;
   scrollbar-face-color : Black;
   scrollbar-shadow-color : Black;
   scrollbar-track-color : Black;
}
</style>

When you write your form elements:



<input type=text name=elementname class=textbox size=30>
<textarea name=elementname2 class=textarea cols=24 rows=10></textarea>

You can also apply those styles to the submit button in lieu of using images. I haven’t seen a problem with image buttons in my recent travels tho.

As for images as table backgrounds, the only browsers that have problems witht hat are pre-6 or 7 Netscape.

If you’re really concerned, you need to go download Mozilla, Opera, a 6-series of Netscape and a 4-series of Netscape. You are allowed to have them all on your computer, it won’t hurt. Here’s a nice netscape archive

With your layout on the form page, I suggest making 4 graphics that represent the “rounded corners” of that square, lay them out in a table with a big cell in the middle with a blue BG that holds your form. Such as:



<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td align=right width=1><img src=top_right.gif></td>
<td bgcolor=blue> </td>
<td align=left width=1><img src=top_left.gif></td>
</tr>
<tr>
<td bgcolor=blue> </td>
<td bgcolor=blue>YOUR FORM HERE</td>
<td bgcolor=blue> </td>
</tr>
<tr>
<td align=right width=1><img src=bottom_right.gif></td>
<td bgcolor=blue> </td>
<td align=right width=1><img src=bottom_left.gif></td>
</tr>
</table>

Don’t be afraid to nest tables! :slight_smile:

111

You can remove the bevel and really make the form elements look like whatever you want…but you’ll have to use CSS to do it.

Try this:

<input name=“whatever” type=“text” style=“color: #000000; background-color: #ffffff; border: 1px solid #000000” value=“whatever” size=“10” maxlength=“50”>

You can also specify font-family and font-size.

112

Alright Zipper, you’re getting my first or second born. Looks like I’ll need lots of kids, you guys have all been helpful. :smiley:

113

Ack! ZipperJJ got it first.

My example defines the style inline with the tag; ZipperJJ has used the more general css approach.

114

I still appreciate it Trig.

Another question. I have a table background, but in addition to that, can the individual cells have their own BG?

115

Yeah you’re gonna want to use the global style approach, just so you don’t have to type all that inline stuff every time you write a form element. But Trig is right on, too. If for some reason you wanted to override the global class, you can write styles inline and it will override it.

Dear god, no. I defer all my child awards to Trig. I’d be much happier with silence.

116

Yes. But still you’ll run into problems with older browsers. You need to decide how much that bothers you. If it were me, it wouldn’t bother me at all. I’d code this particular site for Firefox and IE 6.

Some of this stuff you can try out on your own before you ask, ya know. Just do it! :slight_smile:

117

Well, it’s looking a bit better now. I still have to do the buttons and play with the background a little more, but no boring form.

Not too shabby, it’s a simple table with a 4k gif behind it.

118

So, World Eater, are you male or female? Being a male hetero, I only bare with hetero females.

Sorry. I couldn’t resist.

119

Why not do it correctly and code to web standards first, and then address the IE quirks and failures?
:smiley:

120

Alright guys, I just finished the contacts page. I initially thought it would be a simple affair, making a table with a background image and sliding things around until they looked good. Everything looked nice until I got home and the formatting was strange, and everything looked really bad. I finally figured out that the browser textsize setting was different on my home machine. Anyway after a few days of trying different approaches (putting images in the table instead of text that would resize, etc) I got things working. I’m not going to win any elegant code awards, and I don’t care, the thing works, looks, and stays the same no matter what I throw at it. The background image is only 4k.

What do you think?

http://WWW.subtechbeats.com “contacts”