SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member
    Join Date
    Jun 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    text alignment on inline-block elements

    in order to recreate the image below, i wrapped each line in a p and the left / right aligned bits of text in a span. each span is displayed -moz-inline-box / inline-block so they can get a fixed width, but it seems that text-align:right; doesnt work on them in FF. in IE7 it does work.

    if i use -moz-inline-block instead, the alignment works but the spans are no longer inline and behave like blocks.

    anyone know how to fix this?



    Code:
    	<div id="gamesStats">
    	<img src="images/chessImg.jpg" height="185" width="272" alt="play chess" />
    		<div id="stats">
    			<p><span class="statsTitle">My Recent Game</span><span class="statsDetail">Chess</span></p>	
    			<p><span class="statsTitle">My Favorite Game</span><span class="statsDetail">Checkers</span></p>	
    			<p><span class="statsTitle">My Score</span><span class="statsDetail">5,000</span></p>
    		</div>
    	</div>

    Code:
    #stats p {
    	margin: 10px;
    	width: 100%;
    }
    
    #stats span {
    	display: -moz-inline-box;
    	display: inline-block;
    	width: 120px;
    	text-align: right;
    		
    }
    
    .statsTitle {
    }
    
    #gamesStats #stats span.statsDetail {
    	text-align: right;
    	text-align: -moz-right;
    	border: 3px solid Green;	
    }

  2. #2
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mh, I'd put it into a little table, since it's a table of contents (which semantically would still be a table).

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd go with henkc7's suggestion on this and go for a table as it is tabular data.

    Also I personally never use inline-block as support for this in older browsers is non-existent. You could achieve this effect by floating quite easily and setting width's on these.

    But for this case, go with a table.

  4. #4
    Non-Member
    Join Date
    Jun 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... a table, really?! Im going to have to get an html book somewhere ...

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using tables to display tabular data

    You should find that useful.

    I think the problem has come from a misunderstanding that using tables is bad under all circumstances whereas in reality using CSS and div's for tabular data is actually as bad as using tables for layout.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure that is tabular data, as the "columns" contain differing data types. I would be more inclined to say it is a definition list..

  7. #7
    Non-Member
    Join Date
    Jun 2005
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz, i was half joking and agree tables should be used where appropriate. i decided to go with floating spans and this is working out fine

  8. #8
    SitePoint Enthusiast henkc7's Avatar
    Join Date
    Feb 2005
    Location
    Groningen, The Netherlands
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree that a definition list is a cleaner way than the one described by stef. But it surely is tabular data since the input 'My Recent Game' can have different kinds of output. Usually a definition has only one possible description.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Either could be used to be honest and you could even say that a heading tag could be used for the recent game, favourite game, score and a pargraph for the items.

    Centauri, just because this example doesn't have headings along the top doesn't mean it can't be a table. The items in the first column in this example could be <th> for and the rest be data.

    Think about how it would also display without CSS though and I'd be inclined to say that as it's displayed above makes the most sense and therefore the logical choice would be a table but I understand the arguments for the others.

  10. #10
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I would go with a table for sure, I am still chewing on the definition list solution.
    Ryan B | My Blog | Twitter

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A table should be fine for this.

    It would also be pretty trivial to make a DL look like that. Just nuke the default paddings/margins, set a line height, right-align the DDs, then move the DDs up a line with a negative top margin of the same amount as the calculated line height.

    If the texts could run into each other you could specify a right padding on DT and a left padding on DD (both in &#37 so that the text wraps instead of overlaps.

    The image should also be a background image rather than an <img>.
    Simon Pieters


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
  •