Jak zrobić, żeby zdjęcia były na tle takiego okienka jak w linku? Chodzi o to, żeby na górze była nazwa produktu, poniżej zdjęcie a pod zdjęciem krótki opis, cena i koszyk (wszystko w tym okienku) Każdy produkt miałby być w takim okienku. Korzystam z wtyczki productsInRow gdzie są 2 kolumny i 3 rzędy. Nie mam pojęcia jak sobie z tym poradzić.
Musisz poeksperymentować stylami CSS, na pewno jako tło obrazkowe do elementu #productsInRow li{} będziesz musiał ustawić ścieżkę do tego właśnie pliku z obrazkiem.
dalej jednak nie wiem, jak zmienić odległości pomiędzy okienkami.
powstały dodatkowo 2 problemy:
rozmiary okienek nie wszędzie są takie same. jedne krótsze, drugie dłuższe. Czy można zrobić, żeby te okienka miały jednakową wielkość, bez względu na to co znajduje się w środku?
i 2 problem... a mianowicie linie pod/nad okienkami, jak je usunąć? (są widoczne w rogach po prawej stronie okienek)
Myślę, że powinieneś zainteresować się jakimś dobrym tutorialem odnośnie stylów CSS i ich tworzenia, ponieważ ciężko będzie Ci każde rozwiązanie łopatologicznie tłumaczyć. Są to podstawowe zagadnienia związane ze stylami CSS, tak więc zachęcam do lektury, a manuali w sieci na ten temat jest bardzo dużo.
jak zrobić, żeby cena i koszyk były na stale w jednym miejscu w tych okienkach(prawy dolny róg), niezależnie od pozostałych elementów? W tym momencie są w różnych miejscach i nie wygląda to estetycznie.
W pages_default.tpl Zarówno cena <div class="price">, jak i guzik koszyka <div class="basket"> są podrzędnymi #products li Dlatego w css pokombinuj dla tych elementów #products li .price #products li .basket ustawienia position:absolute;top:Xpx;left:Ypx; (X - odległość od górnej krawędzi elementu nadrzędnego w pixelach, Y od lewej krawędzi). Ale wyrzuć (wyzeruj) marginy dla tych elementów, bo one mogą kolidować z krótkim opisem (przynajmniej górne marginy).
dzięki, spróbowałem tak jak poradziłeś. Ale dosyć ciekawa sytuacja się zrobiła.
Otóż, przy próbie użycia funkcji "position" w jakiejkolwiek formie. Wszystkie elementy z poszczególnych produktów się nakładają na siebie. Czyli jak mam 4 produkty to cena owszem, zmienia położenie, ale ze wszystkich produktów jest przenoszona w jedno miejsce-------> http://yfrog.com/n0positionj
tylko "position:relative" sprawia, że można przesunąć całość tak jak bym chciał. Jednak dalej pozostaje kwestia, ze nie są te elementy w jednej linii. A pozycja elementów zależy od długości opisu krótkiego.
Uuups, aby podrzędny element działał prawidłowo przy pozycjonowaniu (absolute) to nadrzędny element powinien mieć position:relative (tak wyczytałem przed chwilą). Wtedy możesz dać podrzędnemu absolute i postawić mu bottom:0 (albo odpowiednią odległość od "podłogi" elementu nadrzędnego).
Cytat ze strony: "Wybranemu obiektowi nadaje się position:relative (nazywa się go wtedy kontenerem). Jeśli nie poda się top, ani left, to to nie zmienia jego wyglądu w ogóle, natomiast czyni go elementem zawierającym. Dzięki temu elementy w nim zawarte, które mają position:absolute będą pozycjonowane względem jego krawędzi, a nie krawędzi <body> czy innego, nadrzędnego elementu zawierającego. " źródło: http://kurs.browsehappy.pl/CSS/Position
I chyba trzeba będzie jeszcze dłubać w plugins.css, bo tam są ustawienia dla productInRow
ok, poradziłem sobie.... może komuś się przyda rozwiązanie.
w pliku plugins.css należy w sekcji ProductsInRow przypisać position:relative bez żadnych parametrów do tła produktów ( w tym przypadku było to okienka) a w pliku default.css przypisać position:absolute z odpowiednimi parametrami do #products li .price{}
