horizontal scroll from while loop

[adishardis]

horizontal scroll from while loop

Hmmmm, I accidently posted this in the wrong forum. Is there a way to move it?

Hey, ive been trying for several hours now to get the list horizontal with scroll instead of vertical.

the divs stacks up to the right but wraps at the end of the div no matter what?! :(

here's my code:

<div class="container" style="width:600px;height:200px;overflow-x: scroll;overflow-y: hidden; white-space: nowrap;">
    <?php
        $sql26 = "SELECT * FROM db ORDER BY Id_kund desc";  
            $result26 = mysql_query($sql26) or die (mysql_error());  
            while ($row26 = mysql_fetch_array($result26)) 
            { 
            if($row26["poang"] <= 20){
                $star = 1;
            }
            elseif($row26["poang"] <= 30){
                $star = 2;
            }
                    elseif($row26["poang"] <= 40){
                $star = 3;
            }
                    elseif($row26["poang"] <= 50){
                $star = 4;
            }
            else{
                $star = 5;
            }  
            echo "<div class='view view-tenth' style=\"float:left;display:inline-block;\"><img src=\"foretag/eff/Presentationer/{$test}/".$row26["Matningsnamn"]."/enheter/1.png\" wIdth=\"200\" height=\"200\" style=\"position: absolute;\">
                    <div style=\"background:black;opacity:0.6;width:200px;height:30px;\"></div>
                    <img src=\"img/stars/STARS2/3/$star.png\" style=\"position: absolute; float:right; top: 5px; left: 3px;width:90px;z-index:1111;\"> <H6 style=\"font-size:11px;color:white;position: absolute;top: 9px; left: 106px;z-index:3311;\">".date("M,Y", strtotime($row26['Datum_formatning']))."</H6>
                        <div class='mask'>
                            <h2 style=\"text-transform: uppercase;color: #333;width:120px;text-align: center;position: relative;font-size: 15px;border-bottom: 1px solid rgba(0, 0, 0, 0.3);background: transparent;margin: 0px 10px;padding: 5px;\">".$row26["Matningsnamn"]."</h2>
                            <p>Kanal: <b>".$row26['Kanal']."</b></p>
                            <p>Intentionsförflyttning: <b>".$row26['Nyfikenhet']." enheter</b> </p>
                            <a class='info' href='http://xxx/main.php?id=3&scroll=".$row26[Id]."'>Gå vidare</a>
                        </div>
            </div>";
            } ;
            ?>
</div>

Cheers
Adam

@adishardis

the divs stacks up to the right but wraps at the end of the div no matter what?! :(

Do you have an image of it this div because it's a bit hard to see the issue is because I don't have the DB to test what error you have!

[adishardis]

Hi, thanks for replying! Im not sure if this is what you wanted but heres a picture where I try to outline what I want and what's wrong :)

http://adam.synology.me/PROBLEM.png

Peace
Adam

THe link goes to blank/error for me. To which forum do you want it posted?

[adishardis]

There, I fixed the link :)

@adishardis

I'm not familiar with CSS but I notice in your code you didn't put any padding?

The <div> is at 600px width? You have 3 boxes I don't think it will fit the 4th one or etc..

The image is at 200px? That's for each image? I don't think 600px will fit another image in there.

[adishardis]

well I want to 3 divs to be visible and then use a horizontal scroll to show the rest!

hah link still broken for me. wrt problem - you're designing for a static width. how will this translate to ipad/tablet and mobile? or is that not a concern?

[adishardis]

Lets try again with the image :)

http://hardis.synology.me/PROBLEM.png

Well, 99% of the time the pages will be accessed through a computer. I have however been toying with fluid.css but ran inte some strange problems and thought that it's not worth investing time on that at this moment! Thanks for the concern though!!

Cheers

@adishardis

The more I look at your image and code. This is more CSS than PHP issue

On your div container

<div class="container" style="width:600px;height:200px;overflow-x: scroll;overflow-y: hidden; white-space: nowrap;">

Try used this:

width:600px;
height:200px;
display: block;
overflow: auto; 
white-space: nowrap;

instead of using overflow-x: scroll;overflow-y: hidden;

[adishardis]

I'm not convinced it's the css. I've tried so many different setups with css but with no luck so I'm thinking it has something to do with the SELECT loop or something...

This is what it looks like if I use your css setting.

http://hardis.synology.me/newCSS.png

thanks for your thoughts though!!

mvh
Adam

@adishardis

I'm thinking it has something to do with the SELECT loop or something.

You're not sure? That's not good. If it's not the CSS than you think it has something to do with the loop but when you echo it out the div container it's still CSS. Unless you have issue selecting from the db then that will be another issue then? If you can echo it out without any errors than it has to been CSS that you echo out

In order to track down the problem, look at the html output in 'view source' or whatever it's called in your browser of choice and see if it's complete. If so, your issue may be css. If so, post your problem to that forum as you'll get the expertise there.

[adishardis]

I will do that, thank you for your suggestions!

/Adam

[adishardis]

Ok, I finally got it workin and it was a problem with the css as you said but with a twist. the class name .view existed in two stylesheets and in one of them it was adding a float:left. So I just had to fix that then my original code worked. Thanks for kicking me in the right direction :)

/Adam