Results 1 to 7 of 7
  1. #1
    Newbie
    Join Date
    August 13th, 2007
    Posts
    4
    Pure CSS Formatting of DataFeed Output
    Background:
    I'm parsing a RSS feed (PHP using SimplePie) created from an affiliate datafeed and I need some help with formatting in CSS. I just want to display the product thumbnail image with title and description underneath all in a 3 column table looking fashion.

    I've been successful in parsing the feed and putting each thumbnail/title/description in a floating left div (width is set so text wraps). The problem lies with the variable sizes of the title and descriptions so that the 4th product doesn't know to clear the longest of the 3 products above it. (Does that make sense?) Basically I want it to look like a table (nice and neat), but not use tables. (Think GoldenCan type output of thumbnail and title with multiple products per row.)

    I'm not a programmer so my skills in manipulating PHP aren't very good without some clear examples.

    Does anyone know how I can get the desired results?
    I'm guessing something like every 3rd item insert end div, or clear right, but I don't know how to tell PHP to do something every 3rd time.
    I suppose if I did know how I could create a table and every 3rd item echo </td></tr><tr><td> and create a table to do what I want. But I though CSS was meant to get rid of tables.
    I can get the desired result if every title and description were the same length, but I don't want to edit 100's of products in the datafeed just for that.

    Any experienced CSSers out there that can handle this? I'm willing to compensate if needed. If you have any questions, please ask.

    Thanks in advance,
    Sean

    PS. I've gone through tutorials like this one http://www.alistapart.com/articles/practicalcss/ but it doesn't account for variable caption/description sizes.

  2. #2
    Grandma broke her coccyx! Uncle Rico's Avatar
    Join Date
    May 8th, 2007
    Location
    North Carolina
    Posts
    2,238
    In the <div> or <span> element of the fourth element, have you tried clear:both?

    <div style="clear:both;">

    or

    <span style="clear:both;">

    The clear both should that element clear both the left and right side. Ofcourse, I may have mis-understood you.

  3. #3
    Newbie
    Join Date
    August 13th, 2007
    Posts
    4
    Quote Originally Posted by SeymourButts
    In the <div> or <span> element of the fourth element, have you tried clear:both?
    That's part of the problem because it's a datafeed/rss feed being parsed I don't currently have the capability to insert code every 4th loop.

    The code is something like this:

    <php says start looping through feed>
    <div class="xproducts">
    <a href><img></a>
    <p>title</p>
    <p>description</p>
    </div>

    <div class="xproducts">
    <a href><img></a>
    <p>title</p>
    <p>description</p>
    </div>

    and the divs keep repeating until all products are listed. the xproducts class has a float left and a width as well as a margin.

    here is a rough example: http://mables.com/halloween/feed-test2.php
    Notice how if the last product in a row has only a one line title the next product will start just after the product with a two line title? If you have the webdeveloper toolbar or can somehow outline block elements/divs you can get a good visual of what is stopping it.

    thanks for trying.

  4. #4
    Believe knight01's Avatar
    Join Date
    August 14th, 2006
    Location
    Dayton, Ohio
    Posts
    1,815
    I think the issue is not with the css, its with the php. I've done something like this where I alternate colors every X rows.

    Not writing the actual code, but you'd want to step and break. For example:

    $x=0;
    <php says start looping through feed>
    $x++;
    if $x=4(
    <div style="clear:both;">other stuff;
    $x=0;
    )
    elseif(
    <div class="xproducts">
    <a href><img></a>
    <p>title</p>
    <p>description</p>
    </div>
    )

    Hopefully that makes it a little clearer, but my css is very weak. Basically, use an if statement to add a clear for the 4th product.
    Last edited by knight01; August 15th, 2007 at 08:40 PM. Reason: shoot, left off some of the $'s
    Someday starts today
    Military Discounts

  5. #5
    Newbie
    Join Date
    August 13th, 2007
    Posts
    4
    knight01 - thanks for your help. Your thoughts lead me to some testing and I think I've narrowed down what I need. It looks like what I need is pure PHP, as I've come to tackle the requirements of CSS if I can use PHP the way I want.

    What I want to do is wrap 3 feed items in a container DIV and give that DIV a clear left attribute.
    Example:
    Code:
    <div class="container">
                   <div class="xproduct">
                    item 1
                    </div>
    
                   <div class="xproduct">
                    item 2
                    </div>
    
                   <div class="xproduct">
                    item 3
                    </div>
    </div>
    <div class="container">
                   <div class="xproduct">
                    item 4
                    </div>
    
                   <div class="xproduct">
                    item 5
                    </div>
    
                   <div class="xproduct">
                    item 6
                    </div>
    </div>
    I'm using this as my PHP parsing code:
    Code:
    <?php
        $max = $feed->get_item_quantity(45);
        for ($x = 0; $x < $max; $x++) {
            $item = $feed->get_item($x);
        ?>
    
                   <div class="xproduct">
                    <?php echo $item->get_description(); ?>
                    </div>
    
                    
        <!- Stop looping through each item once we've gone through all of them. ->
        <?php } ?>
    So from what I gather the code says the max is 45 items, and incrementally goes through the feed one by one and displays each.
    But how, specifically, do I add the container DIV in every 3rd item?
    OR
    Should I insert a <div class="container"> before the 1,4,7,10, etc. items and an extra </div> after the 3,6,9,12, etc. items?

    If anyone can point me in the direction of a page that might explain this that'd be great, as I don't even know what this is called to be able to search for it.

  6. #6
    Believe knight01's Avatar
    Join Date
    August 14th, 2006
    Location
    Dayton, Ohio
    Posts
    1,815
    PHP Code:
    <?php
         $clear
    =0;
        
    $max $feed->get_item_quantity(45);
        for (
    $x 0$x $max$x++) {
            
    $item $feed->get_item($x);
            
    $clear++;
       if (
    $clear <=4) {?>
                  <div class="xproduct">
                    <?php echo $item->get_description(); ?>
                    </div>
    <?;}
    else (
    ?>
                    <div class="clearcsscode">
                    <?php echo $item->get_description(); ?>
                    </div>
    <?
                    $clear
    =);
        <!- 
    Stop looping through each item once we've gone through all of them. ->
        } ?>
    Something like that should work. I've not tested the code, but it should get you started. Just do a little debugging as needed. Basically you're doing an if statement checking for the variable $clear, if $clear is less than 4, print the regular css code you've got, if it is equal to 4 then use the clear css code and reset the vairable to go through the next set of products.

    I think you were trying to use 4 divs in a row, for 4 products, if it is 3 then change the <=4 to <=3, or whatever number you need.
    Someday starts today
    Military Discounts

  7. #7
    Newbie
    Join Date
    August 13th, 2007
    Posts
    4
    knight001 - again thanks for the info. It is very helpful.

    Unfortunately, or maybe I should say; Fortunately I got impatient waiting for someone to give me answers and went out searching in hopes of learning some PHP from trial and error.

    That's exactly what I did, and it felt great to accomplish it. Although seeing how you did it makes it seem so much simpler than what I was trying to do.

    Here is the code I ended up after hours of search Google, reading PHP manuals, and trial and error:
    Code:
    <?php if ($feed->data) { ?>
    <div class="prodcontain">&nbsp;
        <?php
        $max = $feed->get_item_quantity(45);
        for ($x = 0; $x < $max; $x++) {
    	    $item = $feed->get_item($x);
    		$x1 = $x + 1;
        ?>
        		<?php if ($x1 % 3 == 0){ ?>
                   <div class="xproduct">
                    <?php echo $item->get_description(); ?>
                    </div>
    </div>
    <div class="prodcontain">&nbsp;
    			<?php } else { ?>
    				
                        <div class="xproduct">
                        <?php echo $item->get_description(); ?>
                        </div>
                    
    		 	<?php } ?>
        <?php } ?>
    <?php } ?>
    </div>
    Essentially to make it work I had to create a variable, like you did with $clear, because it was counting from 0 and the first row always had one more than the rest of the rows. I also have to start off the DIV prodcontain before the PHP because the first row needs to be wrapped with this DIV. I used a % modular because that's all I saw in examples on how to make every other row in a table a certain color when I searched through Google. So I figured I could use it for the $x variable. Anyway, I finally figured it out and tested it.

    But I like your rendition better because I can easily change it to 4 or 5 per row later down the line and not mess with the modular thingy. Gosh that's simple. I kept thinking too mathematical and how I could use the $x variable instead of easily creating my own.

    I'll probably use your method for counting, with formatting changes, unless you can think of a reason what i came up with is more useful.

    Thanks again for your help, it's super appreciated.
    If you ever need some CSS tips I'd be glad to lend a hand.

    OH, and for some reason, to work properly, the prodcontain DIV needs to have "content" in it so I put a space in it. I might find a more elegant solution later though.

  8. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. link overlapping in browser from datafeed output
    By tsmgroup2 in forum Google Affiliate Network - GAN
    Replies: 3
    Last Post: June 26th, 2008, 03:04 PM
  2. Weird WM Output
    By sweat in forum WebMerge (Fourthworld.com)
    Replies: 4
    Last Post: March 11th, 2005, 05:32 PM
  3. Anyone need RSS output?
    By FourthWorld in forum WebMerge (Fourthworld.com)
    Replies: 6
    Last Post: February 25th, 2005, 04:17 PM
  4. amazon.pl output into dynamic page
    By CrazyGuy in forum Cusimano.com Scripts
    Replies: 3
    Last Post: June 25th, 2003, 08:39 AM
  5. Amazon.pl - Need some help with script output
    By richardeward in forum Cusimano.com Scripts
    Replies: 18
    Last Post: January 18th, 2003, 01:22 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •