Getting better at css...but find some things confusing!

[cowboyandy]

Good evening!

 

Thanks to killersites tutorials, these forums, and various other sources, I'm getting better at utilizing css. But as I work on streamlining things, I find contradictory teachings. "Ugh, tables!" in one spot, how to use css to form your tables in another, tables are best for forms in another...very confusing.

 

Then I find that <p> has been deprecated, as has <font>. But in order to make things appear properly, I should define <p> in the css! What if I want to change the css-set font for a word or two in a paragraph? For example, css has the font for the main content set at normal black, verdana, 12px - how do I make a word or two a different color from the rest without using <font color="xxxxxx">? Example on the home page of one of my sites I'm rebuilding (thanks to hackers).

 

Several sources have indicated that my submission form - found here - should be set up using strictly css, but then others say if you want a better lined-up look, set tables for the form inside css! By the way, html validation shows that the form I have should have all the <label> elements removed - if I do that, will the form still work OK?

 

After reading through many of the posts here, and going through the w3school tutorials, I'm not real clear on what's correct. Any suggestions?

 

Thanks for your help and input - and for letting me vent a little! Have a great evening, and God bless!

[Andrea]

.... I find contradictory teachings. "Ugh, tables!" in one spot, how to use css to form your tables in another, tables are best for forms in another...very confusing.

Generally, tables are meant to be used to display tabular data. However, before CSS, (YEARS ago), there wasn't really a good way to layout pages, so tables were used as a crutch. Now that we have CSS, which is a much better way to position your stuff, there is no need to use tables as layout. However, some people still do, and there are still plenty of long-ago designs out there that are table-based. And I would want to bet some money on saying "those who still use tables for layout just haven't learned to use CSS properly!" I cannot even imagine why one would want to go back to tables once one's seen the light.

 

There is, however, also a way to work with a CSS table layout. You still just use <div>s in your HTML, but in your CSS you tell them to display as a table-cell. Now that's a great way to go about things. It takes care of those pesky situations where one column is longer than the other and you end up with design problems. I used them for a website a while back, and it was a really nice way to go about things. Unfortunately, this isn't quite supported by all browsers, so I had to created a separate CSS for those that didn't, and I decided it was just easier to forget about table-cells and only write up ONE layout that works everywhere.

 

Then there are the forms as tables. And that is one discussion I've had on this board before. I do think a form qualifies as a table:

 

Row 1

Cell 1: Name

Cell 2: Enter Name

Row 2

Cell 1: Address

Cell 2: Enter Address

 

and so forth

 

To me, that is tabular data and a table, but there were other opinions here. Not sure who really is right, but I have a hunch that I am - However, even I no longer use tables for forms - now that I know how to do it with CSS positioning, there's no need.

 

Then I find that <p> has been deprecated, as has <font>. But in order to make things appear properly, I should define <p> in the css! What if I want to change the css-set font for a word or two in a paragraph? For example, css has the font for the main content set at normal black, verdana, 12px - how do I make a word or two a different color from the rest without using <font color="xxxxxx">?

<font> has been deprecated, but <p> IS NOT DEPRECATED!! You can go about this the following way:

<p>In this sentence, I want <span class="green">these words green</span>.

 

CSS:

.green {
color: green;
}

or, if you wanted to use inline styling, which is ok if this style only appears one single time on your entire page, then you could do it like this:

<p>In this sentence, I want <span style="color: green">these words green</span>.

 

I'll look at your form in a few minutes.

[Andrea]

I looked on the page you linked to, and I think my earlier post explains how to avoid the deprecated font tag and inline styling issue. Let me know if you have questions.

 

I did notice that you have a type on your index page - it's 'Schleicher', not 'Scleicher' county.

 

In your navigation lists, you have an extra li tag set for your | - that's a lot of code for a decoration. Instead, apply a right or left border to the actual tag that holds your nav item.

 

 

 

On the form, one way to approach is would be to apply a class to "Name", 'Email/Phone", etc. You can use that to style that text and also to float it - try floating it and the input fields, and things should line up.

 

Overall, your site is very complex and has a lot of info and content - makes it kind of hard for me to get the whole picture in just a few minutes. The site works as it is, and as much as I like to see semantic, clean, and logical code, fixing the current pages as you have them would be quite an undertaking. If I had to do it, I'd start over and just rebuild the current look from scratch. But that's just my opinion.