First, I made a version of the dynamically generated content without styling to identify a rough range of style values necessary to reposition the elements to where I would like them to be. For my holiday-themed web-to-lead form, I use a sideways “Merry Christmas” graphic and a sideways “Happy Holidays” graphic. Unstyled, the images are displayed exactly in the order they are produced, e.g. immediately before the form.
<?php
echo “<img id=’christmas’ src=’img/Merry_Christmas.gif’ />
<img id=’holidays’ src=’img/Happy_Holidays.gif’ />
<form name=’order_form’ id=’order_form’ action=’http://buymystats.com/order_received.php’ method=’post’>
[A bunch of form controls]
</form>”;
?>
Embedded image: http://joeohlerjr.com/img/BuyMyStats_Order_Form_without_Styling.jpg
BuyMyStats.com order form without styling
Because I want the “Merry Christmas” graphic to appear left of the form and the “Happy Holidays” graphic to appear right of the form, I then wrote style attributes to change their positions. This had the effect of placing the images to where I wanted relative to the document but bumping down the form by the height of the side-by-side images. The images are displayed above the form almost exactly in the order they are produced, but with a considerable space between due to the inclusion of style attributes shifting the location of those images prior to display.
<?php
echo “<img id=’christmas’ src=’img/Merry_Christmas.gif’ style=’position:absolute; left:72px; top:170px;’ />
<img id=’holidays’ src=’img/Happy_Holidays.gif’ style=’position:relative; right:-480px; top:132px;’ />
<form name=’order_form’ id=’order_form’ action=’http://buymystats.com/order_received.php’ method=’post’>
[A bunch of form controls]
</form>”;
?>
Embedded image: http://joeohlerjr.com/img/BuyMyStats_Order_Form_with_Image_Styling_Only.jpg
BuyMyStats.com order form with image styling only
Finally, I wrote style attributes for the form such that its position was bumped up into the space between the images. Everything is now as it should be! The images are displayed to the sides of the form as if the form were produced just after the “Merry Christmas” graphic to its left and immediately before the “Happy Holidays” graphic to its right.
However, a peek at the source code reveals that both images were called before the form was, and the prior screen captures of the unstyled form prove this order of production. The modification of position attributes was possible due to writing the inline style sheet within the element tags; imported style sheets miss the dynamically generated content because the content does not exist when imported style sheets are applied during initial page load.
<?php
echo “<img id=’christmas’ src=’img/Merry_Christmas.gif’ style=’position:absolute; left:72px; top:170px;’ />
<img id=’holidays’ src=’img/Happy_Holidays.gif’ style=’position:relative; right:-480px; top:132px;’ />
<form name=’order_form’ id=’order_form’ action=’http:// buymystats.com/ order_received.php’ method=’post’ style=’position:relative; left:0px; top:-110px;’>
[A bunch of form controls]
</form>”;
?>
Embedded image: http://joeohlerjr.com/img/BuyMyStats_Order_Form_with_Image_and_Form_Styling.jpg
BuyMyStats.com order form with image and form styling
I used an inline style sheet because inline attributes of a dynamically generated tag are applied upon creation of that tag; there is no need for communication to or from a style-switching function. If you attempt to apply an imported style to page elements which have not yet been written to the output file, e.g. dynamically generated within the HTML document, then the style will not be applied because imported styles are applied upon initial page load and not to any elements which are produced after page load via the JavaScript “document.write()” function or by the PHP “echo” function. It is therefore easiest to code your intended style attributes within the output function to guarantee the HTML tags generated by that function are modified immediately by those style attributes.
Update: Although I have taken the holiday light show off my main page as of January 8, you may enjoy it here.
An Official Blog of Joseph Ohler, Jr. 