SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tidying up my table

    I have a table here: Microsoft Access Video Tutorials | Access World

    I would like to have each row with the links in them closer together. They seem a bit spread out.

    Also, I want the left image icon lined up with the text a little better.

    How can I do that?

    Thanks,

    Jon

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    It's probably the bottom margin on your image class. Remove the bottom margin.

    Code:
    img.alignleft {
      display: inline;
      padding: 0;
    margin:0 10px 0 0;
    }
    I'm not sure a table is the correct choice for that content and I would probably have used a DL list.

    You should tidy up the inline styles and deprecated attributes you are using anyway. Use classes for the alternate colours and not inline styles. I'm not quite sure why you have those empty rows in there either.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'm with Paul in that I'm not sure that really qualifies as tabular data -- though I don't think I'd be abusing a definition list for it either since I don't see terms and definitions... A regular unordered list with a span for the runtime should be more than enough...

    to go through your code one bit at a time....

    Code:
    <table style="width: 461px; height: 963px;" border="0" cellpadding="1">
    Using the style atttribute inline like that basically misses the point of CSS -- likewise I wouldn't bother with cellpadding or declaring border since you could just use:

    td { padding:1px; }
    table { border-collapse:collapse; border:0; }

    ...in your css.

    Code:
    <tbody>
    Since you aren't using thead, there's no real reason to state tbody.

    Code:
    <tr style="background-color: #f8f7f6;">
    <td colspan="3"><strong>General Tips<br />
    </strong></td>
    </tr>
    Again, a pointless bandwidth wasting style attribute, you've got a line-break for no reason, and given the use of colspan and strong that shouldn't be STRONG, that should be a TH.

    Code:
    <td style="width: 25px; height: 18px;"><a href="http://www.sitepoint.com/forums/wp-content/uploads/2011/06/camera-icon.gif"><img class="alignleft" title="camera-icon" src="http://www.sitepoint.com/forums/wp-content/uploads/2011/06/camera-icon.gif" alt="" width="17" height="17" /></a></td>
    Waste of code applying that style to every TD like that, that's what classes are for, that's a presentational image so Iprobably wouldn't even have that in the markup... the anchor I'm not even certain why it's in there since it's just a link to the icon (?!?)...

    Code:
    <td><a href="http://www.access-programmers.co.uk/?p=297">Tips for organising the database window</a></td>
    <td>01:04</td>
    This isn't too bad, it's really the only part I'd feel justified in using a table on as yes, it has rows and columns.

    Code:
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    While this is just a waste of bandwidth for christmas only knows what.

    That said, I'd probably code those thus:

    Code:
    <div class="videoLists">
    
    	<h3>General Tips</h3>
    	<ul>
    		<li>
    			<a href="/?p=297">
    				Tips for organising the database window
    			</a> 01:04
    		</li>
    	</ul>
    	
    	<h3>Tables</h3>
    	<ul>
    		<li>
    			<a href="/microsoft-access/tables/how-to-create-a-simple-table/">
    				How to create a simple Table
    			</a> 05:58
    		</li><li>
    			<a href="/?p=272">
    				How to create a relationship between 2 tables
    			</a> 05:26
    		</li>
    	</ul>
    	
    	<h3>Queries</h3>
    	<ul>
    		<li>
    			<a href="/microsoft-access/queries/how-to-create-a-simple-query/">
    				How to create a simple Query
    			</a> 06:43
    		</li>
    	</ul>
    	
    <!-- .videoLists --></div>
    with this in your EXTERNAL stylesheet.

    Code:
    .videoLists h3 {
    	padding:0.5em;
    	font:bold 100%/140% arial,helvetica,sans-serif;
    	background:#F8F7F6;
    }
    
    .videoLists ul {
    	list-style:none;
    }
    
    .videoLists li {
    	overflow:hidden; /* wrap floats */
    	height:1%; /* holly hack, trip haslayout, wrap floats IE */
    	padding:0.5em 0;
    	text-align:right; /* moves date to right side next to floated anchor */
    	background:url(/wp-content/uploads/2011/06/camera-icon.gif) center left no-repeat;
    }
    
    .videoLists li a {
    	float:left;
    	display:inline; /* prevent IE margin bugs */
    	margin-left:17px; /* image width */
    	padding:0 1em 0 0.5em; 
    }
    I might even consider adding <span>-</span> after each </a> with .videoLists li span { display:none; } in the CSS to add a divider that only shows up for non-CSS users. Graceful degradation and all that.

    Hey, for once I didn't rant and rave about all the garbage markup turdpress saddled you with that you really should take the time to rip out by the ...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by deathshadow60 View Post

    Hey, for once I didn't rant and rave about all the garbage markup turdpress saddled you with that you really should take the time to rip out by the ...

    lol

  5. #5
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the suggestions - very nicely detailed. But here is the problem...

    My knowledge of html is okish and css less so. I've no idea of the implications of meddling with the external css using the theme I have for Wordpress. When I update the theme, it may knock out stuff. For that reason, I am thinking either some html commands or inline styles. Yes, not as efficient and nice and smooth, but at least it gets the job done.

    I know you guys are perfectionists but for me, I need to bodge it to get it done!

  6. #6
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a semi-colon missing from this?

    <table style="width: 461px; height: 963px;" border="0" cellpadding="1">

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Jon Lawrance View Post
    Is there a semi-colon missing from this?
    <table style="width: 461px; height: 963px;" border="0" cellpadding="1">
    I don't think so! It's only the bit I've coloured green that is part of the style attribute. The border and cellpadding, although presentational, are often specified in the HTML because they're a pain in the wossname to do reliably, cross-browser, in CSS. Because they're regular HTML attributes, not CSS, they don't need semi-colons.


Bookmarks

Posting Permissions

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