Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS: table like info.

C

c3str

macrumors member
Original poster
Jun 27, 2007
40
0
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
 
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.
 
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?
 
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.
 
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.
 
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.
 
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?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back