14 replies [Last post]
Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

Guys, I've painted myself into a corner because I believed that it would be simple after I created a container that has two columns of text - to just insert that into a nice expanding layout and have it settle in and behave, like placing an image. Not so, this is the result:

http://www.studio10webgraphics.com/InternetPosts/pcstest/assets/html/contact_us.html

If anyone can take the time that knows how to fix this, but will also show me how it is done, I will work with you to reward you for your time.

I am absolutely up against a brick wall with this and have a client who will come in Monday to review the site.

PS: I have made a temporary fix by using absolute positioning for the time being, stuck those little babies where they belong, but it's not by finesse, which would be in knowing how to make a container with floated columns go where I put it in a layout like I am trying to do here.

Anxiously awaiting your response,

Ken Nielsen

PS: I added a color to the div so you could see it - and how it should move up were I inserted it in the hole showing above it on the page.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Remove the clear:both; from

Remove the clear:both; from .ctr_block

I'm not trying to insult you, but that page needs a lot of work.

Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

First, I'll try what you

First, I'll try what you recommend.

Second, I admit, I am a beginner using Dreamweaver to expedite the process. You recognized that right off. I need to go in and clean up the mess of extra id's and classes that are not being used (for one.)

I need the help of someone who knows CSS, and where it is headed, to help me run a clean ship. If you are willing, PM me and we'll set up a way to work.

PS: What you recommended worked (you're not surprised!) and I'm really impressed. How on earth can you learn how to work with floats like that?

Amazing.

Thank You,

Ken Nielsen

Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

wolfcry911 wrote:Remove the

wolfcry911 wrote:
Remove the clear:both; from .ctr_block

I'm not trying to insult you, but that page needs a lot of work.

Next Question:

Taking the best step toward 'cleaning up' what you mentioned 'needs a lot of work' what's the first thing I should try to do? I mean, if I divide the chore up into 4 or 5 different tasks, what would be the first, most manageable task to accomplish?

The page works and I want it to continue to perform as it does, but want the code to be a good example of how it should be.

Ken

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

Is this a redesign, or work

Is this a redesign, or work in progress?

It really needs an overhaul on the actual markup. What you have there now will work for now, but is not scalable in the long run, or at least not as easy as it should be to update.

A first step would be to get more comfortable with HTML and CSS so that you can not rely so much on Dreamweaver as a crutch.

You just need to come up with a good 2 column layout and go from there.

mattrossidesigns.com

Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

I don't see Dreamweaver as

I don't see Dreamweaver as so much of a crutch as I do as a helpful authoring environment. I want to perform in code view, what is necessary to keep the code clean and in order. Dreamweaver can do that, but like you said, it takes an operator who knows how to keep it from getting carried away with itself. I believe it is possible to use Dreamweaver and still wind up with sensible structure to a web site.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Ken Nielsen wrote: Taking

Ken Nielsen wrote:

Taking the best step toward 'cleaning up' what you mentioned 'needs a lot of work' what's the first thing I should try to do? I mean, if I divide the chore up into 4 or 5 different tasks, what would be the first, most manageable task to accomplish?

The page works and I want it to continue to perform as it does, but want the code to be a good example of how it should be.

I think the best route would be to build the page a second time keeping the first as a reference. I would start with a strict doctype. There's no reason to code new pages to a transitional doctype allowing deprecated elements. From there I would forget about presentation and mark up the content in a semantic fashion. The javascript should be left out (it will probably be eliminated altogether), all presentational attributes (like align) should be eliminated, as well as all non-essential (to content) images. Why don't you give this a go, post your results and we'll critique it and move on.

Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

Radical. A pristine

Radical.

A pristine approach.

You are right.

Learn in an uncluttered environment.

I will give it a try.

Thank You,

Ken

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

How are doing with this Ken?

How are doing with this Ken? I have my version ready to go and will post as soon as you're ready.

Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

Here it is: Three images

Here it is:

Three images total, one for the required logo and two example product uses.

The text is shortened for the purpose of our session, to keep it to one page. For the complete site there would be other linked pages to colors of finishes available, photos of example applications, and a contacts listing page (the one you helped me fix the float on.)

I have concentrated on editorial content, like you recommended, and which is the bare bones of where I always start and focus for work I do for clients. I mean, there must be meaningful content and a clear message or the whole page, no matter how fancy-looking, is not worth a hoot otherwise.

I'll leave it to you to comment next.

Ken

The link:

http://www.studio10webgraphics.com/InternetPosts/training_site/

saijin
Offline
newbie
Last seen: 13 years 30 weeks ago
Joined: 2008-05-06
Posts: 2
Points: 0

This might help...

This comment has been moved here.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Well I'm a little confused,

Well I'm a little confused, I thought we were rebuilding the contact page, but that's okay.

I see a lot of improvement, but a little more can be made. You're still using a transitional doctype - there's really no reason. Change it out to a strict one. You should use lists for your lists. There's unordered, ordered, and definition. A definition list may be best for the phone and fax, while unordered lists may best fit the other lists (finish choices, applications). You still have a couple of presentational attributes in use (align) - they should be removed, and replaced with CSS. And the non-breaking spaces in ps are purely presentational; remove them also. There's a break inside a h2 (applications) and an empty h3 - remove them. One place a break may be used (and some will argue with me) is in the address. I wouldn't use paragraphs, but an address element and use breaks, or possibly spans, to break up the sections. I see you've use only one h1 - this is great. Normally, I would say it shouldn't be used to mark-up a company name, but this seems to be an about page, so it may be suitable here. I also feel there are too many subheadings, but we'll go with it for now.

Overall a good job. Here's the way I see it:


Untitled Document

Powder Coat Specialties

Your Premier Powder Coating Source



Phone:

503-624-1904

Fax:

503-620-8217


PO Box 1146

7335 SW Childs Road

Tualatin OR 97062

Map To Our Location





Send Us The Challenging Jobs


Your job has to be done right. That's why Powder Coat Specialties is the right place to have your job done. Our background and expertise provides experience you can rely on to have your job done right, the first time.



Come See Us first


Take advantage of our background of experience to help make sure your project is done correctly. Exacting requirements are our specialty. You can be sure that we will listen and understand your job requirements first, and then proceed to make sure your job will be done completely to your satisfaction.



Powder Coating Done Right - The First Time


While no one, including us, likes to see a job that has to be done over, we have seen this when customers come in to have us correctly produce what was not done right somewhere else. Our advice to everyone who is considering a new project is to come see us first. We set the highest standards for everything we produce and monitor those standards at every production phase by thorough inspection.



It's More Than Appearance


Properly applied powder coating will last a lifetime and keep its attractive appearance without loosing bond with the base material. Powder coating quality and durability can only be assured through experienced production know-how, closely monitored process controls, and established testing methods. Powder Coating Specialties provides all of these in order to keep your job looking good and performing flawlessly for a lifetime of use.



Extra Protection 'Performance Plus' Coatings


Powder Coat Specialties can provide extra protection treatment to meet high demand requirements. Ask your representative about available coatings to make your job perform under harsh conditions.



We Do It All


The most important job at PCS is quality and service. See us for: rapid turn-around, your job done right, at the right price.



Powder Coating is The Right Choice for:



  • Severe weather outdoor use

  • Fresh or treated water use

  • Chemical exposure

  • Light & Heat exposure

  • Abrasive environments

  • An attractive finish that offers extended life in harsh environments

  • Wherever extra durability is required



Applications



  • Appliances

  • Automotive

  • Electrical

  • Metal and Office Furniture

  • Building and Architectural

  • Farm

  • Garden and Industrial Machinery

  • Fabricated Metal and Miscellaneous Products



Powder coating finish choices include:



  • Extensive choice of solid colors

  • Multi-color textures

  • Metallics

  • Wrinkle finish

  • Specialty Effects

  • Solid-color textures

  • Varieties of Gloss or Matte


And just for study purposes, here's how I would have done the contact page:

Powder Coat Specialties - Contact Us





  • Home

  • Services

  • Environment

  • Gallery

  • FAQs

  • Applications

  • Colors & Finishes


For Technical References use these links:






Bring us the challenging jobs


Contact Us:




Location:

7335 SW Childs Road

Tualatin OR 97062

Mailing Address:

PO Box 1146

Tualatin OR 97062

UPS Address:

7335 SW Childs Road

Tigard OR 97224




Sales:

Technical Help:













Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

Yes, well, I rolled over in

Yes, well, I rolled over in my sleep last night and did a 'wolf cry' in the night: "I forgot to change it to STRICT!" then went back to sleep.

I thought no markup, no alignment, would also mean not using lists or any other HTML trickery. Must keep things pure at the onset.

I rely on sub headings in this case for those who have no time to read the body text, which is about everyone. I want the sub heads to carry the message and let the reader know that there is supporting text for each main point. It's all highly subjective and follows loosely what I've learned about in-person sales.

Let me copy your code to my computer and review it carefully, then will come back with comment.

What's up with the post that was moved (above)?

--------------------

added later:

I've looked at the code in a browser and see what you have done. No containers makes the body text flow to the edge of the window. The rule I learned and believe it follows true from the printed page to the online page, is that 10 words in long enough for anyone to have to read and then for the eye to scan back to catch the next line. Unless line length is captured to not many more than 10 words, then it becomes a burden for the reader. Here is the reason I love containers for text. It allows control over how many words will be allowed on one line of text.

Everything else looks beautiful. Now, for me, being a layout junkie, I want to group things together and not string everything down one side of a page, even though that is valid. I must say you have me thinking about this. Like I say, what you have presented is valid and now I need to consider it more. I need some contemplation time.

Thank You for what you've done. I invite you to add some commentary here about why you've chosen to produce these pages the way you have. You are good with words and I think I could learn from your reasoning on what is good layout.

Nice Job

Ken

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I agree that that line

I agree that that line lengths should only be so long. This is just the first stage - you need clean, valid code to apply the CSS to. We'll now address the presentation. We'll be adding divs and spans if needed as we go.

Consider this: the page without CSS is at least readable and content can be presented to the user. Remember, not all users have sight; some use aural browsers. This page can be understood by these types of users. And some may think that a blind or poorly sighted person may never happen upon their site, but they've neglected to think about search engine spiders - they're blind!

Do you have a pic or mock-up of what you want your page to look like? Please post and we'll add the CSS to style as needed.

Ken Nielsen
Offline
Regular
Last seen: 13 years 22 weeks ago
Joined: 2007-12-13
Posts: 34
Points: 0

What I want the page to look

What I want the page to look like is exactly the way I have it now, fixed with the floated two-column listings in place.

To see that we have to go back to the original link and start at point A.

The site still needs work, more photos of example jobs that this company has done. Basically, it is in a form that will present the business well, be useable by viewers who are often customers, while providing a wealth of information that customers want.

I realize that this throws back in the Javascript and lots of images, including rollover buttons, but if I'm going to do this for a living, this is what people want.

I'm torn between two worlds, one for simplicity and one for competitive one-upsmanship.

While I'm not one to ignore the sensible approach, I do want to expand my abilities to include future sites that float 3, 4, and even 5 columns in a 600 pixel wide container that can be placed in the flow of a page that has two expandable columns. This would be the workings of a dream layout if the right client comes along for me to use this one for.

I think everything we have discussed in this thread will have a positive effect and outcome for future sites I build. The hard fact is that there are a lot of fireworks that do a good job of showing off people's business services, products and ideas and this is what clients want to see.