Как грамотно вывести из базы превьюшки?

[Svetix]

Всем доброго времени суток!
Подскажите, как грамотно вывести информицию из базы!
Есть сайт с фотографиями, которые поделены на разные категории,
за вывод фоток по категориям отвечает файл view_cat.php
Блок когда с выводом выглядит так:

PHP код:

<?php

$result = mysql_query("SELECT id,title,mini_img,img FROM data WHERE cat='$cat'",$db);
        

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

if (mysql_num_rows($result)> 0)
{

$myrow  = mysql_fetch_array($result);
do
{
printf ("<span id='coolmenu1'><a href='%s' rel='lightbox[street]' title='%s'><img src='%s'></a></span>",$myrow["img"],$myrow["title"],$myrow["mini_img"]);

}
while ($myrow  = mysql_fetch_array($result));
}


else 
{
echo "<p>В данной категории пока нет фотографий.</p>";
exit ();
}

?>

Соответственно, стиль css для вывода выглядит так:

#coolmenu1{
width: 90%; /*Ширина меню */
background-color: #000000;  /*Фоновый цвет ячейки*/
margin-right:20px;
margin-left:20px;
}

#coolmenu1 a{

font:16px Century Gothic; /*Шрифт текста*/
padding:5px; /*Внутренний отсутп текста ссылки от краев ячейки*/
border:0px;
text-decoration: none; /*Подчеркивание у ссылок - нет*/
}

#coolmenu1 a img{
border:0px;
padding-top:30px;
padding-bottom:10px;
}

Информация из базы выводится....
Есть скрин как это отображается.
Но как видите в IE отступы съехали, если делать чтоб в IE все отображалось хорошо, то съезжает в Опере...да еще и если разное разрешение экрана, то тоже все съезжает
Подскажите, как сделать одиноковое правило для всех вариантов, чтобы допустим вывод из базы был оформлен как-то универсально!
Буду очень рада Вашей помощи!

[jeka5555]

Ну во-первых ты ставишь

width: 90%; /*Ширина меню */

что применяется для каждого тега <span>. Правильно будет весь блок картинок заключить в тег, например - div и width: 90% применять к нему.
Во-вторых ты ставишь margin-right:20px; и margin-left:20px; в итоге получается, что у тебя съезжают картинки с новой строки, лучше сделать так: margin-right:40px; и margin-left:0px;

Вот твой код, в правильно виде:

PHP код:

<?php 

$result = mysql_query("SELECT id,title,mini_img,img FROM data WHERE cat='$cat'",$db); 
         

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

if (mysql_num_rows($result)> 0) 
{ 

$myrow  = mysql_fetch_array($result); 

?><div class="images"><?php
do 
{ 
printf ("<span id='coolmenu1'><a href='%s' rel='lightbox[street]' title='%s'><img src='%s'></a></span>",$myrow["img"],$myrow["title"],$myrow["mini_img"]); 

} 
while ($myrow  = mysql_fetch_array($result)); 
?></div><?php

} 


else  
{ 
echo "<p>В данной категории пока нет фотографий.</p>"; 
exit (); 
} 

?>

И стили:

.images {width: 90%; /*Ширина меню */ padding-left:20px; /* Отступ блока слева */}
.images span {
background-color: #000000;  /*Фоновый цвет ячейки*/
margin-right:40px;
margin-left:0px;
}
.images a {
font:16px Century Gothic; /*Шрифт текста*/
padding:0px; /*Внутренний отсутп текста ссылки от краев ячейки*/
border:0px;
text-decoration: none; /*Подчеркивание у ссылок - нет*/
}

.images a img{
border:0px;
padding-top:30px;
padding-bottom:10px;
}

кстати, id='coolmenu1' можно убрать, если конечно это у тебя в скриптах где-нибудь не используется. Да, и зачем тебе тег "rel" ? ты знаешь зачем он нужен вообще?

[Svetix]

Огромное спасибо, все переделала, все теперь прекрасно отображается и ничего не съезжает!!!
идентификатор для span убрала, нигде он мне не нужен!
а по поводу rel='lightbox[street]' , это атрибут тега a. У меня прикручен скрипт лайтбокс, для просмотра фоток, так вот этот атрибут и отвечает за открытие фотки уже большого варианта.
Думаю правильно ответила!
Еще раз огромное спасибо за ответ!!!