Forums | MacLife

resedit · 2008-12-12 12:46 pm

I never did really understand them.
Tables I can deal with - but anyway - I suppose I need help.

The site isn't live but here's the code.

This shouldn't matter but for the sake of thoroughness:

Code:

<?php
include('_db_connect.inc.php');
include('functions.inc');
?>
<html><head><link href="layout.css" type="text/css" rel="stylesheet" /><title>test</title></head>
<body>
<?php
include('species_list.inc');
?>
</body>
</html>

Here is the species_list.inc file - which includes the functions that generate my content:

Code:

<?php

function listaherp($id,$num) {
  $herp = shasta_data($id);
  if ($num % 2) {
    $left = "blcell-left";
    $right = "blcell-right";
    } else {
    $left = "grcell-left";
    $right = "grcell-right";
    }
  $tr = "<div class=\"tablerow\">";
  $tdl = "<div class=\"" . $left . "\">";
  $tdr = "<div class=\"" . $right . "\">";
  $lineOne   = '   ' . $tdl . '<a href="' . $herp['webpage'] . '">' . $herp['common'] . '</a></div>' . "\n";
  $lineTwo   = '   ' . $tdl . $herp['latin'] . '</div>' . "\n";
  $lineThree = '   ' . $tdr . $herp['steb_common'] . '</div>' . "\n";
  $lineFour  = '   ' . $tdr . $herp['steb_latin'] . '</div>' . "\n";
//  $lineFive  = '   <td>' . '<a href="' . $herp['calherp_html'] . '">' . $herp['calherp_html'] . '</a></td>' . "\n";
  print($tr . "\n");
  print($lineOne);
  print($lineTwo);
  print($lineFour);
  print($lineThree);
  print("</div>\n");
  }
  
function listagroup($type,$order,$group) {
  $sql="SELECT herpid from herplist WHERE htype = '" . $type . "' AND horder = '" . $order . "' AND hgroup = '" . $group . "' ORDER BY invasive,intergrade,common";
  $result = mysql_query($sql);
  while ($something = mysql_fetch_row($result)) {
    $herpid[] = $something[0];
    }
  $herpcount = count($herpid);
  $string = '<h3>' . $group . '</h3>' . "\n";
  print($string);
  $tr = "<div class=\"tablerow\">";
  $tdl = "<div class=\"cell-left\">";
  $tdr = "<div class=\"cell-right\">";
  print($tr . "\n   " . $tdl . "<strong>Common Name</strong></div>\n   " . $tdl . "<strong>Latin Name</strong></div>\n   " . $tdr . "<strong>2003 Stebbins Latin</strong></div>\n   " . $tdr . "<strong>2003 Stebbins Common</strong></div>\n" . "</div>\n");
  $i = 0;
  while ($i < $herpcount) {
    listaherp($herpid[$i],$i);
    $i++;
    }
  print("<div class=\"space-line\"></div>");
//  print("</table>");
  }
  
function listaorder($type,$order) {
  $sql="SELECT DISTINCT hgroup from herplist WHERE htype = '" . $type . "' AND horder = '" . $order . "' ORDER BY invasive,hgroup,intergrade";
  $result = mysql_query($sql);
  while ($something = mysql_fetch_row($result)) {
    $groupname[] = $something[0];
    }
  $groupcount = count($groupname);
  $string = '<h2>' . $order . '</h2>' . "\n";
  print($string);
  $i = 0;
  while ($i < $groupcount) {
    listagroup($type,$order,$groupname[$i]);
    $i++;
    }
  }
  
function listatype($type) {
  $sql="SELECT DISTINCT horder from herplist WHERE htype = '" . $type . "' ORDER BY hgroup";
  $result = mysql_query($sql);
  while ($something = mysql_fetch_row($result)) {
    $ordername[] = $something[0];
    }
  $ordercount = count($ordername);
  $string = '<h1>' . $type . '</h1>' . "\n";
  print($string);
  $i = 0;
  while ($i < $ordercount) {
    listaorder($type,$ordername[$i]);
    $i++;
    }
  }
?>




<h1>List of Species in Shasta County</h1>
<p>
This is a list of reptiles and amphibians that are either currently in Shasta County, may be in Shasta County, or are historically documented as having been in Shasta County.</p>
<p>
For the scientific names of various species, we defer to the scientific name currently being used at <a href="http://www.californiaherps.com/">CaliforniaHerps.com</a>. In general we defer to them for common names as well, however, we do not feel the need to change the common name just for the sake of change.</p>
<p>
Also listed with each species is the name used in the 2003 Robert C. Stebbins field guide. Where the name differs, the Stebbins name will be in <span class="red">red</span> text. This is done to make it easier to find what you are looking for if you are familiar with the naming convention used in 2003 Stebbins.</p>

<?php
listatype("Reptiles");
listatype("Amphibians");
?>

Here is the css file -

Code:

body    {    
    font-size: 1em;
    font-weight: normal;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    font-family: serif;
/*    font-family: Times, serif;*/
/*    font-size-adjust:    .48; */
    }    

h1    {    
    font-family: Helvetica, sans-serif;
    font-size-adjust: .46;
    font-size: 2.33em;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    }
    
h2 {
    font-family: Helvetica, sans-serif;
    font-size-adjust: .46;
    font-size: 1.75em;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    }    
    
h3 {
    font-family: Helvetica, sans-serif;
    font-size-adjust: .46;
    font-size: 1.50em;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    }    
    
h4 {
    font-family: Helvetica, sans-serif;
    font-size-adjust: .46;
    font-size: 1.40em;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    }    
    
h5 {
    font-family: Helvetica, sans-serif;
    font-size-adjust: .46;
    font-size: 1.25em;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    word-spacing: normal;
    letter-spacing: normal;
    text-transform: none;
    }
    
pre {
    font-family: LucidaMonoEFOP, LucidaMonoEF, "Lucida Mono", Monaco, LucidaSansTypewriter, "Lucida Sans Typewriter", "DejaVu Sans Mono", "Courier New", monospace;
    }
    
.mono {
    font-family: LucidaMonoEFOP, LucidaMonoEF, "Lucida Mono", Monaco, LucidaSansTypewriter, "Lucida Sans Typewriter", "DejaVu Sans Mono", "Courier New", monospace;
    }
    
.latin {
   font-style: italic;
    color: blue;
}

.red {
   color: red;
}

.blue {
   color: blue;
}

.redlatin {
   font-style: italic;
   color: red;
}

.small {    
    font-size: 0.7em;
}
    

img {
    border: 0;
    }

a:link    {    
    text-decoration: underline;
    /* color: MediumStateBlue; */
    color: #7B68EE;
    }    
        
a:visited    {    
    text-decoration: none;
    color: #C00;
    }    
        
a:active    {    
    text-decoration: none;
    color: #F00;
    }    
        
a:hover    {    
    text-decoration: none;
    color: #C00;
    background: #FC0;
    }    
        
a.offsite    {    
    text-decoration: none;
    color: #C00;
    }    

ul {
   margin-left: 0;
   }

DIV.tablerow {
  background: none #ffffcc; border: none; color: #000000;
  margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;
  padding: 0; text-align: left; width: 96%;
}

DIV.cell-left {
  border: none; float: left; margin: 0; padding: 0; width: 24%;
}

DIV.cell-right {
  border: none; float: right; margin: 0; padding: 0; width: 24%;
}

DIV.grcell-left {
  background-color: #ffffcc; border: none; float: left; margin: 0; padding: 0; width: 24%;
}

DIV.grcell-right {
  background-color: #ffffcc; border: none; float: right; margin: 0; padding: 0; width: 24%;
}

DIV.blcell-left {
  background-color: #e0ffff; border: none; float: left; margin: 0; padding: 0; width: 24%;
}

DIV.blcell-right {
  background-color: #e0ffff; border: none; float: right; margin: 0; padding: 0; width: 24%;
}

DIV.space-line {
  clear: both; margin: 0; padding: 0; width: auto;
}

And while I don't think it matters - here is the functions.inc file:

Code:

<?php
// common functions used on this site
function makemyurl($input) {
   $foo = $input . '.php';
   $foo=str_replace(" ","_",$foo);
   $foo=str_replace("'","",$foo);
   $foo=strtolower($foo);
   return($foo);
   }
   
function rm_subspecies($input) {
   // If a latin name has a subspecies, this function removes it.
   $foo = explode(" ",$input);
   $output = $foo[0] . ' ' . $foo[1];
   return($output);
   }
   
function stebbins_latin($latin,$stebbins) {
   // returns a 0 if the stebbins scientific name is equivalent to current.
   // returns a 1 if they are different.
   // does not consider them to be different if all stebbins lacks is subspecies.
   $tst = strcmp($latin,$stebbins);
   if ( $tst == 0 ) {
      // OK - they are the same
      $result = 0;
      } else {
      // need to see if stebbins simply lacks subspecies designation
      $latin = rm_subspecies($latin);
      // now check the comparison
      $tst = strcmp($latin,$stebbins);
      if ( $tst == 0 ) {
         $result = 0;
         } else {
         $result = 1;
         }
      }
   return($result);
   }

function shasta_data($id) {
   $sql = "SELECT common,latin,steb_common,steb_latin,steb_description,calherp_html FROM herplist WHERE herpid = '$id'";
   $result = mysql_query($sql);
   $somevar = mysql_fetch_array($result);
   // add style to latin - including red for stebbins if different
   $tst = stebbins_latin($somevar['latin'],$somevar['steb_latin']);
   if (! $tst == 0 ) {
      $somevar['latin'] = '<span class="latin">' . $somevar['latin'] . '</span>';
      $somevar['steb_latin'] = '<span class="redlatin">' . $somevar['steb_latin'] . '</span>';
      } else {
      $somevar['latin'] = '<span class="latin">' . $somevar['latin'] . '</span>';
      $somevar['steb_latin'] = '<span class="latin">' . $somevar['steb_latin'] . '</span>';
      }
   // turn stebbins common red if different than our common
   $tst = strcmp($somevar['common'],$somevar['steb_common']);
   if (! $tst == 0 ) {
      $tvar = '<span class="red">' . $somevar['steb_common'] . '</span>';
      $somevar['steb_common'] = $tvar;
      }
   // fix calherp_html
   $somevar['calherp_html'] = 'http://www.californiaherps.com/' . $somevar['calherp_html'];
   // url for web page here
   $somevar['webpage'] = makemyurl($somevar['common']);
   $somevar['weblink'] = '<a href="' . $somevar['webpage'] . '">' . $somevar['common'] . '</a>';
   return($somevar);
   }
?>

It kind of sort of works - this screenshot shows it doing kind of what I want -

http://homepage.mac.com/mpeters/misc/good_herps.png

However - it's not all roses (and I suspect if I shrunk the browser window, that wouldn't be either)

http://homepage.mac.com/mpeters/misc/bad_herps.png

Where it says "Shasta Alligator Lizard" - that SHOULD be below "California Alligator Lizard" in the first column.
I don't know what the smurf it is doing all the way over in the third.

I gather it floated there, how do I stop it from doing that?

Do I need to put a

Code:

<div class="space-line"></div>

after ever freaking row? Is there a cleaner way of doing it?

Please don't laugh too hard at the functions - they were written from scratch in last 12 hours, I haven't gone over them yet.

resedit · 2008-12-12 1:03 pm

To make things easier - here's an example of the generated code, which if I had been thinking I would have posted instead of the php crap that is probably useless

Code:

<div class="space-line"></div><h2>Lizards</h2>

<h3>Alligator Lizards</h3>
<div class="tablerow">
   <div class="cell-left"><strong>Common Name</strong></div>
   <div class="cell-left"><strong>Latin Name</strong></div>
   <div class="cell-right"><strong>2003 Stebbins Latin</strong></div>
   <div class="cell-right"><strong>2003 Stebbins Common</strong></div>
</div>
<div class="tablerow">

   <div class="grcell-left"><a href="california_alligator_lizard.php">California Alligator Lizard</a></div>
   <div class="grcell-left"><span class="latin">Elgaria multicarinata multicarinata</span></div>
   <div class="grcell-right"><span class="latin">Elgaria multicarinata multicarinata</span></div>
   <div class="grcell-right">California Alligator Lizard</div>
</div>
<div class="tablerow">
   <div class="blcell-left"><a href="shasta_alligator_lizard.php">Shasta Alligator Lizard</a></div>

   <div class="blcell-left"><span class="latin">Elgaria coerulea shastensis</span></div>
   <div class="blcell-right"><span class="latin">Elgaria coerulea shastensis</span></div>
   <div class="blcell-right">Shasta Alligator Lizard</div>
</div>
<div class="tablerow">
   <div class="grcell-left"><a href="california_oregon_alligator_lizard_intergrade.php">California Oregon Alligator Lizard Intergrade</a></div>
   <div class="grcell-left"><span class="latin">E. m. multicarinata X E. m. scincicauda</span></div>

   <div class="grcell-right"><span class="latin">E. m. multicarinata X E. m. scincicauda</span></div>
   <div class="grcell-right"><span class="red">Southern Alligator Lizard</span></div>
</div>
<div class="tablerow">
   <div class="blcell-left"><a href="shasta_sierra_alligator_lizard_intergrade.php">Shasta Sierra Alligator Lizard Intergrade</a></div>
   <div class="blcell-left"><span class="latin">E. c. shastensis X E. c. palmeri</span></div>
   <div class="blcell-right"><span class="latin">E. c. shastensis X E. c. palmeri</span></div>

   <div class="blcell-right"><span class="red">Northern Alligator Lizard</span></div>
</div>
<div class="space-line"></div><h3>Horned Lizards</h3>
<div class="tablerow">
   <div class="cell-left"><strong>Common Name</strong></div>
   <div class="cell-left"><strong>Latin Name</strong></div>
   <div class="cell-right"><strong>2003 Stebbins Latin</strong></div>
   <div class="cell-right"><strong>2003 Stebbins Common</strong></div>

</div>
<div class="tablerow">
   <div class="grcell-left"><a href="blainvilles_horned_lizard.php">Blainville's Horned Lizard</a></div>
   <div class="grcell-left"><span class="latin">Phrynosoma blainvillii</span></div>
   <div class="grcell-right"><span class="redlatin">Phrynosoma coronatum</span></div>
   <div class="grcell-right"><span class="red">Coast Horned Lizard</span></div>
</div>

Alien · 2008-12-12 1:14 pm

Umm... I haven't really studied your code, but if you're presenting tabular data, why not use... Tables?

.tsooJ

resedit · 2008-12-12 2:16 pm

Using

Code:

<div class="space-line"></div>

after every row did seem to solve the issue - by clearing the floats thus preventing divs from the next row from floating up into what they perceived was unused space.

sturner · 2008-12-12 4:50 pm

Why put <div> in the tables? Make a class for the specific cell and row that is right, but using a div within a table seems to me to be using a 10 pound sledge to drive finishing nails.

PHUSMC · 2008-12-12 7:15 pm

Yeah, I would use a table for sure. You aren't designing the site's structure with tables, you are storing tabular data in tables, which is good.

resedit · 2008-12-12 7:38 pm

I'm not using tables at all now - and it is doing exactly what I want it to do, no matter how much I squish the browser window - it works just peach, nothing is out of place. So it's solved.

resedit · 2008-12-12 7:42 pm

http://homepage.mac.com/mpeters/misc/good_herps2.png

Just like it should be.

mahakali · 2008-12-12 9:19 pm

res wrote:
I'm not using tables at all now - and it is doing exactly what I want it to do, no matter how much I squish the browser window - it works just peach, nothing is out of place. So it's solved.

When you use DIVs for presenting tabular data, people who turn off page styling or use browsers not supporting CSS won't be able to view it correctly. DIVs are treated as blocks by default, your TRs would be fine but your TDs won't display next to another but below the previous td.

On another hand, you might be starting a new trend. By the time half the world use DIVs for tabular data, we should stickify this thread!

Daniel · 2008-12-12 11:54 pm

resedit wrote:
I'm not using tables at all now - and it is doing exactly what I want it to do, no matter how much I squish the browser window - it works just peach, nothing is out of place. So it's solved.

But you still did it wrong.

resedit · 2008-12-13 2:59 pm

Daniel wrote:
resedit wrote:
I'm not using tables at all now - and it is doing exactly what I want it to do, no matter how much I squish the browser window - it works just peach, nothing is out of place. So it's solved.
But you still did it wrong.

What is the right way?

resedit · 2008-12-14 3:25 am

Well, I went back to tables.
Apparently there is not an easy way with divs to make tabular data work well with browsers for the blind.

Alien · 2008-12-14 4:13 am

resedit wrote:
Daniel wrote:
resedit wrote:
I'm not using tables at all now - and it is doing exactly what I want it to do, no matter how much I squish the browser window - it works just peach, nothing is out of place. So it's solved.
But you still did it wrong.
What is the right way?

The right way is that your markup says what something is, and your styles say how it should be presented.

Since this is tabular data, you should mark it up as a table.

.tsooJ

resedit · 2008-12-14 4:57 am

Yeah - tables have nice feature such as the th and the scope tag.
Site after site after site that I looked at though kept harping about how tables were evil - especially in that they confuse non visual browsers - without mentioning they were talking about page layout, and that tabular data really did belong in them.

I guess people who do web design know that, but being someone who only occasionally designs stuff, I thought maybe div tags allowed some magic css stuff for alternate viewing modes that were better than tables. I did it the wrong way while trying to do the right thing.

It's too bad many of the pages out there bashing the use of tables are not clearer in what they mean, for those of us who only occasionally dabble with making web pages.

It also would be nice though if in a web design forum, when someone says "but you still did it wrong" that they specify. Otherwise it's just noise.

Last edited by resedit (2008-12-14 4:59 am)

Forums | MacLife

#1 2008-12-12 12:46 pm

div's are driving me insane

Code:

Code:

Code:

Code:

Code:

#2 2008-12-12 1:03 pm

Re: div's are driving me insane

Code:

#3 2008-12-12 1:14 pm

Re: div's are driving me insane

#4 2008-12-12 2:16 pm

Re: div's are driving me insane

Code:

#5 2008-12-12 4:50 pm

Re: div's are driving me insane

#6 2008-12-12 7:15 pm

Re: div's are driving me insane

#7 2008-12-12 7:38 pm

Re: div's are driving me insane

#8 2008-12-12 7:42 pm

Re: div's are driving me insane

#9 2008-12-12 9:19 pm

Re: div's are driving me insane

res wrote:

#10 2008-12-12 11:54 pm

Re: div's are driving me insane

resedit wrote:

#11 2008-12-13 2:59 pm

Re: div's are driving me insane

Daniel wrote:

resedit wrote:

#12 2008-12-14 3:25 am

Re: div's are driving me insane

#13 2008-12-14 4:13 am

Re: div's are driving me insane

resedit wrote:

Daniel wrote:

resedit wrote:

#14 2008-12-14 4:57 am

Re: div's are driving me insane

Board footer