Совместите изображение img с текстом в поле - PullRequest
0 голосов
/ 03 ноября 2011

РЕДАКТИРОВАТЬ: Это работает теперь благодаря 'olly_uk'

EDIT2: Это работает сейчас, новыравнивание ящиков неправильно.Вы можете просмотреть скриншот ЗДЕСЬ .Без какого-либо текста он будет идеально выровнен по 2 прямоугольникам на каждой строке на идеальном расстоянии друг от друга, но с текстом он будет отображаться под ним.Почему?

Я пытаюсь отобразить изображение, затем на этом изображении я хочу отобразить текст из базы данных.Хорошо, это повторяет изображения (3, потому что у меня есть только 3 примера продукта в базе данных), но продукты не выровнены в полях.Это подпадает под это.Я искал в Google, но ничего не смог найти

Можно ли вообще использовать, например, margin-top для перемещения отправленного эха, чтобы я мог выровнять его в поле?

Я хочу использоватьстиль или класс в PHP ...

Пример изображения: ИЗОБРАЖЕНИЕ

добавление <style>p{...};h3{...};</style> сработало

Пример кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BOX</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<style>
    p {
    position:relative;
    top:-240px;
    left:180px;
    }
    h3 {
    position:relative;
    top:-270px;
    left:30px;
    }
</style>
</head>

<?php
    include 'includes/connection.php';

    $query = "SELECT * FROM products";

    $result = mysql_query($query);
?>

<body>

<div class="header navpos c1" id="nav">
            <table summary="header" border="0">
                <tr>
                    <td>
                        <ul>
                            <li class="home"><a href="index.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="about"><a href="about.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="contact"><a href="contact.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="twitter"><a href="index.html"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="facebook"><a href="index.html"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></a></li>
                        </ul>
                    </td>
                </tr>
            </table>
    </div>

<div class="offers">
    <div class="content_box">
        <?php
            while($products = mysql_fetch_array($result)) {
                echo '<img src="includes/images/content_box.png" border=0 />';
                echo "<h3>" . $products['products'] . "</h3>";
                echo "<p>" . $products['description'] . "</p>";
            }   
        ?>
    </div>
</div>
</body>
</html>

1 Ответ

2 голосов
/ 03 ноября 2011

Я думаю, вы могли бы достичь этого с помощью CSS.имея отрицательный верх, чтобы натолкнуть текст поверх изображения.постараюсь привести пример кода, когда я вернусь домой.

проверить это в то же время, w3schools CSS-позиционирование

надеюсь, что помогло

РЕДАКТИРОВАТЬ: добавлен код, чтобы показать, что я имею в виду

<html>
<head>
    <title>text over image</title>
    <style>

        p {
        position:relative;
        top:-200px;
        }
        h2 {
        position:relative;
        top:-140px;
        }
    </style>
<head>
<body>
    <img src="/images/office1.jpg" alt="demo image"/>
    <h2>test text</h2>
    <p>test desciption text</p>
    <hr/>
    <img src="/images/office1.jpg" alt="demo image"/>
    <h2>test text</h2>
    <p>test desciption text</p>
</body>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...