[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Вставить в цикле блоки в ряд
maranello
Привет! Пожалуйста, помогите начинающему программеру. Знания PHP на начальном уровне, взялся на разработку сайта на PHP.
Необходимо вывести в цикле структуру как на фото. Он выводит каждый блок снизу. Просто я не знаю, возможно ли реализовать как задумано? Заранее, огромное спасибо!
user posted image

Как вставлять правильно код на форум так и не понял.

Вот стили:

#view_cat1 {
width:250px;
height:360px;
margin-left:10px;
margin-top:20px;
float:left;
}

#cat01 {
width:150px;
height:45px;
background-color: #333;
font:16px Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
float:left;
padding-top:5px;
}
#cat02 {
width:100px;
height:45px;
background-color:#900;
float:left;
font:16px/40px Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
padding-top:5px;
}

#cat03 {
height:280px;
}

#cat04 {
width:150px;
height:30px;
background-color: #333;
color:#FFFFFF;
float:left;
}
#cat05 {
width:100px;
height:30px;
float:left;
}




Вот HTML

<div id="content"><!--КОНТЕНТ-->

<p class="zagolovok">МУЖСКИЕ ФУТБОЛКИ</p>



<div
id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="clear"></div>


<div
id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="clear"></div>

<div
id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->

<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="foto/woman/min01.jpg" width="250" height="280" /></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="clear"></div>




</div>
<!--КОНТЕНТ-->




Спустя 14 минут, 9 секунд (8.11.2011 - 15:30) sebastjan написал(а):
И так по порядку.
Так и не оформил нормально код показанный.
Сверху над полемм ввода текста есть менюшка, там кнопочки РНР,SQL,HTML.....
Выделяешь свой код и кликаешь на кнопочку соответственно коду.
Второе, и не менее важное, ты сам в редакторе НТМЛ смотрел что выводит твой хтмл ? dry.gif
Сомненваюсь.
Сначало как и говорил сформируй страницу в ХТМЛ без РНР вставок.(Всю страницу !)
То что ты показал полная ерунда.
Выложи всю страницу ХТМЛ без РНР , хоть и понятно что ты хочешь, но садиться и верстать за тебя всю страницу - ни как не хочется.
Так что давай всё сначало и последовательно.
И не забудь оформить как надо а то бан поймаешь и вылетиш с форума.

Спустя 21 минута, 40 секунд (8.11.2011 - 15:52) maranello написал(а):
Все, оформил.
Понял что в первый div вставляю float:left;, делает правильно, но после третьей нужно вставить разрыв, а как это реализовать в цикле непонятно. Извините за глупые вещи, если что.

Спустя 22 минуты, 51 секунда (8.11.2011 - 16:15) sebastjan написал(а):
Сейчас разберёмся.
В цикле можно выводить как и выводил, только убери из вёрстки после третего дива
<div id="clear"></div>

Всё одно будет всё по порядку выводить.

Спустя 15 минут, 16 секунд (8.11.2011 - 16:30) sebastjan написал(а):
Вот твой код немного подправил.
Не забывай ставить картинкам бордер=0.
Низ каждого блока не занимался.
В цикле выводи блоки как и говорил без
<div id="clear"></div>
после третего.
Поправь пути к картинке я использовал свою картинку.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<meta
http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title>
<style>

#view_cat1 {
width:260px;
height:360px;
margin-left:10px;
margin-top:20px;
float:left;
}

#cat01 {
width:150px;
height:45px;
background-color: #333;
font:16px Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
float:left;
padding-top:5px;
}
#cat02 {
width:100px;
height:45px;
background-color:#900;
font:16px/40px Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
padding-top:5px;
float: left;
}

#cat03 {
height:280px;
float: left;
width: 250px;
}

#cat04 {
width:150px;
height:30px;
background-color: #333;
color:#FFFFFF;
float:left;
}
#cat05 {
width:100px;
height:30px;
float:left;
}</style>
</head>

<body>
<div
id="content"><!--КОНТЕНТ-->

<p class="zagolovok">МУЖСКИЕ ФУТБОЛКИ</p>
<div
id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->
<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"><a href="#"><img src="sss.jpg" width="250" height="280" border="0"/></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>

</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->
<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="sss.jpg" width="250" height="280" border="0"/></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>
</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->
<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="sss.jpg" width="250" height="280" border="0"/></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>
</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->
<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="sss.jpg" width="250" height="280" border="0"/></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>
</div>
<!--ВЫВОД КАТЕГОРИЙ-->

<div id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->
<div id="cat01">ФУТБОЛКА С ПРИНТОМ</div>
<div
id="cat02">1050 p.</div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="sss.jpg" width="250" height="280" border="0"/></a>
</div>
<div
id="cat04"><p class="opisanie"><a class="opisanie" href="#">Описание товара</a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>
</div>
<!--ВЫВОД КАТЕГОРИЙ-->

</div><!--КОНТЕНТ--></body>
</html>



Спустя 1 час, 5 минут, 39 секунд (8.11.2011 - 17:36) maranello написал(а):
Спасибо огромное!!!
Я так понял, ты в стилях добавил, правильно?

#cat03 {
height:280px;
float: left;
width: 250px;
}


Убрал <div id="clear"></div>. Насчет рамки в картинках, у меня в стилях прописано для всех img - none. Так?

Значит я правильно вывожу цикл?

Спустя 2 часа, 33 минуты, 11 секунд (8.11.2011 - 20:09) sebastjan написал(а):
Спасибо можешь в карму сказать :)
С размерами картинки и самого блока сам выбери что тебе надо.
про цикл не знаю, правильно или нет выводишь.
Должен так примерно представляться код.
Примерно так, пробуй.

<?php
//сначало подключи соединение с базой
// потом проверяешь есть ли соединение иначе переадресация на 404.html страницу - она должна быть в корне сайта

$result = mysql_query("SELECT * FROM `майки`") or die (header('location: /404.html'));
// условно назвал таблицу в БД майки
while ($row= mysql_fetch_assoc($result))//выбор из БД всех записей категории заносишь в массив $row и выводишь всё что найдёться
{// РНР отделяем по максимому от ХТМЛ
?>
<div
id="view_cat1"><!--ВЫВОД КАТЕГОРИЙ-->
<div id="cat01"><?php echo $row['zagolovok']; ?></div>
<div
id="cat02"><?php echo $row['preis']; ?></div>
<div
id="clear"></div>
<div
id="cat03"> <a href="#"><img src="<?php echo $row['name_img']; ?>" width="250" height="280" border="0"/></a>
</div>
<div
id="cat04"><p class="opisanie">
<a
class="opisanie" href="<?php /* тут ты сам подумай как будешь формировать адресс*/ ?>"><?php echo $row['text']; ?></a></p></div>
<div
id="cat05"> <a href="#"><img class="img_view" src="img/button02.png" width="80" /></a>
</div>
</div>
<!--ВЫВОД КАТЕГОРИЙ-->
<?php
}//конец вывода все
?>


Спустя 1 час, 6 минут, 43 секунды (8.11.2011 - 21:15) maranello написал(а):
В карму не дают пока сказать, не хватает сообщений. Обязательно поставлю.
У тебя в примере не цикл, просто вывод из базы.
У меня посложнее будет.

<?php 
printf ("<p class='zagolovok'>%s</p>",$myrow["text"]);


$rezult = mysql_query ("SELECT id,title,price,mini_img,description,basket FROM data WHERE cat='$cat'",$db);


if (!$rezult)
{
echo "<p>Запрос на выборку из базы данных не прошел. Оповестите администратора - maranello@mail.ru <br> <strong>Код ошибки:</strong></p>";
exit (mysql_error() );
}

if (mysql_num_rows ($rezult) > 0)

{
$myrow = mysql_fetch_array ($rezult);
}

else
{
echo "<p>Информация из базы не может быть извлечена. В таблице нет записей.</p>";
exit ();
}



do
{
printf (" <div id='view_cat1'><!--ВЫВОД КАТЕГОРИЙ-->

<div id='cat01'>%s</div>
<div id='cat02'>%s</div>
<div id='cat03'> <a href='view_post.php?id=%s'><img src='%s' width='250' height='280' /></a>
</div>
<div id='cat04'><p class=opisanie><a class=opisanie href='view_post.php?id=%s''>%s</a></p></div>
<div id='cat05'> <a href='#'><img class='img_view' src='%s' width='80' /></a>
</div>
</div><!--ВЫВОД КАТЕГОРИЙ-->"
, $myrow["title"],$myrow["price"],$myrow["id"],$myrow["mini_img"],$myrow["id"],$myrow["description"],$myrow["basket"]);
}

while ($myrow = mysql_fetch_array ($rezult));


?>

Спустя 9 минут, 23 секунды (8.11.2011 - 21:25) sebastjan написал(а):
Что посложнее то?
Что прооверять надо ,так это и так понятно.
Потом выводишь уже отфармотированную строку printf (" <div id='view
Что не есть хорошо смешивать РНР и хтмл.
Если тебе так нравится , никто не протестует.

Спустя 1 час, 5 минут, 58 секунд (8.11.2011 - 22:31) maranello написал(а):
Дружище, не обижайся. я же говорю что не знаю, правильно ли я делаю или нет. Честно, думал засмеют на форуме. Вот и спрашиваю.
Что значит не смешивать php и html, как же тогда выводить теги?

Спустя 2 часа, 19 минут, 22 секунды (9.11.2011 - 00:50) imbalance_hero написал(а):
maranello
irbis-team.com & irbis-school.com - тут переучиваемся с Попова :)

$i = 0 - в начале.
В цикле разрыв:
if(++$i%3 == 0) {echo '<div style="clear:both"></div>';}

Спустя 2 минуты, 9 секунд (9.11.2011 - 00:52) sebastjan написал(а):
Да нет, ни чего страшного я не обижаюсь.
У тебя вывод ХТМЛ формирует РНР, это не очень красиво и расточительно на ресурсах
РНР интерпритатора.
Выглядит не красиво, мешанина, трудно читаемо и не гибко.
На мой и не только мой взгляд ,лучше разделять ХТМЛ и вывод данных РНР.
Самому ведь удобней и понятней.

Спустя 1 минута, 44 секунды (9.11.2011 - 00:54) sebastjan написал(а):
imbalance_hero
спсибо, хороши пример привёл а самое главное короче и не придумаешь.

Спустя 3 минуты, 15 секунд (9.11.2011 - 00:57) sebastjan написал(а):
А что за сиснтаксис
img src='%s'
%s ????
Это движок какой то ?

Спустя 6 часов, 2 минуты, 42 секунды (9.11.2011 - 07:00) maranello написал(а):
Спасибо за помощь. Действительно, все мы учимся у Попова. :)

Этот код куда нужно вставить, можно поподробнее?

if(++$i%3 == 0) {echo '<div style="clear:both"></div>';} 



Спустя 6 минут, 49 секунд (9.11.2011 - 07:07) maranello написал(а):
Цитата (sebastjan @ 8.11.2011 - 21:57)
А что за сиснтаксис
img src='%s'
%s ????
Это движок какой то ?

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

printf ("img src='%s'",$myrow["img"]

Спустя 56 минут, 13 секунд (9.11.2011 - 08:03) imbalance_hero написал(а):
maranello
Этот код надо вставить в цикл. А для начала понять, что он делает smile.gif

Спустя 4 минуты, 47 секунд (9.11.2011 - 08:08) maranello написал(а):
Цитата (imbalance_hero @ 9.11.2011 - 05:03)
maranello
Этот код надо вставить в цикл. А для начала понять, что он делает smile.gif

Понял что отменяет float после трех блоков.
Поподробнее можешь объяснить?

Спустя 4 минуты, 6 секунд (9.11.2011 - 08:12) imbalance_hero написал(а):
++$i - увеличиваем $i на 1, до работы с ней.
%3 - получаем остаток от деления. 3/3 = 0, 6/3 = 0. 5/3 = 2 10/3 = 1 (3+3+3, остаток 1)
== 0 - проверяем, если остаток равен 0 (а это будет в одном случае из трёх, то выполняем условие).

Итого: Увеличили цифру на 1, получили остаток от деления, и если 3 - вставляем разделитель.

Ещё одно но, после цикла нужно будет, в случае, если $i не кратно 3, вставить ещё раз разделитель, как бы закончить вывод.

Спустя 1 час, 53 минуты, 2 секунды (9.11.2011 - 10:05) Gesandte написал(а):
проще просто отфлоатить все блоки которые выводятся в цикле, а блоку-обертке задать overflow: hidden; Перенос на новую строку будет идти автоматически.

Спустя 44 минуты, 46 секунд (9.11.2011 - 10:50) maranello написал(а):
Цитата (Gesandte @ 9.11.2011 - 07:05)
проще просто отфлоатить все блоки которые выводятся в цикле, а блоку-обертке задать overflow: hidden; Перенос на новую строку будет идти автоматически.

Можно поподробнее, пожалуйста, желательно с примером и описанием.

Спустя 1 минута, 37 секунд (9.11.2011 - 10:51) maranello написал(а):
У меня выводиться цикл, как я хочу, т.е. 3 блока в ряд, следующие на другую строку, и так 9 штук как мне надо. Но.... Понимаю что он переносит цикл, потому что больше нет места, и это я думаю не правильно.

Спустя 25 минут, 36 секунд (9.11.2011 - 11:17) Gesandte написал(а):

div.wrapper {
overflow: hidden;
}

div.block {
width: 33%;
height: 250px;
float: left;
}


<div class="wrapper">
<?php
for ($i = 0; $i < 9; $i++;) { ?>
<div
class="block">....</div>
<?php
} ?>
</div>


Спустя 4 часа, 5 минут, 7 секунд (9.11.2011 - 15:22) sebastjan написал(а):
Цитата (maranello @ 9.11.2011 - 04:07)
Цитата (sebastjan @ 8.11.2011 - 21:57)
А что за сиснтаксис
img src='%s'
  %s ????
Это движок какой то ?

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

printf ("img src='%s'",$myrow["img"]

Это получаеться маркер %s, значит его как то и где то надо определить.
Я так понял с начала как увидел.
Ни когда мне не приходилось так делать.
Тогда вот ещё вопрос - а почему сразу не выводишь данные из РНР а делаешь такую конструкцию?
Так же ведь длиннее получаеться.


Спустя 2 минуты, 44 секунды (9.11.2011 - 15:25) maranello написал(а):
sebastjan
Привет! Я просто только учусь, и не понимаю что ты спрашиваешь.
Я вывожу функцию printf в цикле, как он мне без ХТМЛ тегов построит необходимую мне конструкцию

Спустя 7 минут, 48 секунд (9.11.2011 - 15:33) sebastjan написал(а):
Я о об этом %s , это своего рода маркер куда подставяться данные из БД,
где то в коде должно быть его определение.
Потому и спросил про движок, видел не помню на какой СМС ,там типа {xxx} момент был для вставки контента
В общем это не важно.
Если тебе понятней так, делай как читаешь нужным.
По идеи если твоя конструкция с циклом и выводом работает, то должно выводить блоки нормально ,единственное - как я понял тебе ндо ограничить количество блоков 9. Пример уже подсказали.

Спустя 1 час, 49 секунд (9.11.2011 - 16:33) imbalance_hero написал(а):
sebastjan
Это болезнь Поповщины. А ссылку, как научиться нормально программировать и исправить всё это я уже дал smile.gif
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.