Alternating CSS Styles with Array Output

Dev Shed Forums Sponsor:

January 25th, 2013, 07:12 AM

volterony

Contributing User

Join Date: Jul 2010

Posts: 60

Time spent in forums: 1 Day 2 h 54 m 32 sec
Reputation Power: 3

Alternating CSS Styles with Array Output

Hi There

Is there a way of choosing which CSS styles to execute when displaying items in an array?

Depending on the size and orientation of the image within the image key of the array, I need to be able to chose the appropriate div container to display the product/items?

So for example say I had an array of products:

PHP Code:


		
			
 $deals = array(

        "products"=> array(

            array('productTitle' => "Title1",'productImage' => "images/img1.jpg",'productDescription' => " Desc1",'rrp' => "£69.99",'salePrice' => "£60.00"),

            array('productTitle' => "Tile2",'productImage' => "images/img2.jpg",'productDescription' => " Desc2",'rrp' => "£69.99",'salePrice' => "£60.00"));

I have a stylesheet that can be applied to item one, and all other array items with image orientations similar to item 1. This is a container div that has a fixed height and width (css1.css). However, say item2 in the array needs to have specific elements positioned differently (however using the same main container) but with different css to position the image, title and description within the container div?

I know how to echo and apply the styles to item1 and similar items to the first produt in the array:

PHP Code:


		
			
foreach ($deals as $k => $v)

{

  echo "<div class=\"header\"><h2>$k:</h2><br>";

  if(is_array($v))

  {

    foreach ($v as $key => $val)

     {

         echo "<div class=\"wrapper\">";

          echo "<img class=\"logo\" src=\"".$val['logo']."\">";

           echo "<h2>".$val['productTitle']."</h2>";

          echo "<img class=\"container\" src=\"".$val['productImage']."\">";

         echo "<div class=\"description\">".$val['productDescription']; echo "</div>";

          echo "<div class=\"bottom\">RRP "." ".$val['rrp']."<br>"."NOW ONLY "."".$val['salePrice']; echo "</div>";

    }

       echo "</div>";

  }

     echo "</div>";

}

I was thinking of give each item in the array an key=>value of 'id' => '0' for the default items, and 'id' => '1' for items that need the different stylesheet/styles applied?

So when I loop through the items with foreach, if you encounter an id=1, apply the different styles.

Hope this makes sense and someone can advise?

Volterony

January 25th, 2013, 08:13 AM

NotionCommotion

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Sep 2006

Posts: 1,513

Time spent in forums: 2 Weeks 1 Day 23 h 32 m 46 sec
Reputation Power: 526

Add a class name to your $deals['products'] array, and then add the class to some parent element of your HTML. Use only one cssfile.css, but use classes to apply different CSS to the different DIVs.

PHP Code:


		
			
foreach ($v as $key => $val)

{

  echo '<div class="wrapper '.$val['class'].'">';

  ....

}

Note how I used single quotes instead of escaped outer quotes as you used? Your way also works, but is harder to read and easier to make mistakes.

Alternating CSS Styles with Array Output

Developer Shed Advertisers and Affiliates