Replace table with div

[amiw]

This is the new code I have used:

<div style="border:solid 1px #8DA6CE;background:#EEF3FB;">
<div class="AdTitle"><%=sAdTitle%></div>
<div class="AdBody"><%=sAdText%></div>
<div class="AdLink"><a href="<%=sIAURL%>" target='_blank'><%=sDisplayURL%></a></div>
</div>
<br />


Here's the old code:

<table width="100%" border="0" align="center" cellpadding="1" cellspacing="0">
<tr>
<td valign="top"> <table width="100%" align="center" cellpadding="0" cellspacing="1" style="border:solid 1px #8DA6CE;background:#EEF3FB;">
<tr>
<td> <div class="AdTitle"><%=sAdTitle%></div></td>
</tr>
<td><div class="AdBody"><%=sAdText%></div></td>
</tr> <tr>
<td><div class="AdLink"><a href="<%=sIAURL%>" target='_blank'><%=sDisplayURL%></a></div></td>
</tr>
</table></td>
</tr>
</table>

Would anyone recommend any modifications apart from maybe putting the following in a class in the css file?
<div style="border:solid 1px #8DA6CE;background:#EEF3FB;">

 

[Vragabond]

Hard to tell because we do not know what you aim for. I guess with the styles moved to the stylesheet (like you noticed yourself) it would be satisfactory. One thing that makes me think is the semantics of it all. Since it looks like you are using the title, body and link, you might go with something like <h1>, <p>, and another <p> (or <div>) rather than just regular divs.

 

[amiw]

Hi thanks for the post,
The code is going in an include file down the right hand side of a site for an ads section. I wanted to tidy the code up for this section and make it more manageable.
The p element would put in a space which I don't want so I used div instead.

 

[Vragabond]

You can control that space that <p> element puts in by using margins. I suggested using <p> because <div> (similar to <span>) is semantically neutral element -- you style it the way you want it to look but it does not have a default meaning or behaviour (other than one being block and the other inline). For user agents that do not support CSS or as a general usability issue, you are encouraged to use elements which have meaning for their purposes. Use h1-6 for heading titles instead of regular divs, use label for form input labels, and so forth are just a few examples of elements that are not widely used but serve a particular purpose on the page. So, if you have a title and a text, you should use h1-6 and p. If you are dissatisfied with default behaviour of those elements, style them in a way that you see fit. But clients with certain UAs (that don't support css, screen readers) will thank you for your efforts.

 

[amiw]

I didn't want to use h1 because it's an include file and not the main section of the page or the main keyphrase.
This is confusing, if i used <p> and a margin then the browsers might not support stylesheets and if I use div's then the browsers might not support them either. I get your point and it's something that I'll have to weigh up.

Have you any idea what percentage of browers/users wouldn't support stylesheets, I would have thought it would only have been about 1%?

 

[Vragabond]

It is not really the number of clients supporting that is the issue. It is the issue of using the correct element for the correct thing. You have asked for our opinion and I have given you one. If you want to follow it, that is up to you. It is definitely better to use h1-6 for titles (anywhere in the html doc) and p for text than using regular divs. I don't understand what you meant with the file being included and as such not permitting the use of one of the headings. Headings have no predermined position they need be in in html documents. Read more on paragraphs and headings here:

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.3

 

[amiw]

ok Vraga I'll look into using the p tag and read your suggested links,

thanks again.

 

[BabyJeffy]

Regarding the question about what percentage wouldn't use style sheets... rather, consider those that are hard-of-seeing and use a screen reader to augment their browsing.

If you give your ads the correct markup (those links to the w3c are worth checking) then the screen readers will be able to interpret them in a more useful manner than if you used purely DIVs to seperate content.

I believe some of the screen readers do actually parse style sheets (?) but I have yet to discover how effective they are.

I have put together a suggested replacement for your code:

<div id="myAdContainer">
<span class="myAdvert">
	<h1><%=sAdTitle%></h1>
	<p><%=sAdText%></p>
	<p><a href="<%=sIAURL%>" target='_blank'><%=sDisplayURL%></a></p>
</span>
<span class="adBreak"></span>
...
</div>

I added a neutral span with a class of adBreak to add some lines to break each advert. It looked nice

Here is an example of the HTML that this might generate (after being parsed by your server):

<div id="myAdContainer">
<span class="myAdvert">
	<h1>My advert title</h1>
	<p>The best advert in town! Come see us now for everything.</p>
	<p><a href="#" target='_blank'>[URL unfurl="true"]www.someplace.com</a></p>[/URL]
</span>
<span class="adBreak"></span>
<span class="myAdvert">
	<h1>My advert title</h1>
	<p>The best advert in town! Come see us now for everything.</p>
	<p><a href="#" target='_blank'>[URL unfurl="true"]www.someplace.com</a></p>[/URL]
</span>
<span class="adBreak"></span>
<span class="myAdvert">
	<h1>My advert title</h1>
	<p>The best advert in town! Come see us now for everything.</p>
	<p><a href="#" target='_blank'>[URL unfurl="true"]www.someplace.com</a></p>[/URL]
</span>
</div>

This can then be styled using the following style sheet:

<style type="text/css">
/* this sets the width of the advert block - maybe removed to default to 100% */
div#myAdContainer {
	width:220px;
}
/* styling for the advert block and related content */
div#myAdContainer {
	border:solid 1px #8DA6CE;
	background:#EEF3FB;
	padding:0;
	overflow:hidden;
}
div#myAdContainer span.myAdvert {
	margin:0.6em;
	display:block;
}
div#myAdContainer span.adBreak {
	border-bottom:0.1em #8DA6CE solid;
	display:block;
}
div#myAdContainer span.myAdvert h1 {
	font-size:1.0em;
	margin:0;
}
div#myAdContainer span.myAdvert p {
	margin:0;
	font-size:0.9em;
}
div#myAdContainer span.myAdvert a {
	color:#66C;
	text-decoration:none;
}
div#myAdContainer span.myAdvert a:hover {
	text-decoration:underline;
}
/* end of styling for the advert block */
</style>

I set overflow to hidden so that if the user increases their font size to an extreme it doesn't start overlapping across the screen. Remove it if you do not like this action.

Tell me what you think!

Cheers,
Jeff

 

[Vragabond]

As an addendum or rather correction to Jeff's code, I would like to say you should replace the spans with divs. No need to switch up spans from inline to block, since span that is displayed as block is actually what div is by default. Also, you cannot put elements like h1 and p inside a span and expect your code to validate.

 

[BabyJeffy]

Totally agreed, Vragabond. Shortly after I posted it I realised that the SPANs would break validation... and that DIVs would be the perfect alternative.

Of course... the stylesheet could be made a little more simplistic too

Cheers,
Jeff

 

[amiw]

excellent guys, thanks for your efforts - I'll need to study all your suggestions.