Hi

Firstly - I'm pretty new to all of this, and apologise if I'm missing something startlingly obvious.

I'm building a website using php and css, no tables, and is xhtml strict compliant. Not for any particular reason, I just wanted to learn.

Anyway, I have a problem getting a page to validate as xhtml strict because it has a <style type="text/css"> statement in it. The obvious solution is just to put the css in the style.css file, but it's not that simple.

The rogue page is a gallery, which uses the css to display the thumbnails (instead of using tables). The gallery page selects 10 random images to put in the gallery, and re-sizes them appropriately if needed.

My problem is that the thumbnails are displayed using code such as:
a.slide1 {background:url(inc/images/thumbs/20070114-122309-motion.jpg);}
which is currently part of the <style type="text/css"> statement.

I've tried putting the css inline, the page then validates, but the thumbnails aren't displayed.

If you want to have a look at what I'm going on about, the page is http://www.mytortoise.co.uk/index.php?id=gallery (and say hello to Henry while you're there)

and the gallery.php is below.

Any and all help and advice would be greatly appreciated.
Thanks
J

gallery.php

<h3>Random pictures of Henry</h3>
<div id="gallerycontainer">
<?php
//main pics max 250 x 400
dirlist ($campics, shuffle); //shuffled directory of images

//Resize the start image
resize ($campics.$dirlist[0], 400, 250, $galleryimages);
$start=$dirlist[0];
echo "<img class=\"slidek\" src=\"$wrgallery$start\" alt=\"Gallery\" title=\"Gallery\" />";

//Resize the rest of gallery pictures
for ($picnum=1; $picnum<=10; $picnum++) {
resize ($campics.$dirlist[$picnum], 400, 250, $galleryimages);

//Get the file modification time and create Title and Note for each
$name[$picnum]=date("l jS F Y",(filemtime($campics.$dirlist[$picnum])));
$note[$picnum]=date("H:i:s",(filemtime($campics.$dirlist[$picnum])));

//Display the gallery
echo "<a class=\"gallery slide$picnum\" href=\"#nogo\"><span><img src=\"$wrgallery$dirlist[$picnum]\" alt=\"Random picture of Henry\" title=\"$name[$picnum]\" /><br />$name[$picnum]<br />$note[$picnum]</span></a>";
}

//Include thumbnails and CSS statements for them
echo"<!-- php variable css statements -->";
echo"<style type=\"text/css\">";
for ($picnum=1; $picnum<=10; $picnum++) {
resize ($campics.$dirlist[$picnum], 75, 47, $thumbimages);
echo "a.slide$picnum {background:url($wrthumbs$dirlist[$picnum]);}";
}

echo"</style>";
echo"</div>";
?>

    The <style> section must be in the <head> section of your document (not in the <body> section where it's currently appearing).

      Hi

      Yes, I know that's the idea, but when I tried putting the style statements in the head section, nothing worked. I think it maybe a problem with the variables referenced in the style statement being created in the body section - but I don't see how I can change that.

      Now that I'm writing this (whilst I should actually be doing sopme real work!), I'm thinking that I could try putting the entire function in the head section within an if statement so that it only gets called if it's the gallery page, not for every other page. I'll have a go at that this evening when I get in.

      Thanks

      J

        Well surprisingly enough, putting the style statements in the header has sorted it.

        Yeah, I know - pretty obvious really. Sorry!:o

          Write a Reply...