Page 2 of 2

Posted: Tue Dec 19, 2006 11:11 am
by matthijs
Nothing wrong with tables, as long as you don't build a house with them. Wink
The Ninja Space Goat wrote:yea, leave the house building to css...
Very sharp Ninja :)

Re: You knowing you're a CSS geek when...

Posted: Tue Dec 19, 2006 11:12 am
by GeertDD
Everah wrote:the sad thing is the data I was using was tabular in nature, and the display of that data still worked better with CSS DIVs than with a table.
Interesting. Mind to share the actual data/code?

Re: You knowing you're a CSS geek when...

Posted: Tue Dec 19, 2006 11:13 am
by matthijs
Everah wrote:the sad thing is the data I was using was tabular in nature, and the display of that data still worked better with CSS DIVs than with a table.
Yeah, sometimes, data in divs just ... well, float better..

Posted: Tue Dec 19, 2006 11:56 am
by RobertGonzalez
Here's the CSS I used:

Code: Select all

.data-row {
	float: left; 
	overflow: hidden; 
	width: 100%; 
	text-align: center; 
	display: block; 
	border-bottom: solid 1px #000000;
}

.data-row input.plain {
	text-align: left;
	background-color: #ffffff;
	border: none;
	text-decoration: underline;
	color: #da3829;
	padding-right: 0.5em;
	cursor: pointer;
}

.data-header {
	background-color: #993333;
	color: #ffffff;
	font-weight: bold;
}

.data-footer {
	float: left; 
	overflow: hidden; 
	width: 100%; 
	text-align: center; 
	display: block; 
	background-color: #993333;
	color: #ffffff;
	font-weight: bold;
}

.data-cell-index {
	float: left; 
	width: 3%; 
	text-align: left;
}

.data-cell-10 {
	float: left; 
	width: 10%; 
	text-align: left;
}

.data-cell-15 {
	float: left; 
	width: 15%; 
	text-align: left;
}

.data-cell-20 {
	float: left; 
	width: 20%; 
	text-align: left;
}

.data-cell-25 {
	float: left; 
	width: 25%; 
	text-align: left;
}

.data-cell-30 {
	float: left; 
	width: 30%; 
	text-align: left;
}

.data-cell-40 {
	float: left; 
	width: 40%; 
	text-align: left;
}

.data-cell-45 {
	float: left; 
	width: 45%; 
	text-align: left;
}
And here's the mock table code:

Code: Select all

<div class="data-row data-header">
	<div class="data-cell-index">&nbsp;</div>
	<div class="data-cell-30">Name</div>
	<div class="data-cell-15">Phone(s)</div>
	<div class="data-cell-25">Edit</div>
	<div class="data-cell-25">Delete</div>
</div>
<form method="post" action="#">
<div class="data-row">
	<div class="data-cell-index">1</div>
	<div class="data-cell-30">Jimbo Bob</div>
	<div class="data-cell-15">&nbsp;</div>
	<div class="data-cell-25">
		<input type="hidden" name="contact_id" value="999999" />
		<input type="submit" name="edit" value="Edit Jimbo Bob" class="plain" />
	</div>
	<div class="data-cell-25">
		<input type="submit" name="delete" value="Delete Jimbo Bob" class="plain" />
	</div>
</div>
</form>

<form method="post" action="#">
<div class="data-row">
	<div class="data-cell-index">2</div>
	<div class="data-cell-30">Billy Bob</div>
	<div class="data-cell-15">888-555-4444</div>
	<div class="data-cell-25">
		<input type="hidden" name="contact_id" value="999999" />
		<input type="submit" name="edit" value="Edit Billy Bob" class="plain" />
	</div>
	<div class="data-cell-25">
		<input type="submit" name="delete" value="Delete Billy Bob" class="plain" />
	</div>
</div>
</form>

<form method="post" action="#">
<div class="data-row">
	<div class="data-cell-index">3</div>
	<div class="data-cell-30">Joe Bob</div>
	<div class="data-cell-15">&nbsp;</div>
	<div class="data-cell-25">
		<input type="hidden" name="contact_id" value="999999" />
		<input type="submit" name="edit" value="Edit Joe Bob" class="plain" />
	</div>
	<div class="data-cell-25">
		<input type="submit" name="delete" value="Delete Joe Bob" class="plain" />
	</div>
</div>
</form>

<form method="post" action="#">
<div class="data-row">
	<div class="data-cell-index">4</div>
	<div class="data-cell-30">Uncle Bob</div>
	<div class="data-cell-15">888-555-6666</div>
	<div class="data-cell-25">
		<input type="hidden" name="contact_id" value="999999" />
		<input type="submit" name="edit" value="Edit Uncle Bob" class="plain" />
	</div>
	<div class="data-cell-25">
		<input type="submit" name="delete" value="Delete Uncle Bob" class="plain" />
	</div>
</div>
</form>

<div class="data-footer">This simulates a table footer (TFOOT) tag</div>
This derived itself partly from a need to style the CAPTION, THEAD and TFOOT portion of the table and partly from not being able to logically and semantically make forms for each row of the table in a compliant manner for XHTML. The table would not validate, but this does.

Posted: Tue Dec 19, 2006 12:27 pm
by GeertDD
Hmm, well... In my opinion you should have used a table. Don't you think the code below is much much cleaner? Only 5 lines of CSS, and no classes needed whatsoever.

Code: Select all

table { width:100%; }
th, tfoot { background:#933; font-weight:bold; color:#fff; }
th, td { border-bottom:1px solid #000; text-align:left; }
tfoot td { border-bottom:none; text-align:center; }
a { color:#da3829; }

Code: Select all

<table cellspacing="0">
	
	<tfoot>
		<tr>
			<td colspan="5">This is a table footer (TFOOT) tag</td>
		</tr>
	</tfoot>
	
	<tr>
		<th></th>
		<th>Name</th>
		<th>Phone(s)</th>
		<th>Edit</th>
		<th>Delete</th>
	</tr>
	
	<tr>
		<td>1</td>
		<td>Jimbo Bob</td>
		<td></td>
		<td><a href="edit.php?id=1">Edit Jimbo Bob</a></td>
		<td><a href="delete.php?id=1">Delete Jimbo Bob</a></td>
	</tr>
	
	<tr>
		<td>2</td>
		<td>Billy Bob</td>
		<td></td>
		<td><a href="edit.php?id=2">Edit Billy Bob</a></td>
		<td><a href="delete.php?id=2">Delete Billy Bob</a></td>
	</tr>
	
	<tr>
		<td>3</td>
		<td>Joe Bob</td>
		<td></td>
		<td><a href="edit.php?id=3">Edit Joe Bob</a></td>
		<td><a href="delete.php?id=3">Delete Joe Bob</a></td>
	</tr>
	
	<tr>
		<td>4</td>
		<td>Uncle Bob</td>
		<td></td>
		<td><a href="edit.php?id=4">Edit Uncle Bob</a></td>
		<td><a href="delete.php?id=4">Delete Uncle Bob</a></td>
	</tr>
	
</table>

Posted: Tue Dec 19, 2006 1:15 pm
by RobertGonzalez
except your passing everything through GET, which I am opposed to. It is a little more inconvenient for hackers to have to mock forms than it is to just throw any number they want into the URL. Not to mention there were about five more fields that went into that form.

I do agree that it was a tabular dataset. But it was actually easier and faster for me to just use CSS.

Posted: Tue Dec 19, 2006 1:42 pm
by GeertDD
Everah wrote:except your passing everything through GET, which I am opposed to. It is a little more inconvenient for hackers to have to mock forms than it is to just throw any number they want into the URL.
Using POST may cause hackers to have a little more work, but what do you gain by it? Security through obscurity? Your filtering system at the server side stays the same, right? Anyway, I just simplified your markup to show off the visual CSS layout in first place.
Everah wrote:I do agree that it was a tabular dataset. But it was actually easier and faster for me to just use CSS.
Hardly can believe that writing your CSS was easier and faster than my 5 lines. And even if you say so, there's still the story of the semantic web. Standards don't necessarily have anything to do with being semantically correct. By using a div soup in this case, the tabular relationship between the elements is lost.

Posted: Tue Dec 19, 2006 1:58 pm
by RobertGonzalez
GeertDD wrote:Using POST may cause hackers to have a little more work, but what do you gain by it? Security through obscurity?
Yes.
GeertDD wrote:Your filtering system at the server side stays the same, right?
Yes.
GeertDD wrote:Hardly can believe that writing your CSS was easier and faster than my 5 lines. And even if you say so, there's still the story of the semantic web. Standards don't necessarily have anything to do with being semantically correct. By using a div soup in this case, the tabular relationship between the elements is lost.
It was easier for me to write the CSS. You can believe that or not, it is your choice. I agree with your take on the semantics of it.

Posted: Tue Dec 19, 2006 2:02 pm
by GeertDD
Okay. :)

Re: You knowing you're a CSS geek when...

Posted: Wed Dec 20, 2006 10:19 am
by Obadiah
Everah wrote:You spend two hours customizing a table just to find out that it doesn't validate with the rest of your markup, then you spend 5 minutes banging our a CSS solution that validates XHTML on the first run and actually performs better than your table.

Me hates tables. But I love CSS. :D
how bout a css table :wink:

Code: Select all

/*Employee*/
#f_title_employee
	{	background:black;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}

#f_Joe_employee
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;
	}

#f_Jack_employee
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;			
	}

#f_Roger_employee
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_employee
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}


/*Monday*/

#f_title_monday
	{	background:black;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}


#f_Joe_monday
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}

#f_Jack_monday
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;
	}

#f_Roger_monday
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_monday
	{	background:white;
		width:85px;
		float:left;
		border: solid 1px black;	
		margin:0px;
			
	}

/*Tuesday*/

#f_title_tuesday
	{	background:black;
		width:80px;
		float:left;
		border: solid 1px black;
		margin:0px;	
	}


#f_Joe_tuesday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Jack_tuesday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Roger_tuesday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_tuesday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}

/*Wednesday*/

#f_title_Wednesday
	{	background:black;
		float:left;
		width:100px;
		border: solid 1px black;
		margin:0px;	
	}


#f_Joe_Wednesday
	{	background:white;
		float:left;
		width:100px;
		border: solid 1px black;
		margin:0px;
	}

#f_Jack_Wednesday
	{	background:white;
		float:left;
		width:100px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Roger_Wednesday
	{	background:white;
		float:left;
		width:100px;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_Wednesday
	{	background:white;
		float:left;
		width:100px;
		border: solid 1px black;
		margin:0px;	
	}


/*Thursday*/

#f_title_thursday
	{	background:black;
		float:left;
		width:80px;
		border: solid 1px black;	
		margin:0px;
	}


#f_Joe_thursday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Jack_thursday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Roger_thursday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_thursday
	{	background:white;
		float:left;
		width:80px;
		border: solid 1px black;
		margin:0px;	
	}

/*Friday*/

#f_title_friday
	{	background:black;
		float:left;
		width:75px;
		border: solid 1px black;	
		margin:0px;
	}


#f_Joe_friday
	{	background:white;
		float:left;
		width:75px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Jack_friday
	{	background:white;
		float:left;
		width:75px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Roger_friday
	{	background:white;
		float:left;
		width:75px;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_friday
	{	background:white;
		float:left;
		width:75px;
		border: solid 1px black;
		margin:0px;	
	}

/*Email*/

#f_title_email
	{	background:black;
		float:left;
		width:209px;
		border: solid 1px black;	
		margin:0px;
	}


#f_Joe_email
	{	background:white;
		float:left;
		width:209px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Jack_email
	{	background:white;
		float:left;
		width:209px;
		border: solid 1px black;
		margin:0px;	
	}

#f_Roger_email
	{	background:white;
		float:left;
		width:209px;
		border: solid 1px black;
		margin:0px;	
	}


#f_Obadiah_email
	{	background:white;
		float:left;
		width:209px;
		border: solid 1px black;
		margin:0px;	
	}

#nest_S	{
		float:left;
		height:159px;
		width:730px;
		position:relative;
		top:150px;
		left:15px;
		margin:0px;
		border: solid 1px #368896;
		FONT-FAMILY: papyrus;
		text-align:center;
		margin-right: auto;
		margin-left: auto;
	}

Code: Select all


<div id="nest_S">
<div id="f_title_employee">
<p class="bolden_S">
Employee
</p>
<div id="f_joe_employee">
Joe
</div>
<div id="f_jack_employee">
Jack
</div>
<div id="f_roger_employee">
Roger
</div>
<div id="f_Obadiah_employee">
Obadiah
</div>
</div>

<div id="f_title_Monday">
<p class="bolden_S">
Monday
</p>
<div id="f_joe_monday">
8-5
</div>
<div id="f_jack_monday">
8-4
</div>
<div id="f_roger_monday">
8-5
</div>
<div id="f_Obadiah_monday">
8-close
</div>
</div>

<div id="f_title_Tuesday">
<p class="bolden_S">
Tuesday
</p>
<div id="f_joe_tuesday">
8-5
</div>
<div id="f_jack_tuesday">
8-4
</div>
<div id="f_roger_tuesday">
8-5
</div>
<div id="f_Obadiah_tuesday">
8-5
</div>
</div>

<div id="f_title_Wednesday">
<p class="bolden_S">
Wednesday
</p>
<div id="f_joe_Wednesday">
8-5
</div>
<div id="f_jack_Wednesday">
8-4
</div>
<div id="f_roger_Wednesday">
8-5
</div>
<div id="f_Obadiah_Wednesday">
8-close
</div>
</div>

<div id="f_title_thursday">
<p class="bolden_S">
Thursday
</p>
<div id="f_joe_thursday">
8-5
</div>
<div id="f_jack_thursday">
8-4
</div>
<div id="f_roger_thursday">
8-5
</div>
<div id="f_Obadiah_thursday">
8-5
</div>
</div>

<div id="f_title_friday">
<p class="bolden_S">
Friday
</p>
<div id="f_joe_friday">
8-5
</div>
<div id="f_jack_friday">
8-4
</div>
<div id="f_roger_friday">
8-5
</div>
<div id="f_Obadiah_friday">
8-close
</div>
</div>

<div id="f_title_email">
<p class="bolden_S">
E-Mail
</p>
<div id="f_joe_email">
<a class="1" href="mailto:Joe.Nilles@kctcs.edu">Joe.Nilles@kctcs.edu</a>
</div>
<div id="f_jack_email">
<a class="1" href="mailto:Jack.Johnson@kctcs.edu">Jack.Johnson@kctcs.edu</a>
</div>
<div id="f_roger_email">
<a class="1" href="mailto:Roger.Hagley@kctcs.edu">Roger.Hagley@kctcs.edu</a>
</div>
<div id="f_Obadiah_email">
<a class="1" href="mailto:Obadiah_00@hotmail.com">Obadiah_00@hotmail.com</a>
</div>
</div>

Posted: Wed Dec 20, 2006 10:24 am
by RobertGonzalez
That is what I did, just not with the specific names of the people in the CSS attributes.

Posted: Wed Dec 20, 2006 10:27 am
by Obadiah
:oops: sorry bro...i didnt catch your code before i posted mine