Styling Dynamically Created Content

Donate to Joseph Ohler, Jr.!

After searching the Internet for a comparable article, I concluded the following explanation is unique and hence worth posting (as opposed to re-explaining what has already been explained very well on other websites or blogs). The topic of this post is how I found out the specific configuration of cascading style sheet (CSS) attributes for my PHP-generated holiday-themed order form. For those new to PHP, it is a recursive acronym: Php Hypertext Preprocessor.

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&#8217; 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

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&#8217; 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

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

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.

Donate to Joseph Ohler, Jr.!

Hit Holiday Single!

National Day of Code, Learn to Code, Learn Coding, Cascading Style Sheets Primer, CSS Tutorial, Advanced CSS, Positioning and Styling, Practice Code, Practice Coding

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s