Trying to get a dynamic page to look like a static css driven page

[dazzathedrummer]

Hi,

 

If this is posted to the wrong page - please do shoot me down in flames lol.

 

I'm trying to write a page that shows a dynamic giglist, I can get the data to run, I'm just having trouble with the CSS formatting side - i've been playing around with different variables for a while now but I cant get the page to look right.

 

This is the static page with the correct 'look': -

http://www.the-guards.org.uk/gigs.html

 

 

and this is what i've got so far: -

http://www.the-guards.org.uk/gigstest.php

 

this is the static code: -

<blockquote>
      <h1 align="left" class="border_3"><img src="Images/July_31.png" alt="July 31" width="79" height="78" hspace="6" vspace="6" align="left" />Private function</h1>
      <p align="left"> </p>
      <p align="left"> </p>
      <h1 align="left" class="border_3"><img src="Images/Aug_01.png" alt="August 01" width="79" height="78" hspace="6" vspace="6" align="left" />Private function</h1>
      <p align="left"> </p>
      <p align="left"> </p>
      <p align="left"></p>
      <h1 align="left" class="border_3"><img src="Images/6_august.png" alt="6 August" width="79" height="78" hspace="3" vspace="3" align="left" />The Dragon</h1>
      <p align="left">The Dragon in Werrington is a great venue. The Guards had a storming gig last time largely thanks to our friends who came down. Many of our friends drink in The Dragon and always turn out for us. It's a great gig and the atmosphere is buzzing. The Dragon is Rob's old local and it's fair to say that he pulls out all the stops when he returns. See you there.</p>
      <p align="left"><a href="http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=The+Dragon+Werrington+peterborough&sll=52.575258,-0.24156&sspn=0.000296,0.000648&ie=UTF8&cd=1&hq=The+Dragon&hnear=Werrington,+Peterborough,+UK&t=h&z=14&layer=c&cbll=52.628144,-0.278764&panoid=KLFCKialTA5w5D81lcYPvg&cbp=12,297.64,,0,-5.92" title="The Dragon" target="_blank">Click for map to venue</a></p>

 

and here's what i've written to try and copy the layout: -

<?php
// Connects to your Database 

include 'connect_include.php';
$query  = "SELECT (left(LCASE(monthname(gl_date)),3)) as 'month', day(gl_date) as 'day',gl_date, gl_venue, gl_venue, gl_city, gl_postcode, gl_phone, gl_contact, gl_net, gl_comments, gl_text FROM tg_gig_list where gl_date > curdate() and gl_publish = 1 order by gl_date asc";
$result = mysql_query($query);

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{echo 


"<img height=\"79px\" width=\"79px\" valign=\"bottom\" alt=\"calendarpic\"  style=\"position:absolute; vertical-align:bottom; z-index:1;\" src=\"../private/calpics/background.png\" hspace=\"6\" vspace=\"75\" align=\"left\"\"/>
<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic1\"  style=\"position:absolute; vertical-align:top; z-index:2;\" src=\"../private/calpics/{$row['day']}.png\" hspace=\"6\" vspace=\"75\" align=\"left\"\"/>
<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic2\"  style=\"position:absolute; vertical-align:top; z-index:3;\" src=\"../private/calpics/{$row['month']}.png\" hspace=\"6\" vspace=\"75\" align=\"left\"\"/></td><br><br><br>        ".
"<h1 class=\"border_3\">{$row['gl_venue']}</h1>".
"<p>{$row['gl_text']}</p>".
"<p><a onclick=\"window.location.href='http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q={$row['gl_postcode']}'\">Click for map</a></p>";
}

?>

 

The main problem is getting the calendar image to sit over the heading like in the static page.

 

What do I need to do? i'm sure i'm really close to the solution - help would be much appreciated.

 

Darren

 

[linus72982]

Working links would help to know what you're wanting.

[dazzathedrummer]

Hi,

 

Sorry!! we switched our hosting to a different domain yesterday, these should work : -

 

This is the static page with the correct 'look': -

http://www.the-guards.co.uk/gigs.html

 

 

and this is what i've got so far: -

http://www.the-guards.co.uk/gigstest.php

 

thanks,

 

Darren

[linus72982]

I'm not quite sure why you have "position:absolute" in your style tag as you don't seem to be positioning it anywhere (you don't need it for vertical-align to work) and you don't seem to be using it for child positioning.  Position:absolute takes the item out of the normal flow of the page which has the effect of making the rest of the page content think it isn't even there.  If you take out that position tag, things should line up like they're supposed to.  If you really must keep the position style in there for whatever reason, just add a left padding to your text tag that is the width of the calendar image (ie - wrap the text in a span like this: <span style="padding-left:20px;">TEXT</span>)

[dazzathedrummer]

Ahh, brilliant!

 

Its the padding - the calendar pic is made up of three layered  images that are put together with php - so if I remove the 'position:absolute' they all apear side by side.

 

The padding on the text element does the job though!

 

Just one more small thing that i'm now having trouble with, the first calendar pic in the repeated entry appears to be lower than the rest - I cant figure out why this is??

 

http://www.the-guards.co.uk/gigstest.php

 

 

here's the php that drives the list : -

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{echo 


"<img height=\"79px\" width=\"79px\" valign=\"bottom\" alt=\"calendarpic\"  style=\"position:absolute; vertical-align:bottom; z-index:1;\" src=\"../private/calpics/background.png\" hspace=\"6\" vspace=\"75\" align=\"left\"\"/>
<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic1\"  style=\"position:absolute; vertical-align:top; z-index:2;\" src=\"../private/calpics/{$row['day']}.png\" hspace=\"6\" vspace=\"75\" align=\"left\"\"/>
<img height=\"79px\" width=\"79px\" valign=\"top\" alt=\"calendarpic2\"  style=\"position:absolute; vertical-align:top; z-index:3;\" src=\"../private/calpics/{$row['month']}.png\" hspace=\"6\" vspace=\"75\" align=\"left\"\"/></td><br><br><br>        ".
"<h1 class=\"border_3\"><span style=\"padding-left:85px;\">{$row['gl_venue']}</span></h1>".
"<p><span style=\"padding-left:85px;\">{$row['gl_text']}</span></p>".
"<p><a onclick=\"window.location.href='http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q={$row['gl_postcode']}'\">Click for map</a></p>";
}

 

The calendar pic in the first entry is actually in the correct place, the others are too high (I'll pad the text to fit around that now I know how too!!)

 

 

thanks

 

Darren

 

 

 

[dazzathedrummer]

anyone got any ideas about this??

 

should I post this in the php area??

 

thanks,

 

Darren