Hi,
I have a couple of design issues with my photo gallery code. This is my previous version using XHTML and CSS and works and looks fine.
This is what it now looks like since I recreated it using PHP (sorry about the loading time).
As you can see there is no curve in the bottom left corner and the footer is all out of place.
I must of messed up my code somewhere.
Anyone help me out? Its really annoying me. Ive included the code for both designs below if that will help.
Heres my previous version
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>FlickrBaby | Nature</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-gb" />
<link href="style.css" media="all" rel="stylesheet" />
</head>
<body id="portfolio">
<div id="container">
<div id="header">
<h1><a href="../" title="flickrbaby"><span>creativ<strong>types</strong></span></a></h1>
</div>
<div id="header-print"></div>
<div id="navigation">
<ul>
<li><a href="flickrbaby.htm">Home</a></li>
<li><a href="member.htm" class="selected">Member</a></li>
<li><a href="../information/">Explore</a></li>
<li><a href="../contact/">Support</a></li>
</ul>
</div>
<div id="content-portfolio">
<h3>Here's your <span class="txt">Photos</span></h3>
<p id="breadcrumb"><strong>Currently viewing:</strong> <a href="member.htm">member</a> » <strong>Nature</strong></p>
<div id="dirdesc">
<p>Below are you nature photos.</p>
</div>
<div id="gallery">
<div class="imgwrapper" style="height:160px;width:124px;text-align:center"><a href="nature-photos.htm"><img src="example1-small.gif" alt="Woods" width="120" height="90" border="0" /></a><a href="nature-photos.htm"><span>Sample 01</span></a></div>
<div class="imgwrapper" style="height:160px;width:124px;text-align:center"><a href="nature-photos-sample2.htm?file=./creative/corporate_id/corp_id_sample_02.jpg"><img src="example2-small.gif" alt="Sample 02" width="120" height="90" /><span>Sample 02</span></a></div>
<div class="imgwrapper" style="height:160px;width:124px;text-align:center"><a href="[file:///D|/Documents](file:///D|/Documents) and Settings/twillis/My Documents/UWE/Year 2/Data Schemes & Applications/Assignment/Website/nature-photos-sample3.htm?file=./creative/corporate_id/corp_id_sample_03.jpg"><img src="example3-small.gif" alt="Sample 03" width="120" height="90" /><span>Sample 03</span></a></div>
<div class="imgwrapper" style="height:160px;width:124px;text-align:center"><a href="/portfolio/index.php?file=./creative/corporate_id/corp_id_sample_04.jpg"><img src="example1-small.gif" alt="Sample 04" width="120" height="90" /><span>Sample 04</span></a></div>
<div class="imgwrapper" style="height:160px;width:124px;text-align:center"><img src="example2-small.gif" alt="Sample 05" width="120" height="90" /><span>Sample 05</span></div>
<div class="imgwrapper" style="height:160px;width:124px;text-align:center"><a href="nature-photos.htm"><img src="example3-small.gif" alt="Sample 06" width="120" height="90" border="0" /></a><span>Sample 06</span></div>
</div>
</div>
<div id="footer">
<p> </p>
<div id="footer-designers">
<p>Designed by Timothy Willis <br />Chris Baines, Peter Williamson </p>
</div>
<div id="footer-uwe">
<p>t: 0117 9322836<br />
m: 07970 298622</p>
</div>
<div id="footer-email">
<p> <br />e:
<script type="text/javascript">
<!--
var username = "enquiries";
var hostname = "flickrbaby.com";
var linktext = username + "@" + hostname;
document.write("<a href=" + "mail" + "to:" + username + "@" + hostname + " title=" + linktext + ">" + linktext + "</a>");
//-->
</script>
</p>
</div>
<div id="footer-copyright">
<p>Copyright © 2005 Flickr<strong>Baby</strong> <a href="">Sign Up </a> <a href="information.htm">About </a> <a href="">Contact </a> <a href="[http://jigsaw.w3.org/css-validator/check/referer" target="_blank">Valid CSS</a> <a href="[url="http://validator.w3.org/check?uri=referer"]http://validator.w3.org/check?uri=referer](http://jigsaw.w3.org/css-validator/check/referer)" target="_blank">Valid XHTML</a></p>
</div>
</div>
</div>
</body>
</html>
Heres the new version (design problem)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>FlickrBaby | Nature</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-gb" />
<link href="style.css" media="all" rel="stylesheet" />
</head>
<body id="portfolio">
<div id="container">
<div id="header">
<h1><a href="../" title="flickrBaby"><span>my<strong>gallery</strong></span></a></h1>
</div>
<div id="header-print"></div>
<div id="navigation">
<ul>
<li><a href="flickrbaby.htm">Home</a></li>
<li><a href="member.htm" class="selected">Member</a></li>
<li><a href="../information/">Explore</a></li>
<li><a href="../contact/">Support</a></li>
</ul>
</div>
<div id="content-portfolio">
<h3>Here's your <span class="txt">Photos</span></h3>
<p id="breadcrumb"><strong>Currently viewing:</strong> <a href="member.htm">member</a> » <strong>Nature</strong></p>
<div id="dirdesc">
<p>Below are you nature photos.</p>
</div>
<div id="gallery">
<div class="imgwrapper" style="height:160px;width:124px;text-align:center">
<?php
require_once('albumdb.php');
include "album_config.inc.php";
$offset = isset($_GET['offset']) ? $_GET['offset'] : 0;
$offsetOriginal = $offset;
$photoQueryResult = retrieve_album_page($offset);
$totalRows = mysql_numrows($photoQueryResult);
?>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="580" id="AutoNumber1">
<?php while ($row = mysql_fetch_array($photoQueryResult)) : ?>
<?php
$photoId = $row['photoId'];
$title = $row['title'];
$offset++;
?>
<div class="float">
<a href="mainphoto.php?photoid=<?=$photoId?>&offset=<?=$offsetOriginal?>">
<img src="<?=IMAGE_PATH.$photoId?>" width="<?=THUMBNAIL_WIDTH?>" height="<?=THUMBNAIL_HEIGHT?>" border="0" alt="<?=$title?>" />
</a>
<br />
<p><?=$title?></p>
</div>
<?php endwhile; ?>
<div>
<p>
<?=previous_page($offset, $totalRows)?>
<br />
<?=next_page($offset)?>
</p>
</div>
</div>
<div id="footer">
<p> </p>
<div id="footer-designers">
<p>Designed by Timothy Willis <br />Chris Baines, Peter Williamson </p>
</div>
<div id="footer-uwe">
<p>t: 0117 9322836<br />
m: 07970 298622</p>
</div>
<div id="footer-email">
<p> <br />e:
<script type="text/javascript">
<!--
var username = "enquiries";
var hostname = "flickrbaby.com";
var linktext = username + "@" + hostname;
document.write("<a href=" + "mail" + "to:" + username + "@" + hostname + " title=" + linktext + ">" + linktext + "</a>");
//-->
</script>
</p>
</div>
<div id="footer-copyright">
<p>Copyright © 2005 Flickr<strong>Baby</strong> <a href="">Sign Up </a> <a href="information.htm">About </a> <a href="">Contact </a> <a href="[http://jigsaw.w3.org/css-validator/check/referer" target="_blank">Valid CSS</a> <a href="[url="http://validator.w3.org/check?uri=referer"]http://validator.w3.org/check?uri=referer](http://jigsaw.w3.org/css-validator/check/referer)" target="_blank">Valid XHTML</a></p>
</div>
</div>
</div>
<body>
<html>
Anyone see what ive done wrong?
Thanks