CSS: table like info.

Discussion in 'Web Design and Development' started by c3str, Jun 27, 2007.

  1. c3str macrumors member

    Joined:
    Jun 27, 2007
    #1
    Hi all. I humbly ask for mercy. I am a designer and Director/multimedia developer who is venturing into learning CSS/non table based design.

    Normally I never ask for help, I always look for tutorials, but I'm helping out a friend with a new business with minimal budget and learning CSS @ the same time. Basic question is this. I have a set of text based information, basically stuff like phone number and then the number, address, then the address...you get the idea.

    In the past, I would have thrown that info. into a table and then called it a day. However I am trying to challenge myself to format this using CSS.

    Here is what I have attempted thus far:
    (url deleted)

    The bottom line is...It seems like there must be a more elegant way. Ideally, for the "labels" (artist, email etc.) I would want the black background just fitting behind the text, however for that I'd have to separate them back into individual divs.

    Basically, I humbly ask for help and advice in terms of what the most elegant way to present this. Sure, I could use position: absolute on each of the divs, but then if someone enlarges/changes the text size in their browser...ick. Seems to defeat the whole purpose of trying to do this the "right"/CSS way if I go about it like that.

    thanking you greatly in advance,
    Caroline
     
  2. c3str thread starter macrumors member

    Joined:
    Jun 27, 2007
    #2
    Another version

    BTW, here is another earlier version. It's all kinds of ugly, but that brings me to why I'm trying to learn to do it *right*. :)

    url deleted

    This version does show what I mean in terms of isolating the black background just to the label itself.

    I/the "client" prefers this look, but you can see the problem immediately when enlarging the text even one setting.
     
  3. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #3
    HTML:
    <head>
    <style type="text/css">
    <!--
    #labels {
    	position:static;
    	width:auto;
    	z-index:3;
    	text-align:left;
    	float:left;
    	top:0px;	
    }
    .labeltext {
    	font-family: Arial, Helvetica, sans-serif;
    	background-color:#000;
    	color: #FFF;
    	
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="labels">
      <p class="labeltext">Label 1</p>
      <p class="labeltext">Label 2</p>
      <p class="labeltext">Label 3</p>
    </div>
    </body>
    
    cant you just do that?
     
  4. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #4
    The idea behind tableless CSS+HTML is to not use tables for layout. If content is such that it is really a table (like the contact info on your pages) then go ahead and use a table.
     
  5. savar macrumors 68000

    savar

    Joined:
    Jun 6, 2003
    Location:
    District of Columbia
    #5
    If this is tabular data, you should be using a table.

    The general key is that if you're nesting tables, you're probably doing something that would be better done with CSS.
     
  6. c3str thread starter macrumors member

    Joined:
    Jun 27, 2007
    #6
    Roger, OK go tables

    Got it. Thanks for the advice. I was going a little too literal on the "no tables" point in my quest to be standards compliant.

    Thanks again---appreciate it.
     
  7. LastLine macrumors 65816

    Joined:
    Aug 24, 2005
    #7
    Yeah, I tend to hold the "Is this something I'd create in excel?" policy - if I can say yes to that it goes in a table, if it's not, it doesn't - dunno if that makes any sense?
     

Share This Page