Page 1 of 1
XHTML
Posted: Thu Nov 13, 2003 8:55 am
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
Posted: Thu Nov 13, 2003 9:05 am
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
Posted: Thu Nov 13, 2003 11:11 am
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/
Posted: Thu Nov 13, 2003 11:19 am
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
Posted: Sat Nov 15, 2003 4:20 am
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>
ї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
Posted: Sat Nov 15, 2003 1:35 pm
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
Posted: Sun Nov 16, 2003 8:28 am
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>
ї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
Posted: Sun Nov 16, 2003 10:43 pm
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.
Posted: Mon Nov 17, 2003 2:32 am
by twigletmac
Ya, know, it would probably help us to see the CSS behind the scenes
Mac
Posted: Mon Nov 17, 2003 4:54 am
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 {
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;
}
img {
background-color:transparent;
color:#000000;
border-style:none
}
img.link {
background-color:transparent;
color:#000000;
padding-left:10px;
padding-right:10px;
text-align:left;
}
div.center {
background-color:transparent;
color:#000000;
text-align:center;
}
I tried putting the table in the DIV but it didn't work for some reason. I saw doing:
Code: Select all
<div>
<div>
<img src="bla.jpg" alt="" />
</div>
<div>
<img src="bla.jpg" alt="" />
</div>
</div>
but the images don't align next to another put it creates a line break between another.
-Nay
Posted: Mon Nov 17, 2003 5:50 am
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
Posted: Mon Nov 17, 2003 7:30 am
by Nay
woohoo yay! Now that helped a lot.
No more tables baby

...
-Nay
Posted: Mon Nov 17, 2003 8:34 am
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 {
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;
}
img {
background-color:transparent;
color:#000000;
border-style:none;
}
div.center {
background-color:transparent;
color:#000000;
text-align:center;
}
div.cell {
background-color:transparent;
color:#000000;
text-align:center;
float:left;
padding-left:10px;
padding-right:10px;
}
and I get:
http://www.silonetwork.com/nay
-Nay