Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    unordered lists and repeating regions

    I'm trying to convert myverdict.net from table based to css based. Virtually all the pages are dynamic. I use dreamweaver and php.

    Assuming I want to store links in a database. At the moment I present them on a page by having a 1 row, 1 column table and making it a repeating region, viewable only if results are returned.
    Is it possible to achieve the same thing using the unordered list tags with css. I tried tentatively yesterday but the results were printed across the page rather than as a list.
    Thanks in advance.
    PS. I don't need the exact code just a general answer.

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    If I am not misunderstanding you, the problem which you have encountered may have something to do with your PHP code.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BWiz,
    I think you may have misunderstood. The php is fine, my site works as it is. When I query my database, it returns more than one row. In order to display more than one row I use 1 row table as a repeating region, hence getting as many rows as there are returned by the query. I was wondering if it could be done withcss and the list tags.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by taffd View Post
    Assuming I want to store links in a database. At the moment I present them on a page by having a 1 row, 1 column table and making it a repeating region, viewable only if results are returned.
    Is it possible to achieve the same thing using the unordered list tags with css. I tried tentatively yesterday but the results were printed across the page rather than as a list.
    Visually, yes. Semantically, no.

    The proper semantic elements here would either be a table or a combination of definition lists, headers, and/or tables. Your current use of tables is semantically incorrect since the headers and data should be separate and marked up as such.

    I can see it being rewritten into a semantic table (or five semantic tables) with the exception of the “International questions” part, since it follows a different display convention. The column layout should be possible via floats and clearing. Semantic hyphenation would have to be done via background images due to Internet Explorer’s lack of support for the content property.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Arbitrator,
    Thanks for that. As I understand it you have actually viewed the site and you're discussing the homepage. I understand about headers and data being separate and can fix that easily. I don't understand semantic tables, so I'll do some research to further the cause and report back.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by taffd View Post
    As I understand it you have actually viewed the site and you're discussing the homepage.
    Correct.

    I don't understand semantic tables, so I'll do some research to further the cause and report back.
    It means that you should use tables how there were meant to be used (to associate data) via the facilities designed for that. For example, “United Kingdom - 11” does that implicitly. Arguably, that’s a correct way to associate data, but it would mean that the table is being used incorrectly since data is not being associated nor would it be as useful to automated or assistive technologies (search engines, screen readers, et al).

    Both of the below usages of tables explicitly associate data.

    Semantic Table:
    Code:
    <table>
    	<tbody>
    		<tr>
    			<th scope="rowgroup" colspan="2">national questions by country</th>
    		</tr>
    		<tr>
    			<th scope="row">Spain</th>
    			<td>1</td>
    		</tr>
    		<tr>
    			<th scope="row">United Kingdom</th>
    			<td>11</td>
    		</tr>
    		<tr>
    			<th scope="row">United States</th>
    			<td>3</td>
    		</tr>
    	</tbody>
    	<tbody>
    		<tr>
    			<th scope="rowgroup" colspan="2">primary division questions</th>
    		</tr>
    		<tr>
    			<th scope="row">England</th>
    			<td>1</td>
    		</tr>
    		<tr>
    			<th scope="row">Wisconson</th>
    			<td>1</td>
    		</tr>
    	</tbody>
    </table>
    Semantic Tables (less straightforward to allow for greater presentational control; then again, there are browser issues would styling table captions):
    Code:
    <table>
    	<caption>national questions by country</caption>
    	<tbody>
    		<tr>
    			<th scope="row">Spain</th>
    			<td>1</td>
    		</tr>
    		<tr>
    			<th scope="row">United Kingdom</th>
    			<td>11</td>
    		</tr>
    		<tr>
    			<th scope="row">United States</th>
    			<td>3</td>
    		</tr>
    	</tbody>
    </table>
    <table>
    	<caption>primary division questions</caption>
    	<tbody>
    		<tr>
    			<th scope="row">England</th>
    			<td>1</td>
    		</tr>
    		<tr>
    			<th scope="row">Wisconson</th>
    			<td>1</td>
    		</tr>
    	</tbody>
    </table>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •