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

JavaScript and client side scripting.

Moderator: General Moderators

matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 :)
User avatar
GeertDD
Forum Contributor
Posts: 274
Joined: Sun Oct 22, 2006 1:47 am
Location: Belgium

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

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

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

Post 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..
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
GeertDD
Forum Contributor
Posts: 274
Joined: Sun Oct 22, 2006 1:47 am
Location: Belgium

Post 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>
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
GeertDD
Forum Contributor
Posts: 274
Joined: Sun Oct 22, 2006 1:47 am
Location: Belgium

Post 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.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
User avatar
GeertDD
Forum Contributor
Posts: 274
Joined: Sun Oct 22, 2006 1:47 am
Location: Belgium

Post by GeertDD »

Okay. :)
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

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

Post 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>
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

That is what I did, just not with the specific names of the people in the CSS attributes.
User avatar
Obadiah
Forum Regular
Posts: 580
Joined: Mon Jul 31, 2006 9:13 am
Location: Ashland, KY
Contact:

Post by Obadiah »

:oops: sorry bro...i didnt catch your code before i posted mine
Post Reply