Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member Deek Fracott's Avatar
    Join Date
    Sep 2012
    Location
    Clarksville, TN
    Posts
    31
    Member #
    33091
    I am working on a project for a real estate agent found here.

    The issue I am having is with the CSS-Controlled database feed for a slideshow widget.

    Right now, it looks like this:




    I Would like it to look more like this (with text to the right):



    Heres how the CSS for this feed works:

    #IDX-slideshow
    - The outermost container which wraps around the entire slideshow.
    #IDX-slideshowImage
    - The Div that wraps around the image that is displayed on the slideshow.
    #IDX-ssImage
    - Direct CSS access the the image itself.
    #IDX-addressLine
    - The container for the Listing Address.
    #IDX-cszLine
    - The container for the Listing City/State/Zip line.
    #IDX-priceLine
    - The container for the Listing Price.
    .IDX-ssLinkText
    - The class for all links that are displayed.



    my CSS looks like this:
    Code:
    #IDX-cbtsst-slideshow {}
    #IDX-cbtsst-slideshowImage {}
    #IDX-cbtsst-ssImage {}
    #IDX-cbtsst-priceLine { font-weight: bold; <br>
                            font-size: 30px; }
    #IDX-cbtsst-addressLine { font-weight: bold; }
    #IDX-cbtsst-cszLine { font-weight: bold; }
    The feed element:
    Code:
    <script type="text/javascript" src="http://www.homeclarksville.idxco.com/idx/16065/customSlideshowJS.php?stp=basic&name=cbtsst&pt=sfr&city[]=8989&lp=100000&hp=250000&ba=0&srt=DESC&slideshowWidth=400&slideshowHeight=200&imageWidth=200&imageHeight=100&rotation=8&propCount=25&alignment=center"></script>
    I know its probably something simple, but I am fried up to my eyeballs in code, and cant even say my own name straight rite now.

    ***Also, I'd like to NOT use absolute positioning, is that possible..? ***

    Thanks ya bunch of geniuses!

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Add float:left; to the image's CSS
    TheGAME1264 and Deek Fracott like this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I'd also put the three text lines into a single div and add a float: right; to it just to keep long pieces of text from spilling out under the picture.

    The other thing...when you float, you must clear. Remember that, because I'm about 99% sure your next question will be based on that very premise if you don't.
    AlphaMare and Deek Fracott like this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Member Deek Fracott's Avatar
    Join Date
    Sep 2012
    Location
    Clarksville, TN
    Posts
    31
    Member #
    33091
    thanks guys! that did the trick. Would there be any way to take my containers and relocate them around a webpage... like targetting the different pieces to Iframes or tables? (w/o using absolute positioning)

    Quote Originally Posted by TheGAME1264, post: 243460
    I'd also put the three text lines into a single div and add a float: right; to it just to keep long pieces of text from spilling out under the picture.
    Probably another obvious question- how to do this?

  6. #5
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The simplest way (but not the best...that's homework!)
    Code:
    <div style="float:  right;">
    Your three text lines.
    </div>
    Deek Fracott likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  7. #6
    Member Deek Fracott's Avatar
    Join Date
    Sep 2012
    Location
    Clarksville, TN
    Posts
    31
    Member #
    33091
    I actually dont have direct access to those 3 lines- this would all be simple simon if I did, they are generated by PHP (which I only have CSS control over).

    Code:
    <script type="text/javascript" src="http://www.homeclarksville.idxco.com/idx/16065/customSlideshowJS.php?stp=basic&name=cbtsst&pt=sfr&city[]=8989&lp=100000&hp=250000&ba=0&srt=DESC&slideshowWidth=400&slideshowHeight=200&imageWidth=200&imageHeight=100&rotation=8&propCount=25&alignment=center"></script>
    is absolute position (CSS), the only way i can manipulate those 3 lines as objects?

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Do you not have access to edit the PHP?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    What he asked. That would be the simplest way.

    Failing that, you could pull a jQuery hack whereby you create a div, add the three elements to the div, and then overwrite the elements with the filled-in div...mind you, that's a jQuery hack and more difficult in this case than editing the PHP.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com