text and image layout: can I use CSS instead of tables?

I'm just getting into CSS and have not yet seen any way that I can use it to replace my heavy use of tables in this site:
http://www.sticksite.com/cottage/index.htm
Can CSS be used to get it like that? Thanks!

 

That page would be elementary. Go through some html and css tutorials. Then make your own attempt. Once you have something, we can help you over the sticking points. (pun intended, if not all that great)

cheers,

gary

 

Of course CSS can do that, i recently redesigned my site (which was using tables) with CSS

 

Thanks, muchly for that; been trying on this shorter page:
http://sticksite.com/bearhuntNEW/bearhuntNEW.htm

As I see it, only one thing is messing me up; near the bottom is an ad for polar bear tours in Churchill, Manitoba. I want that "paragraph" to be on a khaki-color background, double border, black text. I did try to enter 3 classes in the STYLE section but something is wrong with them; that section now looks like this:

<style type="text/css">
	p {font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
	font-size:1em;
	color: #ffff00;
	p.ad background-color: khaki;
	p.ad border-style: double;
	p.ad color: black;
}
</style>

HTML:

and at that paragraph, I start with:

<p class="ad">

HTML:

See.........(etc)

Straighten me out one more time, please?

 

ANYTHING you can do with tables, you can do with CSS, and then some. I just finished redoing a layout in tables I was given into css for a client (collegeclown.com) Doing stuff in tables may be "easier", but in the long run it is a bad choice.

 

Yes, it is looking better all the time; finally did get that page the way I want it. Thanks for the feedback.

 

Read up again on selectors. Do the khaki paragraph like this:

<style type="text/css">
p.ad {
    font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    color: #ffff00;
    background-color: #f0e68c; /*while khaki is a named color, it is not one of 
                                 the seventeen colors that are a part of html*/
    border-style: double;
    color: black;
    }
</style>

Code (markup):

cheers,

gary

 

Thanks a lot, Gary! Appreciate it.

 

You are right; tables are much easier for me. Any chance you can tell me what I did wrong here? I can't get the 3 pics to line up:
http://www.sticksite.com/temp/
Thanks again.

 

The page does exactly what you told it.

The first image is floating to the left. The second image would appear to the left, but it's moved to be beside the float image. The "float: center" is meaningless, and is ignored. The right image begins immediately below the inflow item (the center image) and floats right. The following text is squeezed between the two float images.

It is obvious that you have only read through the float lessons without working them. See http://www.w3.org/TR/CSS21/visuren.html#floats for the 'official' take on floats.

A simple version of what I think you want:

<p>
  Three image on the same line without tables.
</p>
<p>
  <img class="first-pic" src="bird.png" alt="a bird on a limb">
  <img class="last-pic" src="cart.png" alt="me pulling a cart">
  <img src="sunset.png" alt="generic sunset">
</p>
===========
p img {
    display: block;
    margin: 0 auto;
    }

.first-pic {
    float: left;
    }

.last-pic {
    float: right;
    }

Code (markup):

You will need to use a complete and proper DTD. Use html 4.01 strict. There is no sane reason for you to use deprecated elements or attributes, so no reason to use transitional or loose DTDs.

The thing about css compared to table layout is that css requires that you use html properly.

cheers,

gary