Need help aligning an image and text inside a div |
Need help aligning an image and text inside a div |
cellhero |
Oct 27 2006, 11:14 PM
Post
#1
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
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 |
Oct 28 2006, 12:34 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 28 2006, 12:37 AM
Post
#3
|
Serious Coder Group: Members Posts: 448 Joined: 23-September 06 Member No.: 213 |
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 |
Oct 28 2006, 01:11 AM
Post
#4
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
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 |
Oct 28 2006, 01:36 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 28 2006, 06:34 AM
Post
#6
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
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 |
Oct 28 2006, 06:54 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
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 |
Oct 28 2006, 07:07 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 28 2006, 07:45 AM
Post
#9
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
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 |
Oct 28 2006, 07:47 AM
Post
#10
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
|
pandy |
Oct 28 2006, 07:57 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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. QUOTE There's also that first error there regarding the doctype. What? Don't see it. |
cellhero |
Oct 28 2006, 08:08 AM
Post
#12
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
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 |
Oct 28 2006, 08:28 AM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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 |
Oct 29 2006, 01:57 AM
Post
#14
|
Group: Members Posts: 9 Joined: 27-October 06 Member No.: 601 |
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? |
Lo-Fi Version | Time is now: 26th April 2024 - 03:44 PM |