Html i css. divy

Dla specjalistów Webmastering
#1

Witam.

Potrzebuje porady.

Mam takiego div’a:

[fb2_click.png](http://facebook.pl/ ****** /)[/code] z takim stylem:

[code]div.fb{ background-image:url(‘img/fb.png’); width:245px; height:337px; margin:10px; } div.fb:hover{ background-image:url(‘img/fb2.png’); width:245px; height:337px; margin:10px; position:relative; bottom:2px; }

Teraz szczegóły:

Stworzyłem obrazek, nazwałem go fb.png i zrobiłem z niego tło DIV’a. Następnie dodałem 2 obrazek fb2.png , który wyświetla się po najechaniu myszką na fb.png. Następnie stworzyłem przezroczysty obrazek o nazwie fb2_click.png z którego zrobiłem odnośnik obrazkowy. Umieściłem fb2_click.png w warstwie div.fb i najechaniu na nią powinienem normalnie kliknąć w nią, prawda?

Problem leży w tym, że ta warstwa uciekła mi gdzieś w dół strony i nie wiem jak ją nałożyć z powrotem.

Troche to dziwne, bo fb2_click.png nie powinien wychodzić poza warstwę div.fb , ale jednak ucieka.

Próbowałem chyba wszystkich standardowych sposobów(a może i nie?).

Wie ktoś jak to naprawić, lub zna inne rozwiązanie, żeby zrobić to w HTML i CSS?

#2

Zakładając, że chcesz mieć zmieniający się div-link po najechaniu.

.fb{

background: url('img/fb.png') #000;

width:100px;

height:100px;

}

.fb:hover{

background: url('img/fb2.png') #434;

}

A link:

[/code]

#3

Dokładnie o to mi chodziło.

Temat wyczerpany.

Dziękuję.

#4

oj srednie to. zobacz to rozwiazanie:

a.fb{

background: #000 url(img/fb.png) 0 0 no-repeat;

width:100px;

height:100px;

display: block;

}

a.fb:hover{

background: #434 url(img/fb2.png) 0 0 no-repeat;

}

i pozbywamy sie div-a…po co mnozyc nie potrzebnie znaczniki oczywiscie najlepiej by bylo zrobic na jednym obrazku jeden poid drugim naprzyklad i tak mamy:

a.fb{

background: #000 url(img/fb.png) 0 0 no-repeat;

width:100px;

height:100px;

display: block;

}

a.fb:hover{

background: #434 url(img/fb.png) 0 -100px no-repeat;

}

czyli nie ladujesz niepotrzebnie rysunku a jedynie go przesowasz w Y. a png ma wymiary 100x200

#5

Jak wcześniej wspomniałem kod jest wg założenia div-link. Co do twojego kodu, pierwsza część jest lepsza od mojej (wyrzuciłeś div’a), jednak sama idea korzystania z jednego obrazka mija się z celem. Tak czy siak kod jest taki sam, mamy tylko jeden plik więcej na serwerze (rozmiar obu = rozmiar jednego (x2większego)). A przy fakcie, że użytkownik nie najedzie na link i tak go ładujesz.

ps przesuwać :slight_smile:

#6

sorki. jak idea sie mija z celem? masz mnie requestow - a to bardziej obciaza sajt niz jego objetosc. oczywiscie w normalym zastosowaniu robisz jednego sprite z wieloma elementami. to jest podstawa optymalizacji. dalej idac tym tematem. w przypadku 2 plikow hover sie nie laduje do mometu najechania wiec bedzie widac skok zamiast plynnego zmienienia sie obrazkow, spowodowany ladowanien sie obrazka.

sobie prosze poczytaj

http://css-tricks.com/158-css-sprites/

#7

Jak już tak bardzo zależy ci na ograniczeniu ilości zapytań lepiej jest zakodować obrazek w url :slight_smile:

Co do łączenia obrazków, łącząc całą stronę w jedną grafikę zwiększasz wykorzystywane zasoby.

#8

oj widze kolega jednak naprawde na optymalizacji sie nie zna… poczytaj linka ktorego dalem. poszukaj informacji. poucz sie troszke to wtedy podyskutujemy :slight_smile:

#9

Hej.

Dzięki za rade z tymi spritami. Strona też przydatna, ale mam takie pytanie, czy jest jakaś Polska alternatywa jej? Co prawda znam angielski, ale wole jednak w języku polskim takie ‘poradniki’.

#10

http://pl.spritegen.website-performance.org/

to nie poradnik. tylko generator. samemu to tworzysz jeden png i go stylujesz. to co tutaj ci daje to program to sprite “od reki”

czyli zbierasz swoje obrazki pakujesz w zipa (max 500kb) i on ci generuje sprite z css potrzebnym do tego. oczywiscie minimalnie trzeba przerobic go jak zawsze na swoje potrzeby, jednak polozenie obrazkow juz bedziesz mial z automatu :slight_smile:

niestety sprite jest do optymalizacji ale minusem jest mniejsza wygoda wymiany elementow.

ogolnie bawic sie bawic i jeszcze raz bawic… podana strona to jeden z pierwszych wynikow w google :slight_smile:

pewnie na http://www.grzenio.pl (moj blog) niebawem cos o tym napisze.

#11

Właściwie nie o to mi chodziło, tylko ogólnie stronę z trikami css. A co do generatora, nie lubię używać takich narzędzi. Wiem są bardzo pomocne, ale pisząc sam kod wejdzie mi to w pamieć, a na tym mi bardziej zależy niż na czasie.

#12

kurde nic polskiego mi do glowy nie przychodzi.

wsumie to nawet po angielsku…

za duzo tego ogladam na codzien…

ale pamietaj google twoim przyjacielem :slight_smile:

spoko linki:

http://www.tripwiremagazine.com/2009/08 … iques.html

http://www.smashingmagazine.com/

http://net.tutsplus.com/

http://webdesign.tutsplus.com/

http://developer.yahoo.com/performance/rules.html

http://www.catswhocode.com/blog/top-10- … developers

i css

http://www.catswhocode.com/blog/10-usef … evelopment

ale niestety angielski to podstawa…

#13

Wiem, że angielski to podstawa. Normalnie posługuje się angielskim, problemu z tym nie mam, więc linki które podałeś będą mi bardzo przydatne, dziękuje.

Jednak brakuje mi takich Polskich stron :stuck_out_tongue: Może czas pomyśleć nad takim polskim centrum tipsów i tricków :slight_smile: