PDA

Zobacz pełną wersję : tlo modulu



coliberek1
28-08-2010, 17:15
Hmm, postaram się opisac to jak najmniej zawile.

Zrobilam na stronie zaczepione tlo, i w związku z tym chcialabym , zeby niektóre moduly , mając zaokrąglone kanciki ładnie się komponowały na tym tle.

Pierwszy raz zaszalałam z wlasnymi, kilkoma stylami modułów no i pojawil się problem.
Najpierw wszystko próbowalam zrobic wg WIKI (http://www.wiki.joomla.pl/index.php/Wi%C4%99cej_o_modu%C5%82ach_w_Joomla!) ale jednak nie dziala , ponieważ jak różki zrobię jako PNG to i tak przeswituje pod nimi tlo modułu, więc nie ma efektu.

Teraz więc spróbowalam tak , zeby górna część modulu ( h3 ) miala zaokrąglone rogi, oraz stworzylam dodatkowy styl który ma ustawioną dolną zaokrągloną częśc jako background na pozycji bottom.

Pytanie teraz takie... a tego nie moge nigdzie odkopać. Jak wysterować backgroundem caloego modulu , który powtarzamy po lini Y , tak zeby tlo zaczęło się nieco poniżej a skonczylo nieco powyzej górnej o dolnej granicy modułu, tak zeby nie zaslanialo tych zaokraglen?

Jak np zrobię background: url(../images/style2/mod-bg.jpg) 10px repeat-y; To jest tak jak na obrazku , ale wlasnie nigdzie nei mogę znaleźć jakie ustawienia się nadaje w ten sposób. Podejrzewam ze nie tak jak normalny padding.. Jak juz próbowalam dodac inne parametry to tlo calkowicie ucieka..

2919
A chcialabym zrobic te moduly tak jak nalezy a nie dookola i na chlopski rozum ( np jako custom z tabelką o danym tle ) :hmm:

moje
29-08-2010, 02:09
... powyzej górnej o dolnej granicy ...
Co? :blink:

Chcąc zrobić zaokrąglone roki, trzeba w stylu pozycji modułów wybrać rounded, wtedy masz odpowiedni 4 div'y i dla każdego przypisujesz jeden lik z zaokrąglonym rogiem.

coliberek1
29-08-2010, 13:08
Ojej, jak ja się usmiałam z tego "powyzej górnej o dolnej granicy" i tej minki :lol: A mialo być tak niezawile.

No ale wracając do sedna, to jeszcze raz, na świeży umysł przetestowalam tak jak poradziłeś, ale jednak dalej pojawia sie ten sam problem.

Czyli te rogi, które mają przezroczyste tło, prześwitują - OK , ale po nimi pokazało się tlo całego modułu. Zeby to bylo widoczne, zamiast bialego ustawilam na szary.

2920
a styl dla tego modulu zrobilam tak jak ponizej, no i pytanie takie czy nie da się jakos zrobic tak zeby to szare tlo zaczynalo się 10px niżej niż górna krawędź modulu , a kończyło 10px wyżej niż dolna krawędź modulu?

Wtedy top_S2.png zrobię na całą szerokość 200px i będzie w sobie zawieral topleft i topright .. no i moze będzie po problemie?




.moduleS2 {
position:relative;
margin:0 0 1em;
padding:0;
background: #dadacc url(../images/style2/topright_S2.png) top right no-repeat;
color: #333333;
}

div.moduleS2 div {
background: url(../images/style2/topleft_S2.png) top left no-repeat;
}

div.moduleS2 div div {
background: url(../images/style2/botleft_S2.png) bottom left no-repeat;
height:1%;
}

div.moduleS2 div div div {
background: url(../images/style2/botright_S2.png) bottom right no-repeat;
padding:10px;
}

div.moduleS2 div div div div {
background:none;
}

a_m
29-08-2010, 13:16
musisz to wykombinować inaczej; sposób z wiki nie zadziała dla takich obrazków jak stworzyłaś, on symuluje zaokrąglenia ale tło kontenera modułu musi być jednolite i png powinien mieć odwrócone kolory - tam gdzie masz przeźroczyste: kolor tła kontenera modułu, a tam gdzie masz kolor: albo przeźroczystość albo kolor tła modułu; masz link do tej strony?

coliberek1
29-08-2010, 13:28
No wlasnie, dlatego kombinuję i kombinuję. Nie chcę ustawiac tego miejsca, które powinno byc przezroczyste na kolor zblizony do tla , bo tlo jest obrazem stojącym w miejscu. Stronę dopiero buduję i mialam nie podawac linków na forum więc może najpierw uda się tak cos wykombinowac. :)

Pozdrawiam
Gosia