20 replies [Last post]
smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

http://voyagerspoland.info/Photos.htm

Hello
I have only just started playing with css and would appreciate some help please on creating a gallery page for thumbnails. I am using Lytebox to display the larger image which works after a fashion (I have a missing link somewhere because the buttons do not show).
How do I get the thumbnails to display like a gallery, four or five images across etc. Also does the css need to be added to the page or is a link inserted for a new file.....
Thanks very much

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I believe Gary's got a CSS

I believe Gary's got a CSS gallery tutorial floating around somewhere. http://gtwebdev.com/workshop/layout/inline-block-gallery.php might get you in the right direction. Gary sets his galleries in lists. Some people use other elements. Nobody I know uses tables and p's : )

Disable all the lightbox stuff while working on the CSS. You would like to have your CSS sheet an external sheet, referenced in your HTML documents' s with the tag. This way, your single CSS sheet can be referenced by as many gallery pages as you need to make.

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Just the sort of thing I was

Just the sort of thing I was after. Good idea about having an external sheet (I'll have to get back on how to write the link) but for the moment on a test gallery I think I'll include the css on the page. How does the css know where to place the thumbnails on the page please...

Thanks again
Happy New Year

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 36 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Er Poes wrote a rather oddly

Er Poes wrote a rather oddly veiled reference to a markup error - actually one of a few that occur in the head of the page - this might have gone unnoticed but I'm afraid that it requires highlighting.

The number and type of errors strongly suggest that you are not as yet familiar with markup and are allowing the ghastly FP to insert crud code amongst some of the issues.

You have two head statement, in fact there are a number of instances where you are duplicating/triplicate things you only need one meta charset; the FP one is illegal the nasty windows-1252 char set uses characters in positions that are reserved and not meant to be used, thus this char set mustn't ever see the light of day, get rid of it. You have two further meta charsets both iso-8858-1 remove the second instance keep the first.

There are some duplicate stylesheet links, there is no reason for this so loose one of them - incidentally those link tags are how you call an external stylesheet, so when ready simply cut your embedded styles into their own file and link to it in the same manner as the other link tags.

The DTD (DocType) is a quirks mode invoking one, transitional without a url, this will cause problems especially if you attempt to use any of Gary's code as it's almost certainly written to Standards mode. As a quick fix view the source of this forums pages and copy and paste that DTD replacing your one.

lastly - and I'm concious that I don't want to send you into a state of despair over all this - your content stucture markup is not the best firstly the use of tables isn't met with much approval any longer; the table layout aside please do endeavour to loose the font tags they are simply presentational and are not used any longer, all that they achieve is performed through CSS, and it's only FP behaving badly that they are there.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

"lastly - and I'm concious

"lastly - and I'm concious that I don't want to send you into a state of despair over all this" talk about Happy New Year - but I do understand what you are getting at even if I am going to have a lot of trouble fixing the problems. Can I blame fp for some of the troubles!
It was my intension to get something up & running and then gradually
move over to "expression" which I understand is more compliant.
I'll work on the code.
Happy New Year

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

smokeyone wrote:<snip> It

smokeyone wrote:

It was my intension to get something up & running and then gradually
move over to "expression" which I understand is more compliant.
I'll work on the code.
Happy New Year

There are only about 80 html tags total, and probably less than 30 that are used with any regularity. I mention this because it should be easier to learn to use them than it is to learn to use a wysiwyg editor such as FP/Expression or Dreamweaver. It will also be easier to use good markup to begin with than it is to fix those applications' crappy markup.

Go ahead on your current path. We'll try to help you fix the FP stuff. Once you're up and running, begin immediately working toward a purely hand coded refactoring of the site.

Do keep in mind that any movement on the page is distracting. That can make it very difficult for people with ADD, dyslexia, epilepsy, etc., to use the site. To the extent that a design makes it easier for the visitor to use the site, it is successful. Where it doesn't help, or makes it less accessible or usable, it fails.

You should also reduce the images to actual thumbnail size rather than use 4MB+ of images. Use a state of the art image manipulation suite like ImageMagick. For one thing, it will get rid of the gawd-awful moiré pattern artifact in the roof tiles. For another, it will reduce the weight of the page by a potload.

gt@aretha:~$ ls -l *-2.jpg
-rw-r--r-- 1 gt gt <span style="color:red">272075</span> 2009-01-02 01:18 polish-trip-2.jpg
-rw-r--r-- 1 gt gt   <span style="color:red">3218</span> 2009-01-02 01:19 t-polish-trip-2.jpg

This is the command I used for this conversion.gt@aretha:~$ convert -resize 110x polish-trip-2.jpg t-polish-trip-2.jpgSee images from the command line for another look at the process.

cheers,

gary

AttachmentSize
t-polish-trip-2.jpg 3.14 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hugo wrote:Er Poes wrote a

Hugo wrote:

Er Poes wrote a rather oddly veiled reference to a markup error - actually one of a few that occur in the head of the page - this might have gone unnoticed but I'm afraid that it requires highlighting.

Lawlz, no actually when I see lots and lots of HTML errors sometimes I just try to answer the specific question cause I know otherwise I'll post one of those book-long answers trying to address everything. I don't think I even saw the multiple s but scrolled directly to what he was using for the gallery itself. My "s" comment was referring to the head of each (of I assumed many) HTML docs in response to the question of how to get the CSS linked to the HTML.

++ to the ImageMagick thing-- at the very least, having browsers download the full-sized image while only showing a badly shrunken version (as browsers suck at this) is terribly slow even for those on dial-up. If command-line isn't easily doable, know that at least for a small number of images you could also just use whatever image manipulation program that came with your OS (except maybe Paint). It's slower than using something like ImageMagick (or any programming verion like PythonMagick or PerlMagick or whatever) because with IM you can resize a large number of images at once, or have it automated in a script and resize-as-they-come if people (or even you) will be uploading a lot of files all the time. I'll bet there's even a PHP Magick or some such out there.

One of the sites I was building has a scrolling gallery of home photos. While my static example had resized images, the online site was still showing the full-sized images! The whole page would slow down so bad you couldn't even scroll down or anything to read more content until they were all loaded! I really had to put my Whining and Ranting abilities to the test to get that one fixed. Now even the retarded browsers can load that page pretty well.

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Thank you all for trying to

Thank you all for trying to help. I checked with the validator and there are now only about 30 errors. Did try to fix some easy ones but for instance when I tried to delete -
Gallery and or the page went to pot. Line 179 according to fp but the validator lines are sometimes different!
Added thumbnails as suggested but when I understand it better the code
seems the way to go. Perhaps someone could make a suggestion on where to start fixing the errors without mixing up the page.

I also now realise there are either missing beginning tags without end tags and end tags without beginning tags....

without

or without ). Tried to fix some of these for instance Line 100 but again the page went up the creek.

Thank very much

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Perhaps someone could

Quote:

Perhaps someone could make a suggestion on where to start fixing the errors without mixing up the page.

Sometimes, if a page starts out with a lot of errors, fixing them will simply make the page look worse. Before worrying about that, continue fixing-- understanding what the validator is really complaining about and knowing what the best solution is comes with experience, I think. Anyway, if all errors are fixed and the page looks terrible, then you know that it's what you've coded, not how-- and it simply needs to be changed entirely, rewritten. That's ok. Gawd knows how often I've rewritten pages because I wrote them in the wrong way at first. Sometimes an error-filled page looks the way you want it due to the browsers' error rendering, so fixing the errors makes the page look not the way you want.

Fix as many errors as you can, and come back, presenting your fixed code. If you've fixed something "incorrectly" (meaning, it shut the validator up but we know it's not the best way to go) we'll help you through it and give suggestions.

Having a picture of what the end product should be also helps us.

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Thanks for the advice. Where

Thanks for the advice. Where would you start........

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Always with the first error.

Always with the first error. Often errors cascade. Often a single true error will set off multiple errors in the validator (an unclosed tag does this, makes every other tag stop matching).

If you're stuck on the very first error, post it here and the relevant code. Sometimes, even though now the validator has a little explanation under the error, it's still not always clear WHAT it's *beep*ing about.

When I first started this web stuff, there were no helpful comments. Once my husband had a without a . Took us a while to figure out that when the validator kept saying " has no closing tag" (when we could clearly see that it DID have a ), it really meant "the isnt' complete because it doesn't have the required child inside". Nowadays it explains that a bit better.

Some blocks are required to have other blocks as children-- people get errors with inputs as direct children of forms, for instance. Some properties which were ok in older HTML DTDs became illegal with the Strict or the XHTML DTDs (like forms may no longer have "name"s). Some of this stuff I actually learned from a validator first! : )

Just plow through them, one at a time, starting with the first one (now things like "no alt text in the image" you can fix in any order and it's easy enough). Don't bother looking at how your page looks after fixing them, if it was built to error-rendering-- just ignore how it looks, and shore up the code. If you get stuck, post it here. : )

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Thank you for trying to

Thank you for trying to help. I have actually listed the first two errors because I think they are tied together.

Line 51, Column 85: NET-enabling start-tag requires SHORTTAG YES.
….css" type="text/css" media="screen" />

Line 56, Column 6: end tag for element "HEAD" which is not open.

var clock24hour = "0"; // 0 = 12 hour clock, 1 = 24 hour clock

I have added a few extra lines so that you can see the context in which it was written - also with regard to the Head which is not open. There is no other closed tag which has me confused.
For the full version
http://voyagerspoland.info/Photos.htm

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Here's what you currently

Here's what you currently have:

(btw you have an incomplete doctype as Hugo said)	
<head>
<script type="text/javascript" src="flashobject.js"></script>
 
<title>Gallery</title>
 
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<meta name="keywords" content="Place your keywords here">
<meta name="description" content="Place your description here">
<meta name="robots" content="index, follow">
<meta name="distribution" content="global">
<META NAME="rating" CONTENT="general">
<META NAME="Content-Language" CONTENT="english">
 
 
 
 
<link href="styles/graphics-fullscreen.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/menu.css" rel="stylesheet" type="text/css">
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script src="javascript/special_functions.js" language="JavaScript" type="text/javascript"></script>
<script src="javascript/AC_RunActiveContent.js" language="JavaScript" type="text/javascript"></script>
<script src="javascript/AC_Macromedia.js" language="JavaScript" type="text/javascript"></script>
 
 
<script language="javascript" type="text/javascript">
// if this page is in:
//   the root folder, then set this variable to ./
//   a sub folder one level deep, then set this variable to ../
//   a sub folder two levels deep, then set this variable to ../../
var rootFlashLocation = "./";
var music_on = "0";    // 0 = off, 1 = on
var clock24hour = "0"; // 0 = 12 hour clock, 1 = 24 hour clock
    </script>
 
 
 
 <script type="text/javascript" language="javascript" src="js/lytebox/lytebox.js"></script>
 <span style="font-weight:bold"><link rel="stylesheet" href="js/lytebox/lytebox.css" type="text/css" media="screen" /></span>
 
 
 
 
</head>

I bolded what the validator is having issues with. Because you've closed that tag (in HTML4, your current DTD, they may NOT be closed, while in XHTML they MUST be closed), the validator can't figure out why there's and I think it's just giving a standard error. I'll bet if you remove the / at the end of that, the validator will quit saying there's an unclosed .

Though here's how I'd arrange your head and doctype stuff:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<span style="font-weight:bold">   "http://www.w3.org/TR/html4/strict.dtd"></span>
<html <span style="font-weight:bold">lang="en-gb"</span>>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Gallery - Voyagers Poland</title>
<meta name="keywords" content="Place your keywords here"><span style="font-weight:bold"> don't leave this tag in here with fake keywords</span>
<meta name="description" content="Place your description here"><span style="font-weight:bold"> fill this in now</span>
 
<link href="styles/graphics-fullscreen.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/menu.css" rel="stylesheet" type="text/css">
<link href="js/lytebox/lytebox.css" rel="stylesheet" type="text/css" media="screen">
 
<script src="javascript/special_functions.js" type="text/javascript"></script>
<script src="javascript/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="javascript/AC_Macromedia.js" type="text/javascript"></script>
<script type="text/javascript" src="flashobject.js"></script>
 
<script type="text/javascript">
// if this page is in:
//   the root folder, then set this variable to ./
//   a sub folder one level deep, then set this variable to ../
//   a sub folder two levels deep, then set this variable to ../../
var rootFlashLocation = "./";
var music_on = "0";    // 0 = off, 1 = on
var clock24hour = "0"; // 0 = 12 hour clock, 1 = 24 hour clock
    </script>
 
<script type="text/javascript" src="js/lytebox/lytebox.js"></script>
</head>

You still hadn't removed the extra tags Hugo told you to remove, like the Windows charset one.

I place the content-language and charset meta tags before the title, so that the very first thing a user agent reads (the title) does it in the correct language and shows all the characters correctly. Because I was told that some screen readers check the meta tag while others look for the lang attribute on the tag, I added both.

I do all my meta tags (robots automatically follow unless told otherwise, you shouldn't need any robots tags), then all my css link tags, and finally scripts at the end. You especially have a lot of scrips, let people be able to see the rendered page even if the scripts are still loading.

It's good to start out with a strict doctype, since then the validator can catch ALL your errors, not just the ones that even bad old DTD's let go. This means you'll need to remove the language="javascript" stuff from your javascript links (as I have above) because that's old-fashioned. All you need is the text/javascript section. The langugae-javascript thing I think was added by Netscape way back when or something. Maybe someday in the future we can actually set the correct MIMEtype for Javascript in the head (there is a content script type tag but I have no clue if it does anything in any browsers).

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Thanks again for the

Thanks again for the help.

I thought I did delete the extra charset - the dup one..but could not see the ref to 8859 only 8858. Did Hugo really mean to delete all charsets!

Will try and continue where you left off and thanks for the start.
Will also remember to delete the extra tags.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Did Hugo really mean

Quote:

Did Hugo really mean to delete all charsets!

No, just the crappy Windows one:

: )

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Finally found the 1252

Finally found the 1252 charset and deleted it - trouble is the validator now says it's an error because it's missing. Also I have only just realised that the fp code is not the same as the source code on the actual web page - is this correct because some of errors mentioned - for instance font colours are not listed in fp.......but are in the source code..am now playing with a copy of my web page not the original.
http://voyagerspoland.info/Phootoos.htm

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 46 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Finally found the 1252

Quote:

Finally found the 1252 charset and deleted it - trouble is the validator now says it's an error because it's missing.

You must have A charset listed. But you had two-- the Windows one and a better one. The better one should still be there, but I'll bet it got deleted too, leaving you with no charset (and thus throwing an error).

I really can't vouch for something as nasty as FrontPage, and I wouldn't be surprised if it's inserting garbage. A regular text editor (like Notepad) is safer because the only thing there is definitely what you typed.

I'm no expert, but I fake one on teh Internets

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

It's looks as though the

It's looks as though the quicker I do away with fp the better.....

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

smokeyone wrote:It's looks

smokeyone wrote:

It's looks as though the quicker I do away with fp the better.....

Oh, how very true.

Regarding the meta element, Your server does not include the char-set, so it should be set in the document. For best results, especially since you will likely need to include Eastern European characters, use utf-8. i.e.

 <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

Now, of course, you must actually save your docs as utf-8. That should be an option on any decent editor. Do NOT save as unicode.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

smokeyone
Offline
Regular
Last seen: 10 years 36 weeks ago
Joined: 2008-12-31
Posts: 11
Points: 0

Thanks very much for the

Thanks very much for the tip. Just to check please - should the start of the head look something like this now -----

content="text/html; charset=utf-8" />

Gallery

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 13 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

This:<meta

This:

<meta http-equiv="Content-Type">
content="text/html; charset=utf-8" />
should be:
<meta http-equiv="content-type"
        content="text/html; charset=utf-8">

BTW, Google tries to use the meta description in its search results. Try to make it conversational and comprehensive.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.