RSS

zapisz się: RSS Artykuły

szukaj

Większa ilość divów na stronach kategorii oraz stronie głównej

Komentarze 4

Otwarte pudłaWczoraj zmieniłem nieco wyświetlanie się artykułów na stronie głównej oraz stronach z kategoriami. Wprowadzenia do artykułów są teraz pokazywane w divach poziomo - po dwa wprowadzenia w jednej linii. Aby tego dokonać trzeba każdy nowy fragment zamieścić w pojemniku - divie (wówczas możemy za pomocą styli CSS ustawić je poziomo).

Pomysłodawcą jak uzyskać taki efekt jest Joost. Zmodyfikowałem nieco jego propozycję, aby było wygodniej. W takim razie najpierw szukamy w snews.php w funkcji articles następującego fragmentu:

echo '<ul class="vertical">';
 menu_articles(0,10,1);
 echo '</ul>';
 } else {
 $link = '<a href="'._SITE;
 while ($r = mysql_fetch_array($result)) {

Tuż pod nim dodajemy:

$div = '';
 if(! $_POS){ $div = '</div>';
 echo '<div class="bloki">';
 }

W następnym kroku szukamy w tej samej funkcji fragmentu:

}
if (!empty($currentPage) && ($num> $article_limit) && $on) {
paginator( $currentPage, $totalPages, l('paginator'));
}

Nad tym fragmentem dodajemy kod zaznaczony poniżej:

echo $div;
}
if (!empty($currentPage) && ($num> $article_limit) && $on) {
paginator( $currentPage, $totalPages, l('paginator'));
}

Teraz właściwie mamy już wszystko. Wpisy ukazują się na stronie głownej i kategoriach w divach o klasie "bloki". Teraz wystarczy wykorzystać odpowiednie style dla klasy bloki. Przykładowo w momencie robienia tego wpisu moje style dla klasy bloki są następujące:

.bloki {
	float: left;
	border: 1px solid black;
	width: 47%;
	overflow: auto;
	height: 250px;
	margin: 5px;
	padding-right: 5px;
	font-size: 11px;
}

Float sprawia, że nasze divy są umieszczane w poziomej linii, jeśli jest miejsce. Określiłem też szerokość i wysokość diva. W przypadku szerokości im mniejsza będzie, tym więcej divów będzie w jednej linii. Należy zwrócić uwagę na wszelkie odstępy wewnętrzne i zewnętrzne bocznych divów. Zmniejszyłem również boczny panel z menu, dzięki czemu mamy więcej miejsca dla głównej treści. Należy również zauważyć zastosowanie overflow. Wysokość diva jest ustalona, także w przypadku, gdy treść w tym divie się nie zmieści, to wartość overflow:auto sprawi, że pojawi się suwak z boku diva.

W razie problemów z przełącznikiem stron na dole (strona następna, poprzednia) należy dołączyć do styli nową klasę "paginator" i dodać do niej clear: both. Klasa ta jest użyta w snews.php jednak nie ma ona żadnych wartości w pliku CSS.

Ile divów zrobisz w jednej linii i jak wykorzystasz ten mały dodatek zależy tylko od Twojej inwencji twórczej. Wystarczy pogrzebać trochę w stylach, oraz układzie strony w index.php.

Podziel się

Bookmark and Share

  1. Kaito
    Kaito napisał(a):

    Witam

    Bardzo przydatny dodatek. Dzięki niemu możemy (tak jak u ciebie) pokazać w ciekawy sposób artykuły w kategoriach.

  2. Katalog
    Katalog napisał(a):

    Bardzo przydatne, muszę przyznać, że tego właśnie szukałem. Dzięki za instrukcję!

  3. Bodek
    Bodek napisał(a):

    Witam,
    mam takie pytanko, jak trzeba zmodyfikować snews'a aby były miniaturki przy artykule na stronie głównej?

  4. Paweł Landzberg
    Paweł Landzberg napisał(a):

    Ja korzystam z tego dodatku:
    Intro

    Ale są bardziej typowe chyba:
    Miniaturki 1
    Miniaturki 2

    Nie sprawdzałem tych dwóch powyższych.

Komentowanie zostało zablokowane