XHTML

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

XHTML

Post by Nay »

hey, i've been away far too long from client side and graphics. i think i'm ready to start on my weblog back and fron ends after my 4 months of learning php - i didn't say i finished learning php - like who can ever can ;-)?

anyway, i was searching around google and from my memory my xhtml 1.0 transitional doucument should look something like:

Code: Select all

<?//xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<link rel="stylesheet" href="css/splash.css" />

<head>

</head>

<body>

</body>

</html>
and about: <?//xml version="1.0"?>

my host's shot_open_tags are on so it'll cause errors. so i just commented the xml version="1.0".

so anyway, my main question, is my syntax up there correct?

-Nay
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

Oops, I just realized commenting the xml version wouldn't do any difference. Gues, it's back to echo after all *sigh*

-Nay
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Your xhtml dtd is incorrect I think, unless that extra attribute in the HTML tag sets things straight.

You need to include the whole URL to the dtd.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.alistapart.com/articles/doctype/
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

oh wait............i was missing the <META tags. and i didn't know <center> was valid xhtml 1.0 O_O it validated.

anyhow:

http://www.sinsrevival.com

is what i'm working on. hey anyone know the list of......de......urrr kicked out tags in xhtml? i didn't know how to spell.......de....blah~~ so i didn't search on google O_O.

-Nay
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

Code: Select all

<?xml version="1.0"?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <title>
      &#1111;Sinsrevival.com] - Comming Soon
   </title>

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta name="Keywords" content="Blog, Weblog, Anime, PHP, Jpop, Punk Rock" />
   <meta name="Description" content="Daily happenings of your one and only Nay" />
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="cache-control" content="no-cache" />

   <link rel="stylesheet" href="css/splash.css" />

   <script language="javascript" type="text/javascript" src="js/external.js">
   </script>

</head>

<body>
<center>
   <table cellpadding="0" cellspacing="0" border="0" id="main">
      <tr>
         <td id="image">

               <img src="images/beta_main.jpg" alt="Coming Soon!" />

         </td>
      </tr>
      <tr>
         <td id="links">
      <center>
            <table cellpadding="0" cellspacing="0" border="0" id="info">
               <tr>
                  <td>
                     <a href="http://validator.w3.org/check?uri=http://sinsrevival.com" rel="external">
                        <img src="images/valid-xhtml10.png" alt="Valid XHTML 1.0!" />
                     </a>
                  </td>
                  <td>
                     <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://sinsrevival.com" rel="external">
                        <img src="images/vcss.png" alt="Valid XHTML 1.0!" />
                     </a>
                  </td>
                  <td>
                     <a href="http://redhat.com" rel="external">
                        <img src="images/redhat.gif" alt="Valid XHTML 1.0!" />
                     </a>
                  </td>
               </tr>
            </table>
      </center>

         </td>
      </tr>
      <tr>
         <td>

         <br />
            <div>
               Made in Photoshop 7 // Notepad<br />
               Best View: 1024 x 768 // Mozilla 1.5<br />

Load Time: 0.013 // Views: 14
            </div>

         </td>
      </tr>
   </table>
</center>
</body>

</html>
It looks fine in Mozilla but in IE it's totally screwed. It won't align to the center for some reason! O_O

-Nay
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Firstly, <center> has been deprecated since HTML 4. I'm assuming the code only validated because you're using a transitional doctype (try giving the page a strict doctype and it'll complain then). If you really want to write proper XHTML you are going to have to use the strict DTD:

Code: Select all

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
To center the table (accounting for an IE bug) replace the center tags with a div tag which has a style set to it of text-align: center. Then make sure that the table's own style includes one for margin which sets the left and right to auto, e.g. margin: 0 auto;.

Quick example:

Code: Select all

<div style="text-align: center;">
<table style="margin: 0 auto;">
<!-- Table stuff -->
</table>
</div>
Mac
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

Now I have:

Code: Select all

<?xml version="1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <title>
      &#1111;Sinsrevival.com] - Comming Soon
   </title>

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta name="Keywords" content="Blog, Weblog, Anime, PHP, Jpop, Punk Rock" />
   <meta name="Description" content="Daily happenings of your one and only Nay" />
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="cache-control" content="no-cache" />

   <link rel="stylesheet" href="css/splash.css" />

   <script type="text/javascript" src="js/external.js">
   </script>

</head>

<body>
<div id="main_div">
   <table cellpadding="0" cellspacing="0" border="0" id="main">
      <tr>
         <td id="image">

               <img src="images/beta_main.jpg" alt="Coming Soon!" />

         </td>
      </tr>
      <tr>
         <td id="links">
            <table cellpadding="0" cellspacing="0" border="0" id="info">
               <tr>
                  <td>
                     <a href="http://validator.w3.org/check?uri=http://sinsrevival.com" rel="external">
                        <img src="images/valid-xhtml10.png" alt="Valid XHTML 1.0!" />
                     </a>
                  </td>
                  <td>
                     <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://sinsrevival.com" rel="external">
                        <img src="images/vcss.png" alt="Valid XHTML 1.0!" />
                     </a>
                  </td>
                  <td>
                     <a href="http://redhat.com" rel="external">
                        <img src="images/redhat.gif" alt="Valid XHTML 1.0!" />
                     </a>
                  </td>
               </tr>
            </table>

         </td>
      </tr>
      <tr>
         <td>

         <br />
            <div>
               Made in Photoshop 7 // Notepad<br />
               Best View: 1024 x 768 // Mozilla 1.5<br />

Load Time: 6.806 // Views: 37
            </div>

         </td>
      </tr>
   </table>
</div>
</body>

</html>
It works great in IE now but it looks screwed in Mozilla O_O. bah, i knew i was away from client side too long =(.

-Nay
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

nay: to center my pages i have this in my css that i link:

body {
background-color:#000000;
color:#e00000;
text-align:center;
margin:auto;
}


everything is centered... then again, all my tables tke a class and every class has margin:auto as well as a double since some browsers need that.
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

Ya, know, it would probably help us to see the CSS behind the scenes ;)

Mac
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

Right now:

index.php:

Code: Select all

<?php

function utime (){
$time = explode( " ", microtime());
$usec = (double)$time[0];
$sec = (double)$time[1];
return $sec + $usec;
}
$start = utime();

echo "<?xml version="1.0"?>\n";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <title>
      [Sinsrevival.com] - Comming Soon
   </title>

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta name="Keywords" content="Blog, Weblog, Anime, PHP, Jpop, Punk Rock" />
   <meta name="Description" content="Daily happenings of your one and only Nay" />
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="cache-control" content="no-cache" />

   <link rel="stylesheet" href="css/splash.css" />

   <script type="text/javascript" src="js/external.js">
   </script>

</head>

<body>

   <div class="center">
      <img src="images/beta_main.jpg" alt="Comming Soon!" />
   </div>

   <div class="center">

      <a href="http://validator.w3.org/check/referer" rel="external">
         <img src="images/valid-xhtml10.png" class="link" alt="Valid XHTML 1.0" />
      </a>

      <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external">
         <img src="images/vcss.png" class="link" alt="Valid CSS 2.0" />
      </a>

      <a href="http://www.redhat.com" rel="external">
         <img src="images/redhat.gif" class="link" alt="RedHat Rocks!" />
      </a>

      <br />

   </div>

   <div class="center">

      Best View: 1024 x 768 // Mozilla 1.5<br />
      Made in: Photoshop 7 // Notepad<br />

<?php
$end = utime();
$run = $end - $start;
$run = substr($run, 0, 5);

$arr = file("xtras/count.txt");
$cnt = $arr[0] + 1;
$fld = fopen("xtras/count.txt", "w");
$flw = fwrite($fld, $cnt);
fclose($fld);

echo "Load Time: " . $run . "secs // Views: " . $cnt;
?>

   </div>

</body>

</html>
default.css:

Code: Select all

body &#123;
margin:0px;
background-color:#5F444D;
background-image:url(../images/beta_bg.jpg);
background-repeat:repeat-y;
background-position:center;
font-family:verdana, sans-serif;
font-size:8.5pt;
color:#000000;
text-align:center;
&#125;

img &#123;
background-color:transparent;
color:#000000;
border-style:none
&#125;

img.link &#123;
background-color:transparent;
color:#000000;
padding-left:10px;
padding-right:10px;
text-align:left;
&#125;

div.center &#123;
background-color:transparent;
color:#000000;
text-align:center;
&#125;
I tried putting the table in the DIV but it didn't work for some reason. I saw doing:

Code: Select all

&lt;div&gt;
   &lt;div&gt;
      &lt;img src="bla.jpg" alt="" /&gt;
   &lt;/div&gt;
   &lt;div&gt;
      &lt;img src="bla.jpg" alt="" /&gt;
   &lt;/div&gt;
&lt;/div&gt;
but the images don't align next to another put it creates a line break between another.

-Nay
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post by twigletmac »

You can float divs to get them next to each other. A very basic example:

Code: Select all

<div>
   <div style="float: left;">
      <img src="bla.jpg" alt="" />
   </div>
   <div style="float: right;">
      <img src="bla.jpg" alt="" />
   </div>
</div>
Mac
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

woohoo yay! Now that helped a lot.

No more tables baby :lol:...

-Nay
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post by Nay »

Ah Crap, I'm going crazy over the center thing again:

Now I've got:

Code: Select all

<?php

function utime (){
$time = explode( " ", microtime());
$usec = (double)$time[0];
$sec = (double)$time[1];
return $sec + $usec;
}
$start = utime();

echo "<?xml version="1.0"?>\n";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

   <title>
      [Sinsrevival.com] - Comming Soon
   </title>

   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta name="Keywords" content="Blog, Weblog, Anime, PHP, Jpop, Punk Rock" />
   <meta name="Description" content="Daily happenings of your one and only Nay" />
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="cache-control" content="no-cache" />

   <link rel="stylesheet" href="css/splash.css" />

   <script type="text/javascript" src="js/external.js">
   </script>

</head>

<body>

   <div class="center">
      <img src="images/beta_main.jpg" alt="Comming Soon!" />
   </div>

<div class="center">
<p>
      <div class="cell">
         <a href="http://validator.w3.org/check/referer" rel="external">
            <img src="images/valid-xhtml10.png" class="link" alt="Valid XHTML 1.0" />
         </a>
      </div>

      <div class="cell">
         <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external">
            <img src="images/vcss.png" class="link" alt="Valid CSS 2.0" />
         </a>
      </div>

      <div class="cell">
         <a href="http://www.redhat.com" rel="external">
            <img src="images/redhat.gif" class="link" alt="RedHat Rocks!" />
         </a>
      </div>
</p>
   <br /><br /><br />

</div>

   <div class="center">
      Best View: 1024 x 768 // Mozilla 1.5<br />
      Made in: Photoshop 7 // Notepad<br />

<?php
$end = utime();
$run = $end - $start;
$run = substr($run, 0, 5);

$arr = file("xtras/count.txt");
$cnt = $arr[0] + 1;
$fld = fopen("xtras/count.txt", "w");
$flw = fwrite($fld, $cnt);
fclose($fld);

echo "Load Time: " . $run . "secs // Views: " . $cnt;
?>

   </div>

</body>

</html>
and:

Code: Select all

body &#123;
margin:0px;
background-color:#5F444D;
background-image:url(../images/beta_bg.jpg);
background-repeat:repeat-y;
background-position:center;
font-family:verdana, sans-serif;
font-size:8.5pt;
color:#000000;
text-align:center;
&#125;

img &#123;
background-color:transparent;
color:#000000;
border-style:none;
&#125;

div.center &#123;
background-color:transparent;
color:#000000;
text-align:center;
&#125;

div.cell &#123;
background-color:transparent;
color:#000000;
text-align:center;
float:left;
padding-left:10px;
padding-right:10px;
&#125;
and I get:

http://www.silonetwork.com/nay

:(

-Nay
Post Reply