images and text

[Viren Nathoo]

Hi there.

How to i add the text fields next to an image thumbnail. Basically its an article archive.

My aim is to achieve this: http://newmatilda.com/articles/

I have created entries in my Sql database. I dont know how to extract the information such that it appears like the above link.

Could someone please help me.

Many thanks

Viren

[PhPHelper]

are you pulling both the image and the text from the database?

If so here is an example of how you can do it. In this example lets say you have 2 columns in your table one called img which is your image and one called txt which is your text.

Code: [Select]

<?php

$sql = mysql_query("SELECT * FROM table");
while($row = mysql_fetch_object($sql))
{
echo "<p><img src=\"$row->img\" alt=\"image name\"><br />$row->txt\n";
}
?>

that would display an image and text below the image.

[viren.nathoo]

Thanks nuttycoder for you response.

The code you have me was for placing the text below the image.

I would like to place the text next to the image on the right hand side.

here is what i have for my php

**________________**

$vlist = mysql_query("SELECT * FROM v ORDER BY vdate DESC");
if (mysql_num_rows($vlist)>=1) {
   echo "      <dl class=\"spList\">\n";
   
   while ($v = mysql_fetch_array($vlist)) {
      

      $vdate = $v['vdate'];
      $year = substr($vdate, 0, 4);
      $month = substr($vdate, 4, 2);
      $day = substr($vdate, 6, 2);
      $date = date('jS F Y', mktime(0, 0, 0, $month, $day, $year));
      
   
   echo "         <dd img><img src=\"downloads/images/$v[vimg]\" width=\"140\" alt=\"Photo of $v[vname]\" /></dd img>" ;
   echo "         <dd><a href=\"spmemContent.php?vid=$v[vid]\" title=\"Read more...\">$v[vtitle][/url]</dd>\n";
   echo "         <dd>$date</dd>\n";   
   echo "         <dt>$v[vname]</dt>";
      
   

   //    echo "          <dd>$v[vexcerpt]</dd>\n";

   }
   echo "      </dl>\n";
} else {
   echo "      <p>There are currently no articles listed in the database.</p>\n";
}

****_________________****


Here is what i have for my CSS

dl.spList  {
   width: auto;
   margin: 0;
   padding: 0 0 1.5em 120px; /* padding-left  = img width */
}

.spList dt {
   margin: 0 0 0 0;
   /*padding: 0 0 5em 5em;*/
   /*font-weight: bold;*/
   clear: left;
   
}
.spList ul {
   display: inline;
   width: 150px;
   height: 200px;
   margin: 0 6.0em 3.5em 0;
   text-align: center;
}

.spList dd {
   margin: 0 0 0 0;
   padding: 0 0 0 5.0em;
   font-weight: bold;
   
}

.spList dd img {
   font-weight: bold;
   position: relative;
   top: -1.5em;
   left: -1.5em; /* padding-left of dt and dd */
   float: left;
   margin-left: -60px; /* image width */
   margin-right: -10px; /* just to leave some room for border's on img etc.  You'd normally just remove this and use the correct width for the margin left  */
}

*****_________________________________*****

Any help will be very much appreciated.

Many thanks

Viren

[PhPHelper]

no problem what I would do is make 2 divs to hold the content one for the image and one for the content like this:

Code: [Select]

echo "<div class=\"clear\">\n";
echo "<div class=\"left\">\n";
echo "<dd img><img src=\"downloads/images/$v[vimg]\" width=\"140\" alt=\"Photo of $v[vname]\" /></dd img>\n" ;
echo "</div>

echo "<div class=\"right\">\n";
echo "<dd><a href=\"spmemContent.php?vid=$v[vid]\" title=\"Read more...\">$v[vtitle][/url]</dd>\n";
echo "<dd>$date</dd>\n";   
echo "<dt>$v[vname]</dt>\n";
echo "<dd>$v[vexcerpt]</dd>\n";
echo "</div>\n";
echo "</div>

and the css for the divs:

Code: [Select]

.clear {
clear:both;
}
.left {
float:left;
width:200px; /* change this to suit your needs */
height:auto;
overflow:auto;
}
.right {
float:left;
width:500px; /* change this to suit your needs */
height:auto;
overflow:auto;
margin-left:20px;
}

the clear div makes sure each div left and right div don't get displayed wrong after the first div in the loop.

Hope that helps.

[viren.nathoo]

Thanks again nuttycoder for you reply.

sorry im new to php. What exactly do i put in the php file and what do i put in css file. Also what do i do if some of tags already exists in CSS file.

Many thanks again

Viren

[PhPHelper]

that's okay we all have to learn new things I just learnt something new about CSS tonight and I've been using it for years lol

okay in your php just this:(its your example with my extra bits in)

Code: [Select]

<?php
$vlist = mysql_query("SELECT * FROM v ORDER BY vdate DESC");
if (mysql_num_rows($vlist)>=1) {
   echo "      <dl class=\"spList\">\n";
   
   while ($v = mysql_fetch_array($vlist)) {
      

      $vdate = $v['vdate'];
      $year = substr($vdate, 0, 4);
      $month = substr($vdate, 4, 2);
      $day = substr($vdate, 6, 2);
      $date = date('jS F Y', mktime(0, 0, 0, $month, $day, $year));
      
   
   echo "<div class=\"clear\">\n";
echo "<div class=\"left\">\n";
echo "<dd img><img src=\"downloads/images/$v[vimg]\" width=\"140\" alt=\"Photo of $v[vname]\" /></dd img>\n" ;
echo "</div>\n";

echo "<div class=\"right\">\n";
echo "<dd><a href=\"spmemContent.php?vid=$v[vid]\" title=\"Read more...\">$v[vtitle][/url]</dd>\n";
echo "<dd>$date</dd>\n";   
echo "<dt>$v[vname]</dt>\n";
echo "<dd>$v[vexcerpt]</dd>\n";
echo "</div>\n";
echo "</div>\n";

   }
   echo "</dl>\n";
} else {
   echo "<p>There are currently no articles listed in the database.</p>\n";
}
?>

then add this to your css file:

Code: [Select]

.clear {
clear:both;
}
.left {
float:left;
width:200px; /* change this to suit your needs */
height:auto;
overflow:auto;
}
.right {
float:left;
width:500px; /* change this to suit your needs */
height:auto;
overflow:auto;
margin-left:20px;
}

you can rename the class names in the css files as long as you update the php file where you have id=\"left\" for example.

You can use the same tag in different styles but if it's causing problems try removing the tag, all depends on what the tag is really it's hard to say without seeing the file on a live server.

[viren.nathoo]

Thanks. That worked beautifully.

How can insert a hyperlink such that when press it goes to display the full article.

here is what i have soo far

Code: [Select]

echo "</div>\n";

echo "<div class=\"right\">\n";
echo "<dd>$v[vexcerpt]</dd>\n";
//echo "<dd><a href=\"spmemContent.php?vid=$v[vid]">Read the full article</a><dd>
echo "</div>\n";
This does not seem to work. All i want is the text that says "Read full article... " and when plressed it goes to the article.

Have you got any suggestions.

Many thanks for your help

Viren

[PhPHelper]

am guessing that

Code: [Select]

echo "<dd>$v[vexcerpt]</dd>\n";
contains just to short description if so change that line to the column that has the full article in it.

[viren.nathoo]

well if you go the link below, it has some text that says "read the ful article". I would like to create the same and would like it to be situated after the excerpt but in the same div area.

http://newmatilda.com/articles/

Let me know your thoughts

Many thanks

Viren

[PhPHelper]

I understand what you mean all you need to do is create a page with the full article being displayed. useing $_GET[] to get the id from the link also output the full article instead of the vexcerpt

for example:

Code: [Select]

<?php
$get = $_GET['vid'];
$get = mysql_real_escape_string($get);
$vlist = mysql_query("SELECT * FROM v WHERE vid='$get' ORDER BY vdate DESC");
if (mysql_num_rows($vlist)>=1) {
   echo "      <dl class=\"spList\">\n";
   
   while ($v = mysql_fetch_array($vlist)) {
      

      $vdate = $v['vdate'];
      $year = substr($vdate, 0, 4);
      $month = substr($vdate, 4, 2);
      $day = substr($vdate, 6, 2);
      $date = date('jS F Y', mktime(0, 0, 0, $month, $day, $year));
      
   
   echo "<div class=\"clear\">\n";
echo "<div class=\"left\">\n";
echo "<dd img><img src=\"downloads/images/$v[vimg]\" width=\"140\" alt=\"Photo of $v[vname]\" /></dd img>\n" ;
echo "</div>\n";

echo "<div class=\"right\">\n";
echo "<dd>$date</dd>\n";   
echo "<dt>$v[vname]</dt>\n";
echo "<dd>$v[vfull]</dd>\n";
echo "</div>\n";
echo "</div>\n";
?>


[viren.nathoo]

Thanks for you help. I managed to get the link working but i have another problem.

The problem that i have atm is that my footer is not moving down to the bottom of the page. if you go to www.thesydneyinstitute.com.au/spmem.php you will see what i mean.


here is what i have in my spmem.php file

Code: [Select]

<?php
$pageTitle  = "The Sydney Papers (Members Area)";
$pageClass = "publications";
include "includes/common.php";
include "includes/spheader.php";


echo "\n <h2>The Sydney Papers <span class=\"title\">Online</span></h2>\n";

$vlist = mysql_query("SELECT * FROM v ORDER BY vdate DESC");
if (mysql_num_rows($vlist)>=1) {
echo " <dl class=\"spList\">\n";

while ($v = mysql_fetch_array($vlist)) {



$vdate = $v['vdate'];
$year = substr($vdate, 0, 4);
$month = substr($vdate, 4, 2);
$day = substr($vdate, 6, 2);
$date = date('jS F Y', mktime(0, 0, 0, $month, $day, $year));

$image  = ($v['vimg'] !="") ? "<span class=\"vimg\"><img src=\"downloads/images/$v[vimg]\" width=\"150\" height=\"200\" alt=\"Picture of $v[vname]\" /></span>" : "";


echo "<div class=\"clear\">\n";

echo "<div class=\"left\">\n";
echo"  $image\n" ;
echo "<dd>$v[vname]</dd>\n";
echo "</div>\n";

echo "<div class=\"center\">\n";
echo "<dd>$date</dd>\n";
echo "<dd> &nbsp; </dd>\n";
echo "<dd>&nbsp; </dd>\n";
echo "<dd> &nbsp; </dd>\n";
echo "<dd><h3>$v[vtitle]</h3></dd>\n";
   
echo "</div>\n";

echo "<div class=\"right\">\n";
echo "<dd>$v[vexcerpt]</dd>\n";
echo "<dd><a href=\"spmemContent.php?vid=$v[vid]\" title=\"Read more...\">Read Full Article</a></dd\n";
echo "</div>\n";

echo "</div>\n";

   }
   echo "</dl>\n";
} else {
   echo "<p>There are currently no articles listed in the database.</p>\n";
}


include "includes/footer.php";
?>

This is what i have in my CSS file

Code: [Select]

/*///////////////////////////////////////////////////////
Style Guide
/////////////////////////////////////////////////////////

#idName {
display: block; position: absolute; top: 0px; left: 0px; z-index: 1; width: auto; height: auto; overflow: auto;
margin: 0px; border: 0px solid #FFFFFF; padding: 0px; background: #FFFFFF url('../images/spacer.gif') no-repeat top left;
font: italic small-caps bold 68%/1.4 Verdana, Arial, Helvetica, sans-serif; color: #000000; text-align: left; text-decoration: none;
}
*/



/*///////////////////////////////////////////////////////
General Style Information
///////////////////////////////////////////////////////*/

/*////// Structure Module //////*/
html {
width: 100%;
}
body {
width: 100%; height: 100%; margin: 0px; padding: 0px; background: #FFFFFF url("../images/bgBody.gif") repeat-x 0px 92px;
font: 70%/1.4 verdana, arial, helvetica, sans-serif; color: #000000; text-align: left;
}
div {
margin: 0px; padding: 0px;
}

/*////// Text Module //////*/
p {
margin: 0px; margin-bottom: 1.2em;
}
blockquote {
margin: 0px 3.5em;
}
h1 {
margin-bottom: 0.4em;
font-size: 1.7em; text-transform: uppercase;
}
h2 {
margin-bottom: 0.3em;
font-size: 1.4em; text-transform: uppercase; font-family: "Trebuchet MS", verdana, sans-serif;
}
h3 {
margin-bottom: 0.2em;
font-size: 1.3em; text-transform: uppercase; color: #000000;
}
h4 {
margin-bottom: 0.2em;
font-size: 1.0em; text-transform: uppercase; color: #000000;
}
h5 {
margin-bottom: 0.1em;
font-size: 1.0em; font-weight: bold; font-variant: small-caps; color: #000000;
}
h6 {
margin-bottom: 0.1em;
font-size: 1.0em; font-style: italic;
}

abbr {
border-bottom: 1px dashed #999999; color: #999999; cursor: help;
}acronym {
border-bottom: 1px dashed #999999; color: #999999; cursor: help;
}
address {
}
cite {
color: #630203; font-size: 1.0em;
}
code {
color: #630203; font-size: 1.2em;
}
dfn {
color: #630203; font-size: 1.0em;
}
em {
color: #630203; font-style: italic;
}
kbd {
color: #630203; font-size: 1.2em;
}
pre {
color: #630203; font-size: 1.0em;
}
q {
font-style: italic; color: #630203;
}
samp {
color: #630203; font-size: 1.0em;
}
span {
}
strong {
color: #630203; font-weight: bold;
}
var {
color: #630203; font-size: 1.0em;
}

/*////// Hypertext Module //////*/
a:link {
color: #881517; text-decoration: underline;
}
a:visited {
color: #630203; text-decoration: underline;
}
a:hover {
color: #A83537; text-decoration: underline;
}
a:focus {
color: #A83537; text-decoration: underline;
}
a:active {
color: #330000; text-decoration: underline;
}

/*////// List Module //////*/
dl {
margin-bottom: 1.2em;
}
dt {
margin: 0px; margin-top: 1.2em; font-weight: bold;
}

dd {
margin: 0px;
}
ol {
margin-top: 0px; margin-bottom: 1.2em;
}
ul {
margin-top: 0px; margin-bottom: 1.2em; list-style-type: square;
}

ul2 {
margin-top: 0px; margin-bottom: 1.2em; list-style-type: square; display:inline
}
li {
margin-bottom: 0.5em;
}

/*////// Presentation Module //////*/
big {
}
hr {
width: 50%; height: 1px; margin: 0 auto; margin-bottom: 0.6em; border-bottom: 1px solid #630203; color: #630203; text-align: center;
}
small {
}
sup {
color: #630203;
}
sub {
color: #630203;
}

/*////// Forms Module //////*/
form {
text-align: center;
}
fieldset {
display: block; margin: 0em auto 0.6em auto; border: none; padding: 0px; text-align: left;
}
legend {
}
label {
float: left; width: 15em; text-align: left;
}
input, select {
font-size: 1em;
}
select {
width: 14.4em;
}
input:focus, select:focus {
background: #EEEEEE; color: #630203;
}
option {
}
textarea {
}
submit, reset, button {
}

/*////// Table Module //////*/
table {
font-size: 100%; line-height: 1.5; border-collapse: separate;
}
caption {
display: none;
/* padding: 8px; border: 1px solid #999999; border-bottom: none; background: #630203; font-size: 0.9em; */
}
thead {
}
tbody th {
}
tfoot {
}
th {
padding: 4px 8px; text-align: left; font-weight: bold;
}
tr {
}
td {
}

/*////// Image Module //////*/
img {
display: block; margin: 0px; border: none;
}



@media screen {




/*///////////////////////////////////////////////////////
CLASS and ID Styles
///////////////////////////////////////////////////////*/

form { margin: 0em; margin-top: 0.8em; margin-bottom: 1.6em; }
fieldset { margin-top: 0.4em; border: none; }
label { display: table-cell; vertical-align: top; width: 30%; height: 2em;}
label.radio { width: auto; }
input, select, textarea { font: 1.0em Arial, Verdana, sans-serif; border: 1px solid #000000; background: #FFFFFF !important; }
input, select, textarea { width: 160px; }
input.radio { width: auto !important; border: none; background: transparent !important; }
.hiddenFields { display: none; }
.button, #submit { width: auto; margin-left: 30%; border: 2px solid #000000 !important; background: #630203 !important; color: #FFFFFF; }
form hr { visibility: hidden; height: 0px; }

body { margin: 0px; margin-bottom: 2em; background: #FFFFFF ; padding: 0px; font: 72%/150% arial, verdana, sans-serif; color: #000000; text-align: justify; }
h1 { margin: 0px; padding: 0px; font-size: 1.4em; }
h2 { margin: 0px; padding: 0px; font-size: 1.2em; }
h2 .title { margin: 0px; padding: 0px; font-size: 0.9em; font-weight: bold; text-transform: uppercase; }
h3 { font-size: 1.2em; font-weight: bold; }
p { margin: 0px; margin-bottom: 1.2em; }
ul { margin-bottom: 0.6em; }
li { margin-bottom: 0.2em; }
img { border: none; }
img.image1 {position: relative; float:left;}



a:link { color: #8E2C19; text-decoration: underline; }
a:visited { color: #8E2C19; text-decoration: underline; }
a:hover { color: #FF0000; text-decoration: underline; }
a:active { color: #8E2C19; text-decoration: underline; }


#container {
margin: 0px; padding: 0px; background: transparent url("../images/patternBody.gif") no-repeat top right; _background: transparent url("../images/patternBody.jpg") no-repeat 30px right;
}


#masthead {
background: #FFFFFF; text-align: center;
}
#masthead h1 {
height: 142px; margin: 0px; padding: 0px; text-align: left;
}
#masthead h1 a {
display: block; height: 142px !important; height /**/: 142px; overflow: hidden;
margin: 0px; padding: 0px; background: transparent url("../images/header.jpg") no-repeat;
}
#masthead h2 a {
display: block; height: 142px !important; height /**/: 142px; overflow: hidden;
margin: 0px; padding: 0px; background: transparent url("../images/test.jpg") no-repeat;
}


/*
#nav {
margin: 0px; padding: 0px; background: #0C1424; text-align: center;
}
#nav ul {
display: block; margin: 0px; margin-left: 10px; padding: 0.3em 0px; list-style: none; font-size: 1.1em; text-align: left;
}
#nav li {
display: inline; margin: 0px; padding: 0px 10px;
}
#nav a:link { color: #FFFFFF; font-weight: bold; text-decoration: none; }
#nav a:visited { color: #FFFFFF; font-weight: bold; text-decoration: none; }
#nav a:hover { color: #BC0E00; font-weight: bold; text-decoration: none; }
#nav a:active { color: #BC0E00; font-weight: bold; text-decoration: none; }
#nav a.current:visited { color: #BC0E00; font-weight: bold; text-decoration: none; }
*/


#nav {
float: left; clear: both; width: 100%; min-height: 2.0em; margin: 0px; padding: 0px; background: #0C1424; /* border-top: 1px solid #B6C9C1; */
text-align: left; height: 1.0em; font-size: 1.1em; text-align: left;
}

#nav ul, #nav ul ul {
margin: 0px; padding: 0px; list-style: none; background: #FFFFFF;
}

#nav li {
float: left; width: auto;
margin: 0px; padding: 0px;
}

#nav a {
display: block; width: 100%; margin: 0; padding: 0.5em 0.9em;
color: #FFFFFF; text-decoration: none; white-space: nowrap;
}

#nav a:link { color: #FFFFFF; font-weight: bold; text-decoration: none; }
#nav a:visited { color: #FFFFFF; font-weight: bold; text-decoration: none; }
#nav a:hover { color: #BC0E00; font-weight: bold; text-decoration: none; }
#nav a:active { color: #BC0E00; font-weight: bold; text-decoration: none; }
#nav a.current:visited { color: #BC0E00; font-weight: bold; text-decoration: none; }

#nav li ul {
position: absolute; z-index: 300; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin: 0; border: none; background: #0C1424;
}

#nav li ul li {
float: none; min-width: 15em; border: none;
}

#nav li ul ul {
margin: 0 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto; margin-left: -1px;
}

#nav li:hover, #nav li.sfhover {

}

#nav ul {
_padding-top: 0.3em; line-height: 1;
}

#nav ul, #nav ul ul {
_margin-top: -0.3em;
}

#nav li {
_width: 1px; _margin-bottom: -3px;
}

#nav a {
_padding-bottom: 0.8em;
}

#nav li ul {
_width: auto;
}







#footer {
margin: 0px; padding: 0px; height: 53px; background: transparent url("../images/patternFooter.jpg") no-repeat bottom left; text-align: right;
}
#footer ul {
margin: 0px; margin-right: 20px; padding: 0px; list-style: none;
}
#footer li {
display: inline; margin: 0px; padding: 10px; font-size: 0.9em;
}
#footer a:link { color: #8E2C19; text-decoration: none; }
#footer a:visited { color: #8E2C19; text-decoration: none; }
#footer a:hover { color: #FF0000; text-decoration: none; }
#footer a:active { color: #8E2C19; text-decoration: none; }


#validate {
margin: 0px; margin-top: -35px; padding: 0px; text-align: right;
}
#validate ul {
margin: 0px; margin-right: 20px; padding: 0px; list-style: none; line-height: 1;
}
#validate li {
display: inline; width: 1px; margin: 0px; padding: 10px; font-size: 0.9em;
}
#validate a:link { color: #E0C4BB; text-decoration: none; }
#validate a:visited { color: #E0C4BB; text-decoration: none; }
#validate a:hover { color: #8E2C19; text-decoration: none; }
#validate a:active { color: #E0C4BB; text-decoration: none; }



/*//////////////////////////
Section Specific Styles
//////////////////////////*/


#home {

}

#content {
min-height: 450px; _height: 450px; margin: 2em 3em 2em 0em; padding: 0 0 0 185px; /* height: 84px; overflow: auto;*/
}

#content h2 {
margin: 0; padding: 20px 0 0 0; font: bold 2.0em Times New Roman, sans; color: #0C1424; text-align: left;
}

#content h2 span.title {
display: block; margin: 0 30px 1.8em 2.0em; padding: 0px; font: bold 1.4em/100% Times New Roman, sans; color: #8E2C19; text-align: left;
}
#content h2 span.title2 {
display: block; margin: 0 30px 1.8em 2.0em; padding: 0px; font: bold 1.1em/100% Times New Roman, sans; color: #8E2C19; text-align: left;
}

#content h3 {
font: bold 1.3em Times New Roman, serif; color: #8E2C19; text-align: left; letter-spacing: 1.2;
}

#subNav {
position: absolute; right: 0; top: 275px; margin: 0px; padding: 0;
text-align: right;
}

#subNav ul {
margin: 0px; padding: 0px; color: #8E2C19; text-align: left; list-style: none;
}

#subNav li {
display: inline; margin: 0px; padding: 0 1em 0 0;
}

#subNav a {  font: bold 1.2em Times New Roman, serif; color: #8E2C19; text-decoration: none; }
#subNav a:hover {  color: #D8AC9E; }

.degrees {
display: block; margin-bottom: 1.2em; font: normal italic 0.9em Times New Roman, sans; color: #0C1424;
}

.functionDetails dt {
margin: 0px; padding: 0px;
font: bold 1.3em Time New Roman, serif; color: #8E2C19; letter-spacing: 1.2;
}
.functionDetails dd {
margin: 0px;
}

.functionList dt {
margin: 1.5em 0 0 0;
}

.functionList dd  {
margin: 0;
}

.adr dt {
margin: 1.5em 0 0 0; font-weight: bold;
}
.adr dd  {
margin: 0;
}

.tel dt {
margin: 1.5em 0 0 0; font-weight: bold;
}

.tel dd  {
margin: 0;
}

.online dt {
margin: 1.5em 0 0 0; font-weight: bold;
}

.online dd  {
margin: 0;
}

.dinner dt {
margin: 1.5em 0 0 0; font-weight: bold;
}

.dinner dd  {
margin: 0;
}

.dinnerPdf {
display: float; position: right;
}

.articleList dt {
margin: 1.5em 0 0 0;
}

.articleList dd  {
margin: 0;
}

#content dt {
margin: 1.5em 0 0 0; font-weight: bold;
}

#content dd  {
margin: 0;
}

span.dinnerPdf {
float: right; margin: 0 0 1.5em 1.5em; border: 3px outset #9E3C29; padding: 0.1em;
}

/*
.letterSelection {
margin: 0px; margin-bottom: 2em; padding: 0px; list-style: none;
}

.letterSelection li {
display: inline; margin: 0px; padding: 0px; list-style: none;
}

.letterSelection li a {
display: table-cell; width: 2.0em; height: 2.0em; text-align: center; vertical-align: middle;
margin: 0px 8px 8px 0px; border: 1px solid #8E2C19; padding: 0.2em 0.4em; background: #8E2C19;
font-size: 0.9em; text-decoration: none !important; font-weight: bold; color: #FFFFFF !important;
}

.letterSelection li a:hover {
background: #FFFFFF;
color: #8E2C19 !important;
}
*/


.letterSelection {
width: 98%;
display: block;
margin: 0;
padding: 0 0 1.5em 0;
white-space: nowrap;
}

.letterSelection li {
display: inline; width: 3.845%;
padding-right: 0.4em;
list-style-type: none;
}

.letterSelection a {
width: 100%; margin: 0; border: 1px solid #8E2C19 !important; padding: 0.2em 0.4em; background: #8E2C19 !important;
font-size: 0.9em; text-decoration: none !important; font-weight: bold; color: #FFFFFF !important; text-align: center;
}

.letterSelection a:hover {
background: #FFFFFF !important;
color: #8E2C19 !important;
}


#content { background: transparent url("../images/imageHome.jpg") no-repeat 15px 80px; }
#about #content { background: transparent url("../images/imageInstitute.jpg") no-repeat 15px 80px; }
#dinner #content { background: transparent url("../images/imageDinner.jpg") no-repeat 15px 80px; }
#functions #content { background: transparent url("../images/imageFunctions.jpg") no-repeat 15px 80px; }
#articles #content { background: transparent url("../images/imageArticles.jpg") no-repeat 15px 80px; }
#publications #content { background: transparent url("../images/imagePublications.jpg") no-repeat 15px 80px; }
#books #content { background: transparent url("../images/imageBooks.jpg") no-repeat 15px 80px; }
#speakers #content { background: transparent url("../images/imagePSpeakers.jpg") no-repeat 15px 80px; }
#contact #content { background: transparent url("../images/imageContact.jpg") no-repeat 15px 80px; }

.people em {
display: block;
}

dl.spList  {
width: auto;
margin: 0;
padding: 0 0 1.5em 40px; /* padding-left  = img width */
}

.spList dt {
margin: 0 0 0 0;
/*padding: 0 0 5em 5em;*/
/*font-weight: bold;*/
clear: left;

}
.spList ul {
display: inline;
width: 150px;
height: 200px;
margin: 0 6.0em 3.5em 0;
text-align: center;
}

.spList dd {
margin: 0 0 0 0;
padding: 0 0 0 3em;
font-weight: bold;

}

.spList dd2 {
margin: 0 0 0 5.0;
padding: 0 0 0 5.0;
font-weight: bold;

}

.spList dd img {
font-weight: bold;
position: relative;
top: -1.5em;
left: -1.5em; /* padding-left of dt and dd */
float: left;
margin-left: -60px; /* image width */
margin-right: -10px; /* just to leave some room for border's on img etc.  You'd normally just remove this and use the correct width for the margin left  */
}

dl.siqList  {
width: auto;
margin: 0;
padding: 0 0 1.5em 120px; /* padding-left  = img width */
}

.siqList dt {
margin: 1.5em 0 0 0;
padding: 0 0 0.4em 1.5em;
font-weight: bold;
clear: left;
}

.siqList dd {
margin: 0 0 0 0;
padding: 0 0 0 1.5em;
}

.siqList dd img {
position: relative;
top: -1.5em;
left: -1.5em; /* padding-left of dt and dd */
float: left;
margin-left: -60px; /* image width */
margin-right: -10px; /* just to leave some room for border's on img etc.  You'd normally just remove this and use the correct width for the margin left  */
}

.paperList {
float: left; clear: both; width: auto;
}
.paperList li {
float: left; width: 120px; margin: 0 2.0em 2.0em 0; text-align: center;
}

.people {
text-align: center; width: 100%;
}
.people ul {
margin: 0; padding: 0; list-style: none;
}
.people li {
display: inline; width: 150px; height: 200px; margin: 0 3.0em 3.5em 0; text-align: center;
}
.people li img {
border: 1px solid #8E2C19;
}


.floatImage {
float: right; margin: 0 0 1em 1em;
}

.functionYears {
margin: 0 0 1em 0; padding: 0;
}

.functionYears li {
display: inline; padding: 0 0.5em 0 0;
}

.bookImage {
float: right; margin: 0 0 1.5em 1.5em; border: 1px solid #8E2C19;
}

#currentPdf {
position: relative;
}
#currentPdf img {
position: absolute; left: 5em; border: 1px solid #990000; background: #FFFFFF;
}

indent { margin-right: 5%; margin-left: 5%
}

.clear {
clear:both;
}
.left {
float:left;
width:150px; /* change this to suit your needs */
height:auto;
overflow:auto;
}

.right {
float:left;
width:500px; /* change this to suit your needs */
height:auto;
overflow:auto;
margin-left:10px;
}

.center {
float:left;
width:200px; /* change this to suit your needs */
height:auto;
overflow:auto;
margin-left:10px;
}

}
Could you please let me know you thoughts

Many thaanks

Viren

[PhPHelper]

in your css file put clear:both for the footer:

Code: [Select]

footer {
     clear:both
}

that will move the footer under everything else.

[viren.nathoo]

Hi there

Thanks. All fixed.

I want to add a WYSIWYG editor. But i am having problem installing it. Basically when i place the javascript in the header i get an error message.

Do you have any thoughts on this.

I am really sorry to bug you

Many thanks for all your help

Viren

[PhPHelper]

not a problem which editor are you using I recommend TinyMCE best one on the market.

http://tinymce.moxiecode.com/examples/full.php

I use TinyMCE so I can help you get it working.

[viren.nathoo]

I have just downloaded TinyMCE. How do i install it given the fact that i need to write the data into an SQL database so that i can retrieve it later. I need to add this wysiwyg writer to an existing php form. I dont really know how to go about it.

your help is much appreciated.

Below is the code for the form

Code: [Select]

<?php
$pageTitle  = "Administration System";
$pageAccess  = "1";
$pageClass  = "Admin";
$pageID  = "";
include "../includes/protect.php";
include "../includes/headerAdmin.php";


/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



// List Records
function listRecords() {

$orderByDefault = 'vdate'; 
$sortByDefault = 'DESC';
$perPage = '20';
global $currentPage, $orderBy, $sortOrder, $newSort;

// Count the Number of Records
$vRow = mysql_query("SELECT count(*) FROM v");
$vRows = mysql_fetch_row($vRow);
$vTotal = $vRows[0];

// Set Variables
$pageNumber = $currentPage + 1;
$totalPages = $lastPage = ceil($vTotal/$perPage);
$prevPage = $currentPage - 1;
$nextPage = $currentPage + 1;
$endPage = $totalPages - 1;

// Re-Orders the Data
if(empty($orderBy)) {
$orderBy = $orderByDefault;
}

// Re-Sorts the Data
if(empty($sortOrder)) {
$sortOrder = $sortByDefault;
$newSort = 'DESC';
} else if ($sortOrder == 'DESC') {
$newSort = 'ASC';
} else {
$newSort = 'DESC';
}

if(empty($currentPage)) {
$currentPage = 0;
}

// Limits the Number of Records on a Page
$limitBy = "LIMIT ". $currentPage * $perPage . ", $perPage";

$vList = mysql_query("SELECT * FROM v ORDER BY $orderBy $sortOrder $limitBy");
if(!$vList) { 
// error_message(sql_error());
userMessage("No records Listed. Please enter the first record", "$_SERVER[PHP_SELF]?action=addRecordForm");
}

echo " <h2>Sydney Papers (Members Ed.)</h2>\n";

echo " <p>$vTotal records found. Displaying page $pageNumber out of $lastPage.</p>\n";

// Creates the Page Navigation
echo " <ul class=\"listNav\">\n";
if($pageNumber > 1 && $pageNumber <  $totalPages) {
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=0\">[Beginning of List]</a></li>\n";
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=$prevPage\">[Back]</a></li>\n";
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=$nextPage\">[Next]</a></li>\n";
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=$endPage\">[End of List]</a></li>\n";
}
else if($pageNumber > 1) {
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=0\">[Beginning of List]</a></li>\n";
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=$prevPage\">[Back]</a></li>\n";
echo " <li><span class=\"readOnly\">[Next]</span></li>\n";
echo " <li><span class=\"readOnly\">[End of List]</span></li>\n";
}
else if($pageNumber < $totalPages) {
echo " <li><span class=\"readOnly\">[Beginning of List]</span></li>\n";
echo " <li><span class=\"readOnly\">[Back]</span></li>\n";
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=$nextPage\">[Next]</a></li>\n";
echo " <li><a href=\"$_SERVER[PHP_SELF]?action=listRecords&orderBy=$orderBy&sortOrder=$sortOrder&currentPage=$endPage\">[End of List]</a></li>\n";
}
echo " </ul>\n"; 
?>
<style type="text/css">
<!--
#client .hiddenFields table tr td div strong {
text-align: right;
}
#client .hiddenFields table {
text-align: right;
}
-->
</style>


<link href="/styles/style.css" rel="stylesheet" type="text/css" />
<table border="1" bordercolor="#CCCCCC" width="90%" cellpadding="3">
<tr>
<th width="10%"><a href="<?php echo "$_SERVER[PHP_SELF]?action=listRecords&orderBy=vid&sortOrder=$newSort"; ?>">ID</a></th>
<th width="15%"><a href="<?php echo "$_SERVER[PHP_SELF]?action=listRecords&orderBy=vdate&sortOrder=$newSort"; ?>">Date</a></th>
        <th width="15%"><a href="<?php echo "$_SERVER[PHP_SELF]?action=listRecords&orderBy=vname&sortOrder=$newSort"; ?>">Name</a></th>
<th width="15%"><a href="<?php echo "$_SERVER[PHP_SELF]?action=listRecords&orderBy=vtitle&sortOrder=$newSort"; ?>">Title</a></th>
<th width="45%">Content</th>
<th width="15%">Action</th>
</tr>
<?php
// Populate the table with Member data
while($v = mysql_fetch_array($vList)) {

echo " <tr>\n";
echo " <td>$v[vid]</td>\n";

if ($v['vdate']!="0") {
$vdate = $v['vdate'];
$year = substr($vdate, 0, 4);
$month = substr($vdate, 4, 2);
$day = substr($vdate, 6, 2);
$vdate = date('d F Y', mktime(0, 0, 0, $month, $day, $year));
echo " <td>$vdate</td>\n";
} else {
echo " <td class=\"empty\">No date set</td>\n";
}

echo " <td>$v[vname]</td>\n";
echo " <td>$v[vtitle]</td>\n";
$vmaincontent = elipsedText($v['vmaincontent'], 255);
echo " <td>$vmaincontent</td>\n";

echo " <td class=\"action\">\n";
echo " <a href=\"$_SERVER[PHP_SELF]?action=updateRecordForm&amp;vid=$v[vid]\" title=\"Edit this record's details\">Edit</a>\n";
echo " <a href=\"$_SERVER[PHP_SELF]?action=deleteRecord&amp;vid=$v[vid]\" title=\"Delete this v permanently\" onClick=\"return confirm('Are you sure you wish to delete this record?');\">Delete</a>\n";
echo " </td>\n";

echo " </tr>\n";
}
echo " </table>\n";
}


/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



// Add New Record Form
function addRecordForm() {
?>

<h2>Add Sydney Papers Article Online Edition</h2>

<form id="client" name="client" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">

<fieldset class="hiddenFields">
<input type="hidden" id="action" name="action" value="addRecord" />
<input type="hidden" id="vid" name="vid" value="" />
</fieldset>

<fieldset>
<label for="vdate">date</label>
<input type="text" class="format-y-m-d divider-none" id="vdate" name="vdate" value="YYYYMMDD" />
</fieldset>

<fieldset>
<label for="vname">Name of Author</label>
<input type="text" id="vname" name="vname" value="" />
</fieldset>
           
        <fieldset>
<label for="vbio">Author's Biography</label>
<input type="text" id="vbio" name="vbio" value="" />
</fieldset>
                     
<fieldset>
<label for="vtitle">title</label>
<input type="text" id="vtitle" name="vtitle" value="" />
</fieldset>
 
            <fieldset class="htmlcontent">
<label for="vexcerpt">Front Page Excerpt</label>
<textarea rows="5" id="vexcerpt" name="vexcerpt"><!-- Add HTML content here --></textarea>
</fieldset>           

<fieldset class="htmlcontent">
<label for="vmaincontent">Artcle Content</label>
<textarea rows="5" id="vmaincontent" name="vmaincontent"><!-- Add HTML content here --></textarea>
</fieldset>
           
            <fieldset>
<label for="vimg">Author Image Image<br />(NOTE: please make these 200px wide)</label>
<input type="file" id="vimg" name="vimg" value="" />
</fieldset>

<fieldset>
<input type="submit" id="submit" name="submit" value="submit" />
</fieldset>

</form>

<?php
}



/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



// Add New Record
function addRecord() {
// Initialise Variables
$vid = makeSafe($_POST['vid']);
$vdate = makeSafe($_POST['vdate']);
$vname = $_POST['vname'];
$vtitle = $_POST['vtitle'];
$vbio = $_POST['vbio'];
$vexcerpt = $_POST['vexcerpt'];
$vmaincontent = $_POST['vmaincontent'];
// $vimg = makeSafe($_POST['vimg']);
$vimgcurrent = makeSafe($_POST['vimgcurrent']);

$uploadDir = '../downloads/images/';

$fileName = $_FILES['vimg']['name'];
$tmpName  = $_FILES['vimg']['tmp_name'];
$fileSize = $_FILES['vimg']['size'];
$fileType = $_FILES['vimg']['type'];

if (($vimgcurrent=='') AND ($fileName=='')) { // If both are blank...
$vimg = '';
} else if (($vimgcurrent!='') AND ($fileName=='')) { // Current logo doesn't get replaced
$vimg = $vimgcurrent;
} else if ($fileName!='') { // 

// Normal File Name and Path
// $filePath = $uploadDir . $fileName;

// Random File Name and Path
$ext      = substr(strrchr($fileName, "."), 1);
$randName = md5(rand() * time());
$fileName = $randName . '.' . $ext;
$filePath = $uploadDir . $fileName;

// Move the file to the specified directory
$result    = move_uploaded_file($tmpName, $filePath);
if (!$result) {
echo "Error uploading file";
exit;
}

if (!get_magic_quotes_gpc()) {
$fileName  = addslashes($fileName);
$filePath  = addslashes($filePath);
}

// $thisYear = date("Y");
$vimg = $fileName;

}


// Insert Record Into Table
$addRecord = mysql_query("INSERT INTO v VALUES (NULL, '$vdate', '$vname', '$vtitle', '$vbio', '$vexcerpt', '$vmaincontent', '$vimg')");
if (!$addRecord) {
errorMessage(sqlError());
exit;
} else {
// userMessage("Record Added", $_SERVER['PHP_SELF']);
}

// Redirect to display record listing
header("Location: $_SERVER[PHP_SELF]");
}



/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



// Update Record Form
function updateRecordForm() {

$vid  = (isset($_GET['vid'])) ? $_GET['vid'] : '' ;

$vlist = mysql_query("SELECT * FROM v WHERE vid='$vid' ");
if (mysql_num_rows($vlist)>=1) {
while ($v = mysql_fetch_array($vlist)) {
?>

<h2>Update A Weekly Column</h2>

<form id="client" name="client" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">

<fieldset class="hiddenFields">
<input type="hidden" id="action" name="action" value="updateRecord" />
<input type="hidden" id="vid" name="vid" value="<?php echo $v['vid']; ?>" />
</fieldset>

<fieldset>
<label for="vdate">Date</label>
<input type="text" class="format-y-m-d divider-none" id="vdate" name="vdate" value="<?php echo $v['vdate']; ?>" />
</fieldset>
           
<fieldset>
<label for="vname">Name of Author</label>
<input type="text" id="vname" name="vname" value="<?php echo $v['vname']; ?>" />
</fieldset>
           
        <fieldset>
<label for="vbio">Author's Biography</label>
<input type="text" id="vbio" name="vbio" value="<?php echo $v['vbio']; ?>" />
</fieldset>

<fieldset>
<label for="vtitle">Title</label>
<input type="text" id="vtitle" name="vtitle" value="<?php echo $v['vtitle']; ?>" />
</fieldset>
           
            <fieldset class="htmlcontent">
<label for="vexcerpt">Front Page Excerpt</label>
<textarea rows="5" id="vexcerpt" name="vexcerpt"><?php echo $v['vexcerpt']; ?></textarea>
</fieldset>

<fieldset class="htmlcontent">
<label for="vmaincontent">Article Content</label>
<textarea rows="5" id="vmaincontent" name="vmaincontent"><?php echo $v['vmaincontent']; ?></textarea>
</fieldset>

<fieldset>
<label for="vimg">Author's Image<br />(NOTE: please make these 200px wide)</label>
<input type="file" id="vimg" name="vimg" value="" size="30" />
<?php
if ($v['vimg']!='') {
echo "<span id=\"currentPDF\"><a target=\"_blank\" href=\"../downloads/images/$v[vimg]\"><img src=\"../downloads/images/$v[vimg]\" width=\"140\" border=\"\" alt=\"Current PDF\" /></a></span>\n";
}
?>
<script language=javascript><!--
function confirmLogoDeletion(chk){
if (chk.checked == 1) {
var agree=confirm("Are you sure you wish to delete this Image permanently?");
if (agree) {
document.getElementById('vimgcurrent').value='';
document.getElementById('currentLogo').style.display='none';
} else {
chk.checked = 0;
}
}
}
//--></script>
<label class="radio" for="noLogo"><input type="checkbox" id="noLogo" name="noLogo" value="" onclick="return confirmLogoDeletion(noLogo);" /> No Image</label>
</fieldset>


<fieldset>
<input type="submit" id="submit" name="submit" value="submit" />
</fieldset>

</form>

<?php
}
} else {
// Error
}
}



/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



// Update Record
function updateRecord() {
// Initialise Variables
$vid = makeSafe($_POST['vid']);
$vdate = makeSafe($_POST['vdate']);
$vname = $_POST['vname'];
$vtitle = $_POST['vtitle'];
$vbio = $_POST['vbio'];
$vexcerpt = $_POST['vexcerpt'];
$vmaincontent = $_POST['vmaincontent'];
// $vimg = makeSafe($_POST['vimg']);
$vimgcurrent = makeSafe($_POST['vimgcurrent']);

$uploadDir = '../downloads/images/';

$fileName = $_FILES['vimg']['name'];
$tmpName  = $_FILES['vimg']['tmp_name'];
$fileSize = $_FILES['vimg']['size'];
$fileType = $_FILES['vimg']['type'];

if (($vimgcurrent=='') AND ($fileName=='')) { // If both are blank...
$vimg = '';
} else if (($vimgcurrent!='') AND ($fileName=='')) { // Current logo doesn't get replaced
$vimg = $vimgcurrent;
} else if ($fileName!='') { // 

// Normal File Name and Path
// $filePath = $uploadDir . $fileName;

// Random File Name and Path
$ext      = substr(strrchr($fileName, "."), 1);
$randName = md5(rand() * time());
$fileName = $randName . '.' . $ext;
$filePath = $uploadDir . $fileName;

// Move the file to the specified directory
$result    = move_uploaded_file($tmpName, $filePath);
if (!$result) {
echo "Error uploading file";
exit;
}

if (!get_magic_quotes_gpc()) {
$fileName  = addslashes($fileName);
$filePath  = addslashes($filePath);
}

// $thisYear = date("Y");
$vimg = $fileName;

}


// Update Record in Table
$updateRecord = mysql_query("UPDATE v SET vdate='$vdate', vname='$vname', vtitle='$vtitle', vbio='$vbio',  vexcerpt='$vexcerpt', vmaincontent='$vmaincontent', vimg='$vimg' WHERE vid='$vid' ");
if (!$updateRecord) {
errorMessage(sqlError());
exit;
} else {
// userMessage("Record Updated", $_SERVER['PHP_SELF']);
}

// Redirect to display record listing
header("Location: $_SERVER[PHP_SELF]");
}



/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



function deleteRecord() {
$vid = checkInteger($_GET['vid']);

if (empty($vid)) {
errorMessage('Empty id!');
}
$deleteRecord = mysql_query("DELETE FROM v WHERE vid='$vid' ");
if (!$deleteRecord) {
errorMessage(sql_error());
} else {
userMessage("This record has been deleted!", $_SERVER['PHP_SELF']);
}
}



/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////*/



switch((isset($_REQUEST["action"])) ? $_REQUEST["action"] : "") {
case "addRecord":
addRecord();
break;

case "addRecordForm":
addRecordForm();
break;

case "updateRecord":
updateRecord();
break;

case "updateRecordForm":
updateRecordForm();
break;

case "deleteRecord":
deleteRecord();
break;

default:
listRecords();
break;
}

echo " </div>\n";
echo "</div>\n";
echo "</body>\n";
echo "</html>\n";
ob_end_flush();
?>