CODEWITHSUNDEEP
phpimagecssalignment
chris stark
chris stark

Reputation:

php is shifting my images

http://jajuka.net/stark/logo.php

Iv generated image buttons with php but for some reason the images appear shifted to the right. Iv tried fixing it with CSS but that didn't seem to help. Here is the code iv used as well as the css and a live example. please someone help me.

<?php

    $dirname = "artwork/logo/";

    $images = scandir($dirname);

    shuffle($images);

    $ignore = array(".", "..");

    foreach($images as $curimg){

        if(!in_array($curimg, $ignore)) {
            echo "<div id='button'> <dir id='button_inside'> <img src='".$dirname.$curimg."'> </img> </dir> </dir>";

        }

    }              

?>

//--------------------------{ CSS }-----------------------//

#button {
border: 1px solid #999;
border-radius: 15px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.37);
height: 57px;
width: 57px;
float: left;
background-color: #FFF;
}
#button_inside {
float: left;
border-radius: 14px;
height: 55px;
width: 55px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.25);
background: rgb(242,242,242); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(242,242,242,1) 7%, rgba(255,255,255,1) 21%, rgba(226,226,226,1) 77%, rgba(226,226,226,1) 86%, rgba(254,254,254,1) 94%, rgba(211,211,211,1) 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(7%,rgba(242,242,242,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(77%,rgba(226,226,226,1)), color-stop(86%,rgba(226,226,226,1)), color-stop(94%,rgba(254,254,254,1)), color-stop(98%,rgba(211,211,211,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(242,242,242,1) 7%,rgba(255,255,255,1) 21%,rgba(226,226,226,1) 77%,rgba(226,226,226,1) 86%,rgba(254,254,254,1) 94%,rgba(211,211,211,1) 98%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */

}



img {
float: left;
height: 40px;
width: 40px;

overflow: visible;

}

Upvotes: 0

Views: 115

Answers (4)

TML
TML

Reputation: 12966

Try something like

<?php
foreach(glob("artwork/logo/*") as $f) {
    echo <<<HTML
        <div class="button" style="background-repeat: no-repeat;
             background-image: url('$f');">
        </div>
HTML;
}

Note that the location of the 'HTML;' is significant, see the php documentation on heredoc strings.

Upvotes: 0

Matthew Green
Matthew Green

Reputation: 10401

I think the issue is with you <dir> tags. Once I changed them to <div> they seemed to fall in line.

Also, <dir> is a deprecated tag as of HTMl 4.01 and removed from HTML 5 so you really don't want to use that.

Upvotes: 0

sachleen
sachleen

Reputation: 31131

Not really a php question as the PHP simply outputs the HTML.

One issue is that you have multiple elements with the same ID. Change it to a class instead.

Example: id="button" should be class="button".

Also change your CSS so it matches the class instead of an ID:

#button { should be .button {

Another is that some of your elements are dir instead of div.

I pulled it up on Chrome's dev tools and it shows #button_inside has a left padding of 40px. I don't see it defined anywhere, but setting a style padding: 0 on it seems to put the element in place. Still, fix the issues with the code first before doing anything else.

Upvotes: 1

Grambot
Grambot

Reputation: 4514

You've probably got a type-o there....

<div...><dir...>...</dir></dir>

div/dir mixing you've got going?

Upvotes: 1

Related Questions