View Full Version : photojournalist photoblog based on fluid template
wayne12
07-14-2005, 04:56 PM
Hello I created a photoblog site based on a modified dark version of the fluid template. Also I modified wordpress template and attached it to the site.
You can view it here: http://www.photosnprocess.com/
Your thoughts and help with vaild code.
Thanks
Wayne
Joe[y]
07-14-2005, 05:10 PM
yey. love what you did with it!
also, where's this wordpress template you mentioned? it sounds exciting as i was working on a translation of the default wordpress template a while back before i got busy.
wayne12
07-14-2005, 06:41 PM
Thanks
the wordpress blog is on the blog link : http://photosnprocess.com/blog/
It uses the template: Black-LetterHead 1.0 by Ulysses Ronquillo Based on Robin Hastings’ Letterhead, but with a black background.
Wayne
Connie
07-14-2005, 06:43 PM
well, let's start the obvious notorious sermon:
- load the firefox extension "webdeveloper"
- open your site in firefox
- tools / validate html
and here comes the bumper: your page is not valid at all!
no codepage!!!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
what is this? 2 times <head> but no codepage!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
that's why you get encoding errors at line 14!
8: <script language="JavaScript"> <!--
9: // No rightclick script v.2.5
10: // (c) 1998 barts1000
11: // barts1000@aol.com
12: // Don't delete this header!
13:
14: #### encoding problem on this line, not shown ####
15:
16: // Don't edit below!
var message="Sorry, that function is disabled.\n\nContents & Graphics Copyright �your name\nOur work is not Public Domain, and should NOT be taken from this site."; // Message for the alert box
it's this line
please fix that!
a lot of errors so the CSS can't be validated at all, just this one message:
that's why your RSS-feed doesn't validate at all as well
sorry to be so encouraging, but it's not only a beautiful surface, a good machine under the hood is necessary as well!
please repair and we can continue with helping out (if you want that!)
regards, Connie
PS: I forgot to welcome you here!
Welcome!
Line 143:
Line 143
Column 3
The element type "div" must be terminated by the matching end-tag "</div>".
wayne12
07-14-2005, 07:54 PM
whoa... ok will fix in next couple of days or so.
thanks
Wayne
Connie
07-14-2005, 08:48 PM
Wayne,
don't take me too serious, but fix the errors, you will see, the page will be valid, load better, will be presented better in any browser!
wayne12
07-15-2005, 02:12 AM
Hey i fixed the head link and removed the no copy script but i still can't it to validate ... still need help.
thanks
W
Connie
07-15-2005, 06:42 AM
Wayne,
I must run to the office, this afternoon, (european time.., GMZ) ok?
wayne12
07-15-2005, 01:37 PM
ok
Connie
07-15-2005, 04:11 PM
Wayne,
I downloaded your site, and validated the code
the problems are a many:
1) close stand-alone-tags with a slash, example: <br> => <br />
2) the meta-tags must have a closing-slash!
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
(only one codepage-directive, you had two!)
3) all link-tags must have a closing slash!
<link rel="service.feed" type="application/x.atom+xml" href="http://www.photosnprocess.com/&amp;x=atom" title="photosnprocess | J.Sutton Photojournalist" />
4) all img-tags must have a closing slash!
<img src=" ....listed_gray.gif" alt="jsutton photo blog listed" title="jsutton photo blog listed" border="0" height="15" width="88" />
here is a local version of your site, you can compare that with your template and you will see the differences, this html validates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- close the meta tag in the right way, with slash -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- THE TEMPLATE TITLE TAKES IT'S TITLE FROM YOUR CONFIGURED BLOG TITLE. YOU CAN CHANGE THIS IN YOUR ADMIN SECTION --><title>photosnprocess | J.Sutton Photojournalist</title>
<!-- LINK FOR ATOM FEED AUTODISCOVERY -->
<!-- close the links with slash! -->
<link rel="service.feed" type="application/x.atom+xml" href="http://www.photosnprocess.com/&amp;x=atom" title="photosnprocess | J.Sutton Photojournalist" />
<!-- LINK FOR ATOM FEED AUTODISCOVERY -->
<link rel="alternate" type="application/rss+xml" title="photosnprocess | J.Sutton Photojournalist - RSS feed" href="http://www.photosnprocess.com/index.php?x=rss" />
<!-- ADD YOUR OWN META TAGS HERE... THIS CAN BE USEFUL ESPECIALLY FOR SEARCH ENGINES -->
<meta http-equiv="imagetoolbar" content="false" />
<!-- THIS IS THE LINK TO THE EXTERNAL CASCADING STYLESHEET (CSS)... IT SHOULD REMAIN UNCHANGED -->
<link rel="stylesheet" href="wayne_dateien/style.css" type="text/css" />
<!-- SOME JAVASCRIPT TO SPICE UP YOUR BLOG! -->
<script language="javascript" type="text/javascript">
<!-- BEGIN
function flip(rid)
{
current=(document.getElementById(rid).style.displa y == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
// End -->
</script>
<meta name="PBO.auth" content="c870cf99760c05fff6d86df4b52066cc" />
</head>
<body>
<div id="wrapper">
<!-- IF YOU WANT TO CHANGE THE HEADER TEXT OF YOUR SITE FROM IT'S DEFAULT TITLE THEN SIMPLY REPLACE photosnprocess | J.Sutton Photojournalist WITH YOUR NEW HEADER. -->
<div id="top">
<!-- <span id="header"><a href="index.php" title="Return to front page">photosnprocess | J.Sutton Photojournalist</a></span> -->
<a href="http://www.photosnprocess.com/index.php"><img src="wayne_dateien/logo-610.gif" border="0" alt="logo" /><br /></a>
</div>
<!-- (START) NAVIGATION BAR -->
<div id="image-navigation">
<div class="navigation-left">
<!-- PERMALINK AND IMAGE NAVIGATION BELOW, REARRANGE TO YOUR OWN NEEDS -->
<span class="permalink"><a href="http://www.photosnprocess.com/?showimage=139">PERMALINK</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.photosnprocess.com/index.php?showimage=117">Previous</a> | <a href="http://www.photosnprocess.com/index.php">Current</a> |
</div>
<!-- MENU... ADD FURTHER MENU LINKS FOLLOWING THE SAME FORMAT IF YOU WISH-->
<div class="navigation-right">
<a href="http://www.photosnprocess.com/index.php?x=browse"> Gallery </a><a href="http://www.photosnprocess.com/?x=about"> About </a><a href="http://www.photosnprocess.com/?x=resume"> Resume </a><a href="http://photosnprocess.com/blog/"> Blog </a><a href="http://www.photosnprocess.com/?x=contact"> Contact </a></div>
</div>
<!-- (FINISH) NAVIGATION BAR -->
<!-- (START) PHOTO POST -->
<div id="image">
<a href="http://www.photosnprocess.com/index.php?showimage=117">
<img id="photo" src="wayne_dateien/20050713204440_us.jpg" alt="Bride and Groom" title="Bride and Groom" height="459" width="700" /></a>
</div>
<!-- (FINISH) PHOTO POST -->
<!-- (START) IMAGE INFORMATION -->
<div id="image-info">
<span id="image-title">Bride and Groom</span>
<span style="font-size: 9px; font-style: italic;">
2005-07-13 20:44:40</span>
</div>
<div id="image-exif">
<a href="http://www.photosnprocess.com/index.php?x=browse&amp;category=12">[Weddings]</a> &nbsp;<a href="http://www.photosnprocess.com/index.php?x=browse&amp;category=1">[default]</a> &nbsp;
<!-- (FINISH IMAGE INFORMATION -->
<!-- THIS IS YOUR EXIF INFORMATION (DATA STORED BY YOUR DIGITAL CAMERA). CHOOSE WHICH TAGS YOU WANT TO INCLUDE FROM THE CHOICE GIVEN IN 'DOC/PIXELPOST-TAGS.TXT'. -->
<strong>NIKON D1H</strong><br />
<strong>1/40 sec</strong><br />
<strong>f 3.5</strong><br />
<strong>17 mm</strong><br />
</div>
<!-- THIS IS WHERE THE ROW OF THUMBNAILS IS DISPLAYED. REMOVE THE <DIV> SECTION BELOW IF YOU DON'T WANT THE THUMBS DISPLAYED -->
<div id="thumbrow">
<a href="http://www.photosnprocess.com/index.php?showimage=136">
<img src="wayne_dateien/thumb_20050708212936_snowhill_parade1.jpg" alt="Salute" title="Salute" class="thumbnails" height="75" width="100" /></a>
<a href="http://www.photosnprocess.com/index.php?showimage=133"><img src="wayne_dateien/thumb_20050708212050_slipn_slide.jpg" alt="Summer Fun" title="Summer Fun" class="thumbnails" height="75" width="100" /></a>
<a href="http://www.photosnprocess.com/index.php?showimage=118"><img src="wayne_dateien/thumb_20050620160259_bench.jpg" alt="An empty afternoon" title="An empty afternoon" class="thumbnails" height="75" width="100" /></a>
<a href="http://www.photosnprocess.com/index.php?showimage=117"><img src="wayne_dateien/thumb_20050616231545_violin%2520players.jpg" alt="Little Twinklers" title="Little Twinklers" class="thumbnails" height="75" width="100" /></a>
<a href="http://www.photosnprocess.com/index.php?showimage=139"><img src="wayne_dateien/thumb_20050713204440_us.jpg" alt="Bride and Groom" title="Bride and Groom" class="current-thumbnail" height="75" width="100" /></a>
</div>
<!-- THIS IS THE FOOTER... YOU CAN ADD YOUR OWN LINKS OR INFORMATION TO THIS SECTION IN THE SAME FORMAT AS BELOW BUT I WOULD APPRECIATE IT IF YOU KEPT THE LINK TO JLSPURLING.COM - BUT THIS ISN'T OBLIGATORY! -->
<div id="footer">
<a href="http://www.pixelpost.org/" target="_new">Powered by Pixelpost 1.4</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://photos.jlspurling.com/" target="_new">Original Fluid Template by JLSpurling.com</a> | J.Sutton copyright © 2005</div>
<div align="center"><a href="http://www.wayne-sutton.com/" target="_blank"><img src="wayne_dateien/bywayne.png" alt="setup by wayne sutton" title="setup by wayne sutton" border="0" height="15" width="80" /> </a>
<a href="http://www.photoblogs.org/"><img src="wayne_dateien/photoblogs_gray.gif" alt="Photoblogs.org" title="Photoblogs.org" border="0" /></a>
<a href="http://www.photoblogs.org/member/jsutton" target="_blank">
<img src="wayne_dateien/listed_gray.gif" alt="jsutton photo blog listed" title="jsutton photo blog listed" border="0" height="15" width="88" /></a>
<a href="http://www.pixelpost.org/" target="_blank"><img src="wayne_dateien/poweredbypixelpost.png" alt="Pixelpost" title="pixelpost" border="0" height="15" width="115" /></a>
<a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank"> </a><a href="http://validator.w3.org/check/referer"><img src="wayne_dateien/validxhtml.jpg" alt="xhtml" title="xhtml" border="0" height="15" width="80" />
</a><a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank"> </a><a href="http://www.photosnprocess.com/index.php?x=rss"><img src="wayne_dateien/feedrss.jpg" alt="rss feed" title="rss feed" border="0" height="15" width="80" />
</a><a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank"> </a><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img src="wayne_dateien/validcss.jpg" alt="valid css" title="valid css" border="0" height="15" width="80" /></a><a href="http://creativecommons.org/licenses/by-nc-nd/2.5/" target="_blank"><img src="wayne_dateien/cc2.png" alt="" title="creative commons" border="0" height="15" width="80" /></a>
<a href="http://www.apple.com/"><img src="wayne_dateien/appleop.gif" alt="apple macintosh iphoto photo" title="apple macintosh" border="0" height="15" width="80" /></a>
<a href="http://www.spreadfirefox.com/" target="_blank"><img src="wayne_dateien/firefox.png" alt="get firefox" title="get firefox" border="0" height="15" width="80" /></a>
<a href="http://www.apple.com/macosx/features/safari/" target="_blank"><img src="wayne_dateien/safari.gif" alt="apple safari" title="apple safari" border="0" height="15" width="80" /></a>
<a href="http://www.wordpress.org/" target="_blank"><img src="wayne_dateien/wp-button-2.png" alt="wordpress" title="wordpress" border="0" height="15" width="80" /></a>
</div>
</div></body></html>
now the CSS:
what is this????
a:link {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
#ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;}
the CSS cannot be read, as there is this #ffffff; standing alone, no element there to which it belongs....
try to fix it and validate it from Firefox, that's very handy
vBulletin® v3.7.3, Copyright ©2000-2013, Jelsoft Enterprises Ltd.