1 Востаннє редагувалося Monolith (30.07.2015 12:41:45)

Тема: Статті виводяться у дві колонки

Зараз створюю свій перший сайт.Дійшов вже до виводу статей з БД.
Все працює за допомогою циклу do while.Але в мене статті виводяться в одну колонку.Мені цікаво як зробити як тут: http://www.michaelddavis.com/work/ .Тобто у дві колонки.
Ось код:

<div id="content">
<?php 
$result = mysql_query("SELECT id, title, img, date FROM articles ORDER BY id DESC", $db);
$myrow = mysql_fetch_array($result);
do {
printf("
<div class='article'>
    <div class='article_date'>%s</div>
    <div class='article_main_img'><img src='%s'></div>
    <div class='article_title'>%s</div>
</div>", $myrow["date"], $myrow["img"], $myrow["title"]);
} while($myrow = mysql_fetch_array($result));
?>
</div>

Ось CSS:

/*Стилі статей на index.php*/
    .article{
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 40px;
        width: 300px;
    }
    .article_date{
        height: 20px;

        background-color: #FF00AE;
    }
    .article_main_img img{
        height: 220px;
        width: 300px;

        background-color: #D0FF00;
    }
    .article_title{
        height: 50px;

        background-color: #3AE2CE;
    }

Ось скріншот:
https://pp.vk.me/c628219/v628219466/8dd0/Q_vculRMGGk.jpg

Подякували: Анатолій1

2 Востаннє редагувалося ktretyak (30.07.2015 14:27:29)

Re: Статті виводяться у дві колонки

Зараз стає все популярнішими чутливі (чи адаптивні) дизайни, коли на телефоні показується так як у вас вийшло, а на широких екранах по-два в ряд.

Просто розрахуйте щоб ширина частин була якраз такою, щоб ставало по дві картинки в ряд, а решта справа CSS. Або ж використовуйте Bootstrap 3, з ним це легко зробити.

Але якщо все ж ви хочете виводити через PHP по два в ряд, то це можна зробити в два етапи: спочатку розбиваєте масив по два (в межах циклу перевіряєте парність лічильника ітерацій), а потім виводите його, наприклад, через foreach.

Подякували: Monolith, Анатолій2

3

Re: Статті виводяться у дві колонки

тема про html + css. Переніс у відповідний розділ

4 Востаннє редагувалося Monolith (30.07.2015 16:08:25)

Re: Статті виводяться у дві колонки

Випадково вирішив проблему.Просто замінив:

.article{
float: left;
width: 300px;
padding-left: 30px;
padding-bottom: 40px;
}

Ось:
https://pp.vk.me/c628219/v628219466/8e1b/_7M1EFdNYiw.jpg

Подякували: Ярослав1

5

Re: Статті виводяться у дві колонки

ktretyak написав:

Зараз стає все популярнішими чутливі (чи адаптивні) дизайни, коли на телефоні показується так як у вас вийшло, а на широких екранах по-два в ряд.

Доречно, останнім часом теж граюсь з адаптивними дизайнами своїх сторінок, варто перевіряти, ну у всякому випадку я перевіряв адаптивний дизайн - https://www.google.com/webmasters/tools … -friendly/
Спочатку взагалі не переймався оптимізацією дизайну сторінок, зараз дещо переймаюсь, намагався дотримуватись вимог щодо стилів розмірів, відстаней між блоками, шрифтом, .... і стільки ще є всього для оптимізації, що потрібен дизайнер щоб все це підігнав (підігнув :) ) під вимоги ,і... в мене не вийшло гугл все ще ругається "- Що ж ти такий? не хочеш оптимізувати свої сторінки!"
собі думаю, вчи англійський, вчи бази даних, а тут ще й вивчай оптимізацію і інше, загалом я забив на вимоги, проте вам не рекомендую :)

misha_bondar_2012 Цікаво, Міш, а що ти з дизайном, як відносини, оптимізація сайту?

Збираю знання і... роздаю знання :)
Подякували: Monolith1

6

Re: Статті виводяться у дві колонки

Анатолій написав:
ktretyak написав:

Зараз стає все популярнішими чутливі (чи адаптивні) дизайни, коли на і показується так як у вас вийшло, а на широких екранах по-два в ряд.

Доречно, останнім часом теж граюсь з адаптивними дизайнами своїх сторінок, варто перевіряти, ну у всякому випадку я перевіряв адаптивний дизайн - https://www.google.com/webmasters/tools … -friendly/
Спочатку взагалі не переймався оптимізацією дизайну сторінок, зараз дещо переймаюсь, намагався дотримуватись вимог щодо стилів розмірів, відстаней між блоками, шрифтом, .... і стільки ще є всього для оптимізації, що потрібен дизайнер щоб все це підігнав (підігнув :) ) під вимоги ,і... в мене не вийшло гугл все ще ругається "- Що ж ти такий? не хочеш оптимізувати свої сторінки!"
собі думаю, вчи англійський, вчи бази даних, а тут ще й вивчай оптимізацію і інше, загалом я забив на вимоги, проте вам не рекомендую :)

misha_bondar_2012 Цікаво, Міш, а що ти з дизайном, як відносини, оптимізація сайту?

Дякую.Це мій перший сайт, тому говорити про оптимізацію мені поки що рано.

7

Re: Статті виводяться у дві колонки

misha_bondar_2012 написав:

Дякую.Це мій перший сайт, тому говорити про оптимізацію мені поки що рано.

Дуже класна відповідь, :) , повторюсь, в  свій час теж думав рано, тепер маю ось такий класний меседж від гугл мастера, та що тут подумаєш виправити 140 сторінок :)

http://bestwebit.biz.ua/Forum_Replace_02/mistakes.jpg

Збираю знання і... роздаю знання :)
Подякували: Monolith1

8

Re: Статті виводяться у дві колонки

Анатолій написав:
misha_bondar_2012 написав:

Дякую.Це мій перший сайт, тому говорити про оптимізацію мені поки що рано.

Дуже класна відповідь, :) , повторюсь, в  свій час теж думав рано, тепер маю ось такий класний меседж від гугл мастера, та що тут подумаєш виправити 140 сторінок :)

http://bestwebit.biz.ua/Forum_Replace_02/mistakes.jpg

Дякую.Переконали... :)