Need help aligning an image and text inside a div Options

[cellhero]

Here is the website:

http://student.cofa.unsw.edu.au/~z3186477/

I'm trying to make the page XHTML compliant, so I need to remove the tag 'align="left"' from my div's. However, I don't know what to replace this deprecated tag with. This is the type of div I'm referring to:



<div class="sideboxsmall">

<a href="musicreviews/c/cometsonfire.htm"><img src="images/cometsonfire.gif" style="width:71px; height:71px; border:0px;" align="left" />
<strong>Comets On Fire < /strong><br></br>
<em>Avatar </em><br></br></a>
Sub Pop, 2006<br></br>
reviewer: David
</div>



here is a link to the css file for quicker reference:

http://student.cofa.unsw.edu.au/~z3186477/ppp.css


any help is appreciated. Thanks.

[pandy]

Well, that's a matter of Strict or Transitional. Deprecation happened in HTML 4.0, 1997 or something. The deprecated stuff is still acceptable in (X)HTML Transitional.

But of course you should get rid of it, but for other reasons. Not sure if you ask about align as an attribute of DIV or IMG. IMG I think. Anyway, for text alignment, as when align is used with for example DIV, look up 'text-align'. For floating, as with align left or right for IMG or TABLE, look up 'float'.
http://htmlhelp.com/reference/css/text/text-align.html
http://www.w3.org/TR/CSS2/text.html#propdef-text-align
http://htmlhelp.com/reference/css/box/float.html
http://www.w3.org/TR/CSS2/visuren.html#propdef-float

[Peter1968]

Create a class...

.leftimage

{float:left;
clear: left;
margin: 1em;}

Margins, borders and padding to suit.

http://www.ulujain.org/music/church.shtml In action: see the album picture down the page? That's how it looks. Swap the left for right in the CSS if you want the images to float on the right.

[cellhero]

Okay Peter1968, that seems to be working okay...

I'm getting tonnes of errors in W3C markup validator though, which is kind of what I'm trying to avoid...

http://validator.w3.org/check?uri=http%3A%...77%2Findex.html

could you take a look at that for me and tell me what I've done wrong?


thanks a lot.

[pandy]

It's pretty straightforward. 'alt' is a required attribute for images. You don't use it. Next error, " end tag for A omitted", means just that. You have forgotten the closing tag for A on this line (top of browser window).
http://www.htmlhelp.com/cgi-bin/validate.c...p;input=yes#L98

[cellhero]

pandy,

<div class="sideboxsmall">

<p class="leftimage"><a href="musicreviews/i/islands.htm"><img src="images/returntothesea300.jpg" style="width:71px; height:71px; border:0px;" /></p>



<strong>Islands </strong><br></br>

<em>Return To The Sea </em><br></br></a>

Equator, 2006<br></br>

reviewer: David

</div>


from what I can tell, it's closed (?) Am I missing something?

[Christian J]

The link is not closed inside the P (as it must). The closing tag appears out side of the P, which should cause in another error.

Actually I'm not sure what the P is used for. You might remove it and add the float style to the image instead.

[pandy]

No. The validator sees that as an unclosed A tag AND a redundant closing tag for A. Why? Because A can't contain other inline elements. When the validator encounters P, it determines that the A element must be closed _there_.

Even if A could contain P, the nesting would be wrong. You have this.
<p><a></p></a>
The elements overlap.

Also, I think what you want is to link the image. As you have it everything from the image to "Return To The Sea" would be linked.

[cellhero]

No. The validator sees that as an unclosed A tag AND a redundant closing tag for A. Why? Because A can't contain other inline elements. When the validator encounters P, it determines that the A element must be closed _there_.

Even if A could contain P, the nesting would be wrong. You have this.
<p><a></p></a>
The elements overlap.

Also, I think what you want is to link the image. As you have it everything from the image to "Return To The Sea" would be linked.

Understood. I'm pretty sure I've worked it out, thanks Pandy and Christian J.

There's still one issue with the validator

http://validator.w3.org/check?uri=http%3A%...77%2Findex.html

I'm getting a bunch of those required attribute "alt" not specified. errors. Does anyone know why? There's also that first error there regarding the doctype. If anyone knows why that is an error I would also like to know


thanks again all of you, you've been a great help

[cellhero]

Also, I think what you want is to link the image. As you have it everything from the image to "Return To The Sea" would be linked.

by the way pandy, I wanted to link both image and text.

[pandy]

I'm getting a bunch of those required attribute "alt" not specified. errors.

Because you still don't use it.
'alt' is a required attribute for IMG. The text that's its value should work as an replacement for the image if it for some reason isn't loaded. If the image is purely deorative you can use a blank value, alt="", but the attribute is till required.
http://www.w3.org/TR/html401/struct/objects.html#edef-IMG
http://htmlhelp.com/reference/html40/special/img.html
http://www.w3.org/TR/html401/struct/objects.html#adef-alt
http://htmlhelp.com/feature/art3.htm
Read all of that and then put then put som nice alt texts in.

There's also that first error there regarding the doctype.

What? Don't see it.

[cellhero]

thanks pandy! It's all sorted now. Feels great to see

"Result: Passed validation"

that error I thought was a doctype one but it was just another "alt" omission.


thanks again, the help was greatly appreciated

[pandy]

Yeah, but you aren't supposed to use blank alt attributes everywhere. On the contrary, you should use functional text. The blanks are just for things that it makes no sense to replace with text. Like if you have an image border just because you think it looks good... without images no one has any interest knowing about it.

[cellhero]

I know, I read the thing. I just didn't bother working out what to put in the inverted comma's yet because I'm trying to get the code straight first.

I'm having a problem with this layout in IE...the boxes are being stretched instead of sitting nicely

If you compare the news page to the competition page in IE you should see what I mean...any idea what's causing this?