CSS Questions

[LadyLily]

A few small ones.

1)Is there giogn to be a CSS 3 out anytime soon? I though I saw something about it somewhere....but I wasn't sure. I just thought you guys would know.

2)I saw that the atributes hspace and align (I think) were depreciated for the img tag. These were taken out becuase of CSS. How can I position the images just like I woudl with those atributes using CSS? Example: <img src="lalala.gif" align="left" hspace="7"> and turn it into somethign with CSS. Have any ideas?

Just want to have my pages up to W3C standards. Any help is appreciated. Thanks in advance.

[isotope235]

LadyLily,

For info on the status of CSS 3 check out the w3c's working draft. I didn't see a predicted date for when this is going to become a w3c recommendation, but there's lots of info on the future of CSS.

For positioning an image, try experimenting with the margin & padding properties using absolute and relative positioning. You can also use the CSS float property to align the img to the left or right and have text wrap around the <img>. Setting the margin property of the img controls the "padding" between the text and the <img>.

You can use different CSS-P techniques depending on page layout etc.

What do you want to do?

[LadyLily]

What I'm trying to do is a simple image trick. You have an image on the right or left, with text on the other side of the image. Say the image is on the left, and usually the text is on the bottom edge of the image. With the align thing you can have the text be right up beside the image. You probably already know that.

So say the image is aligned to the left, I'll have some text on the right startign from the top of the image. If the text goes for more than the image height, it will wrap underneath the image.

I used to do it with tables but it looked bulking and weird. I found this property for the img but say it was depreciated in favor of style sheets.

That's what I'm trying to do but it seems you already answered my question. It took me a little while to understand it but....looks okay. I'll try it out.

Thanks for the link too.

[isotope235]

Ahh, I get it now.

Use the float property to align the image, and the margin properties to set the distance between the image and text.

img.battabing
  {
  float:right;
  margin-bottom:10px;
  margin-left:10px;
  margin-right:0px;
  margin-top:0px;
  }

Also, make sure the <img> tag precedes the adjacent text in you html:

<img class="battabing" />
<p>Batta-bing-bang-boom</p>

HTH