0

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

Iv 使用 php 生成图像按钮，但由于某种原因，图像似乎向右移动。Iv 尝试使用 CSS 修复它，但这似乎没有帮助。这是使用的代码 iv 以及 css 和一个实时示例。请有人帮助我。

<?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;

}
4

4 回答 4

1

你可能在那里有一个type-o....

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

div/dir 混合你已经开始了吗？

于 2012-10-31T21:34:36.010 回答
1

不是真正的 php 问题，因为 PHP 只是输出 HTML。

一个问题是您有多个具有相同 ID 的元素。改为a class。

示例：id="button"应该是class="button".

还要更改您的 CSS，使其匹配类而不是 ID：

#button {应该.button {

另一个是你的一些元素dir不是div.

我在 Chrome 的开发工具上将其拉出，它显示#button_inside左侧填充为 40 像素。我没有看到它在任何地方定义，但padding: 0在其上设置样式似乎将元素放置到位。不过，在做任何其他事情之前，请先解决代码问题。

于 2012-10-31T21:34:44.903 回答
0

我认为问题出在你的<dir>标签上。一旦我将它们更改为<div>它们似乎符合要求。

此外，<dir>从 HTMl 4.01 开始，它是一个已弃用的标签，并已从 HTML 5 中删除，因此您真的不想使用它。

于 2012-10-31T21:36:08.323 回答
0

尝试类似的东西

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

注意'HTML;'的位置 很重要，请参阅有关 heredoc 字符串的 php 文档。

于 2012-10-31T21:48:24.940 回答