Помогите перенести строчку вниз

vave · 18 Ноя 2011

Делаю магазинчик на скрипте Autoboss 3.0

и столкнулся с проблемой в файле module-listings.php

Файл немного модернизирован, картинки идут в 4 ряда, только теперь под картинки не могу вставить цены, сразу все картинки сбиваются куда-то в бок, помогите пожалуйста!

вот весь код:

PHP:

<?php
if($conf[featured]) $first = "featured DESC,"; else $first = "";
$result = mysql_query("SELECT * FROM $dblist $where ORDER BY $first $_GET[srt] LIMIT $start, $_GET[p]", $link);
if(mysql_num_rows($result)) {

	$n = 0;
	while($row = mysql_fetch_array($result)) {
		
		// determine which image to display
		if($row[images]) {

			$image = mysql_query("SELECT fname FROM $dbimgs WHERE listid='$row[id]' ORDER BY id ASC LIMIT 1", $link);
			$image = mysql_fetch_array($image);
			$image = "thumbs/".$image[fname];

		} else {

			$image = "common/no-photo-thumb.jpg";

		}

		// make data display-friendly
		$row = safe_data($row, 'display');

		// create variable string to pass
		$show = "show.php?id=$row[id]";
		foreach($_GET as $name => $value) if($name != 'id') $show .= "&amp;$name=$value";

		if(!($n % 4)) echo "<div align='center' class='listin'>";

	
		
		//echo "<div style='border: 3px solid #ccc; width:110px; height:110px;'>";
		echo "&nbsp;&nbsp;&nbsp;<a href='$show'><img title='$row[make]' style='border: 1px solid #E2E2E2; padding:10px;' src='$image' alt=''/></a>&nbsp;&nbsp;&nbsp;";
        //echo "</div>";
        
     	 //echo "";
		if($row[ebay_url]) echo "";
		elseif($row[price])	echo $conf[currency].number_format($row[price]);
		else echo "Call for Price";
		//echo "";
			
		

        $n++;
		if(!($n % 4)) echo "</div><br/>";
	}
	if($n % 4) echo "</div><br/>";
	
} else {

	echo "<div id='msg-alert'>We're sorry, no listings could be found that match your query.</div>";

}
?>

картинка

PHP:

echo "&nbsp;&nbsp;&nbsp;<a href='$show'><img title='$row[make]' style='border: 1px solid #E2E2E2; padding:10px;' src='$image' alt=''/></a>&nbsp;&nbsp;&nbsp;";

цена

PHP:

		if($row[ebay_url]) echo "";
		elseif($row[price])	echo $conf[currency].number_format($row[price]);
		else echo "Call for Price";

t3s · 18 Ноя 2011

когда смешивается логика и оформление - это не самая лучшая идея
даже если обходитесь без шаблонизатора, не стоит пользоваться конструкциями вроде

PHP:

if(!($n % 4)) echo "</div><br/>";

попробуйте вынести блок-контейнер за пределы цикла, в вашем случае это

PHP:

<div align='center' class='listin'>

ток не забудьте о закрывающем
а внутри цикла примерно так:

PHP:

echo "<div style="float:left; width:xxxxx"><a href='$show'><img title='$row[make]' style='border: 1px solid #E2E2E2; padding:10px;' src='$image' alt=''/></a><br />"; 

        if($row[ebay_url]) echo ""; 
        elseif($row[price])    echo $conf[currency].number_format($row[price]); 
        else echo "Call for Price"; 
echo "</div>";

width:xxxxx - в данном случае ширина, поделенная на 4 (учитывая вместе с отступами)

vave · 19 Ноя 2011

К сожалению не помогает,

даже с пустыми div всё равно в 1 ряд становятся фотки...

PHP:

echo "&nbsp;&nbsp;&nbsp;<div><a href='$show'><img title='$row[make]' style='border: 1px solid #E2E2E2; padding:10px;' src='$image' alt=''/></a></div>&nbsp;&nbsp;&nbsp;";

SergXP · 19 Ноя 2011

можно попробовать посмотреть код страницы, и внимательно проанализировать
ту часть кода, где выводится блок с изображениями.
еще как вариант, отказаться от див, и использовать UL LI

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Вы дважды повторяете код, в цикде и после него:

PHP:

if(!($n % 4)) echo "</div><br/>";

плюс, когда-то пользовался подобным методом, если память не изменяет
одно условие будет больше другое меньше

PHP:

if(!($n % 3)) echo "<div align='center' class='listin'>";

и к примеру

PHP:

if(!($n % 4)) echo "<div align='center' class='listin'>";

хотя могу ошибаться.. но в первую очередь, посмотрите что генерирует Вам данный код..

vave · 19 Ноя 2011

Тоже не получается...
даже когда ставлю вокруг картинки просто <p></p> то тоже всё сбрасывается в одну строчку

Добавлено через 24 минуты
Пробовал для эксперимента ставить между словами r\n\, n\
ничего на следующую строчку не переносится...

Добавлено через 40 минут
цены и картинки ничем не разделяются, либо текст будет справа от картинки, либо если ставить перенос <br> то он является переносом и для картинок, соответственно они все складываются друг под другом.
при попытке их как то разделить html-ом, картинки так же уходят друг по друга...

Qwest-fx · 19 Ноя 2011

Посмотри в полученный исходник html, и выложи его сюда на форум, про и картинки стили не забудь(сохранить полностью).

Для ковыряния в html рекомендую firebug для ff.

В опере называется проинспектировать элемент, в хроме просмотр кода элемента.

Попробуй поиграться со стилями, по отключать их.

vave · 19 Ноя 2011

пробовал вообще удалять папку styles, картинки от неё не зависят.
вот получившийся HTML код

HTML:

<!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>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel='stylesheet' href='styles/styles.css' media='all'/>
<script type='text/javascript'></script>
</head>
<body style="margin:0px; padding:0px;">
<p align="center"><img border="0" src="bg.jpg" width="950" height="470"></p>
<div align="center">

	<table border="0" width="950" cellspacing="4" cellpadding="3">
		<tr>
			<td width="214" valign="top">

			<img border="0" src="menu.gif" width="211" height="318"><p>&nbsp;</td>

			<td valign="top">	

<div align='center' class='listin'>&nbsp;&nbsp;&nbsp;<a href='show.php?id=1&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132156704358673.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;$3,000&nbsp;&nbsp;&nbsp;<a href='show.php?id=3&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157499999554.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price&nbsp;&nbsp;&nbsp;<a href='show.php?id=4&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157501245986.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price&nbsp;&nbsp;&nbsp;<a href='show.php?id=5&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157502846381.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price</div><br/><div align='center' class='listin'>&nbsp;&nbsp;&nbsp;<a href='show.php?id=7&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157672714387.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price&nbsp;&nbsp;&nbsp;<a href='show.php?id=8&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157599685257.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price&nbsp;&nbsp;&nbsp;<a href='show.php?id=2&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Красивая цепочка2' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157498364284.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price&nbsp;&nbsp;&nbsp;<a href='show.php?id=6&amp;p=25&amp;page=1&amp;srt=make ASC'><img title='Часики' style='border: 1px solid #E2E2E2; padding:10px;' src='thumbs/132157505053821.jpg' alt=''/></a>&nbsp;&nbsp;&nbsp;Call for Price</div><br/>

<div class='pages'>

	Page 1 of 1&nbsp;&nbsp;(8 Listings)		

</div>
		</td>
		</tr>
	</table>
</div>
</body>

</html>

SergXP · 19 Ноя 2011

Каждый товар, это блок.
Попробуйте так:

PHP:

<?php 
if($conf[featured]) $first = "featured DESC,"; else $first = ""; 
$result = mysql_query("SELECT * FROM $dblist $where ORDER BY $first $_GET[srt] LIMIT $start, $_GET[p]", $link); 
if(mysql_num_rows($result)) { 

    $n = 0; 
    while($row = mysql_fetch_array($result)) { 
         
        // determine which image to display 
        if($row[images]) { 

            $image = mysql_query("SELECT fname FROM $dbimgs WHERE listid='$row[id]' ORDER BY id ASC LIMIT 1", $link); 
            $image = mysql_fetch_array($image); 
            $image = "thumbs/".$image[fname]; 

        } else { 

            $image = "common/no-photo-thumb.jpg"; 

        } 

        // make data display-friendly 
        $row = safe_data($row, 'display'); 

        // create variable string to pass 
        $show = "show.php?id=$row[id]"; 
        foreach($_GET as $name => $value) if($name != 'id') $show .= "&amp;$name=$value"; 

        if(!($n % 4)) echo "<div align='center' class='listin'>"; 

     //внутренний блок
     echo '<div style="float:left; padding: 5px;">';
         
        //echo "<div style='border: 3px solid #ccc; width:110px; height:110px;'>"; 
        echo "&nbsp;&nbsp;&nbsp;<a href='$show'><img title='$row[make]' style='border: 1px solid #E2E2E2; padding:10px;' src='$image' alt=''/></a>&nbsp;&nbsp;&nbsp;"; 
        //echo "</div>"; 
         
          //echo ""; 
        if($row[ebay_url]) echo ""; 
        elseif($row[price])    echo $conf[currency].number_format($row[price]); 
        else echo "Call for Price"; 
        //echo ""; 
             
        //закрываем внутренний блок 
        echo '</div>';


        $n++; 
        if(!($n % 4)) echo "</div><br/>"; 
    } 
    if($n % 4) echo "</div><br/>"; 
     
} else { 

    echo "<div id='msg-alert'>We're sorry, no listings could be found that match your query.</div>"; 

} 
?>

но я бы сделал так:

PHP:

<?php 
if($conf[featured]) $first = "featured DESC,"; else $first = ""; 
$result = mysql_query("SELECT * FROM $dblist $where ORDER BY $first $_GET[srt] LIMIT $start, $_GET[p]", $link); 
if(mysql_num_rows($result)) { 

    $n = 0; 
    echo '<ul class="gallery">';
    while($row = mysql_fetch_array($result)) { 
         
        // determine which image to display 
        if($row[images]) { 

            $image = mysql_query("SELECT fname FROM $dbimgs WHERE listid='$row[id]' ORDER BY id ASC LIMIT 1", $link); 
            $image = mysql_fetch_array($image); 
            $image = "thumbs/".$image[fname]; 

        } else { 

            $image = "common/no-photo-thumb.jpg"; 

        } 

        // make data display-friendly 
        $row = safe_data($row, 'display'); 

        // create variable string to pass 
        $show = "show.php?id=$row[id]"; 
        foreach($_GET as $name => $value) if($name != 'id') $show .= "&amp;$name=$value"; 

        echo '<li>';
         
        echo "<p><a href='$show'><img title='$row[make]' style='border: 1px solid #E2E2E2; padding:10px;' src='$image' alt='' class='preview'/></a></p>"; 

        if($row[ebay_url]) echo ""; 
        elseif($row[price])    echo '<p>'.$conf[currency].number_format($row[price]).'</p>'; 
        else echo "<p>Call for Price</p>"; 

       echo '</li>';
    } 
    echo '</ul>';
     
} else { 

    echo "<div id='msg-alert'>We're sorry, no listings could be found that match your query.</div>"; 

} 
?>

и подключаем стили:

HTML:

.gallery
{
	cursor: default;
	list-style: none;
}

.gallery img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.gallery li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

// стиль изображения thumb
.gallery .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

P.S. код не проверял)

vave · 19 Ноя 2011

Не верю своим глазам!
я уже думал это безнадёжно!
Второй вариант работает! :yahoo:

SergXP · 19 Ноя 2011

выход есть всегда) с дивами, нужно просто верстку набросать, тогда быстро собирается код для генерации.
как совет, установите на Firefox расширение Firebug

быстро можете редактировать те же стили и сразу же видеть результат..
потом просто копируете в файл со стилями, и обновляете страницу)

Помогите перенести строчку вниз

vave

Полезный

Вложения

t3s

Мой дом здесь!

vave

Полезный

SergXP

Постоялец

vave

Полезный

Qwest-fx

Профессор

vave

Полезный

SergXP

Постоялец

vave

Полезный

SergXP

Постоялец