F.A.Q. - style i grafika - MENU Nawigacja <div>
Phantom - 22-11-2008, 13:55
Temat postu: MENU Nawigacja <div>
Witam,
Chciałbym się dowiedzieć jak zrobić nawigację obrazkową za pomocą funkcji <div="">,
której nigdy w życiu nie stosowałem ![;]](images/smiles/icon_square.gif ";]")
Wyjaśnię dokładnie o co chodzi...
Powiedzmy, że mamy obrazek nr1 a gdy najedziemy na niego pokaże nam się obrazek nr2
Chciałbym wiedzieć co trzeba wpisać do pliku css i jak to wszystko użyć/zakodować w pliku overall_header.tpl
Próbowałem coś tam zrobić ale nie wychodzi..
w pliku css wpisałem
| Kod: | #faq1 {
background: url("templates/subSliver/images/nav/faq.png") no-repeat;
}
#faq1:hover {
background: url("templates/subSliver/images/nav/faq2.png") no-repeat;
} |
a w overall_header.tpl:
| Kod: | <table width="100%" height="37" cellpadding="0" cellspacing="0" border="0" style="background-image: url('templates/subSliver/images/tlo_nawigacji.png'); background-position: center; background-repeat: repeat-x">
<tr><td>
<a href="{U_FAQ}" id="faq1"></a><td></tr> |
i żaden obrazek się nie pokazał 
Mógłby mi ktoś wyjaśnić jak to zrobić ?
Tavaro - 22-11-2008, 16:04
| Cytat: | | w pliku css wpisałem |
Po co się męczyć z deklaracją zewnętrzną dla dwóch linijek?
| Kod: | | < ... style="background-image: url(adres_obrazka_przed_najechaniem); background-repeat: no-repeat; (reszta stylu)" onmouseover="this.style.background='url(adres_obrazka_po_najechaniu)';" onmouseout="this.style.background='url(adres_obrazka_po_zdjęciu_kursora_z_elementu)';" onclick="location.href='docelowy_url_dla_linka';" ... > |
Div to nie funkcja, to tag. 
Przykład:
| Cytat: | | <div style="background-image: url(images/nohover.gif); background-repeat: no-repeat;" onmouseover="this.style.background='url(images/hover.gif)';" onmouseout="this.style.background='url(images/nohover.gif)';" onclick="location.href='faq.php';"> |
Ściągawkę masz też na moim www
Phantom - 22-11-2008, 16:11
Zdaje mi się, że przy użyciu takiej metody jaką podałeś obrazki zmieniają się z dużym opóźnieniem, chociaż jej nie stosowałem ... jest bardzo podobna do tej, która mam aktualnie w nawigacji:
| Kod: | | <img src="templates/subSilver/images/nav/home.png" onmouseover="src='templates/subSilver/images/nav/home2.png'" onmouseout="src='templates/subSilver/images/nav/home.png'" border="0" width="58" height="37" style="vertical-align: bottom;"> |
Więc chciałbym się także dowiedzieć czy te obrazki rzeczywiście ładują się z opóźnieniem przy kodzie jakiego używam, być może z twoim sposobem będzie inaczej, sprawdzimy 
aha, o co chodzi z tym ;P
Tavaro - 22-11-2008, 16:13
| Phantom napisał/a: | | Więc chciałbym się także dowiedzieć czy te obrazki rzeczywiście ładują się z opóźnieniem przy kodzie jakiego używam |
Tak, to wynika z faktu, że nie są wczytywane podczas ładowania strony, a dopiero po najechaniu. Możesz je wczytywać javascriptem, a możesz i tak:
| Kod: | | <img src="images/hover.gif" width="0" height="0" style="width: 0px; height:0px;" alt=""> |
W sumie jest jeszcze parę sposobów, np. visibility: hidden.
Phantom - 22-11-2008, 16:22
Tavaro, umieściłem jeden obrazek z twoim sposobem jaki mi podałeś, i jest mały problem 
Obrazek jest wyświetlany po całej ciągłości nawigacji, po prostu się powtarza
próbowałem zrobić tak
| Kod: | | onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" |
zamieniałem na:
| Kod: | | onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)'; background-repeat: no-repeat;" |
ale wtedy obrazek się nie wyświetla
Jakaś rada ?
Tavaro - 22-11-2008, 16:35
Spróbuj tak:
| Kod: | <!-- wczytanie obrazków dla hover -->
<img src="templates/subSilver/images/nav/home2.png" width="0" height="0" style="width: 0px; height:0px;" alt="">
<!-- div najeżdżalny -->
<div style="background-image: url(templates/subSilver/images/nav/home.png)" background-repeat: no-repeat; width: 50px; height: 37px;" onmouseover="this.style.background='url(templates/subSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='http://blablabla.pl';"></div> |
No i wypozycjonuj div-a za pomocą
W praktyce: klik -> źródło.
Phantom - 22-11-2008, 16:42
Właśnie chodzi o to, że brakuje tam kodu, który uniemożliwi obrazkowi powtarzanie się po całej tabeli
Nie mam pojęcia jaki to jest kod (te co próbowałem nie działają) i gdzie go umieścić
Tavaro - 22-11-2008, 16:47
Może inaczej: pokaż mi ten kod. 
Phantom - 22-11-2008, 16:52
Ok, z tym już sobie poradziłem dodałem | Kod: | | position: relative; width: 58px; height: 37px; |
i pomogło
Tavaro - 22-11-2008, 17:11
| Cytat: | <img src="templates/subSilver/images/nav/home2.png" width="0" height="0" style="width: 0px; height:0px;" alt="">
<img [img2] >
<img [img3] >
...i tak dalej
<table width="100%" height="37" cellpadding="0" cellspacing="0" border="0" style="background-image: url(templates/subSilver/images/tlo_nawigacji.png); background-position: center; background-repeat: repeat-x">
<tr>
<td width="100%" height="29" align="left" valign="center" style="background-image: url('templates/subSilver/images/p_c.png');">
<div style="margin: 0; background-image: url(templates/subSilver/images/nav/home.png)" background-repeat: no-repeat; width: 50px; height: 37px; position: ... ;" onmouseover="this.style.background='url(templates/subSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='http://faq.php';"></div>
<div dla img2... ></div>
<div dla img3... ></div>
...i tak dalej.
</td>
</tr>
</table> |
"Ogranicznikiem" są rozmiary div-a (kolor czerwony), jedyne, co trzeba ustawić (metodą prób i błędów - najlepiej najpierw zakodować wszystkie div-y w html-u, a dopiero potem ustawiać przez position: relative), to położenie tych div-ów (kolor niebieski). Oczywiście rozmiary div-a muszą równać się rozmiarowi obrazków.
Chociaż, będąc na Twoim miejscu, nie babrałbym się w tym przypadku z tabelami i zrobił to wszystko na div-ach.
Edit:
| Cytat: | | Ok, z tym już sobie poradziłem dodałem |
No przecież podawałem wcześniej w kodzie...
Phantom - 22-11-2008, 17:17
Teraz jest inny problem bo obrazki nie są w lini tylko pod sobą się układają
Jak zrobić, żeby były w jednej lini ?
| Kod: | <table width="100%" height="37" cellpadding="0" cellspacing="0" border="0" style="background-image: url('templates/subSilver/images/tlo_nawigacji.png'); background-position: center; background-repeat: repeat-x">
<tr>
<td width="100%" height="29" align="left" valign="center" background="templates/subSilver/images/p_c.png">
<div style="position: relative; width: 58px; height: 37px; background-image: url(templates/subSilver/images/nav/home.png); background-repeat: no-repeat;" onmouseover="this.style.background='url(templatessubSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='faq.php';"> </div>
<img src="templates/subSilver/images/nav/sep.png" border="0" height="37" style="vertical-align: bottom;">
<div style="position: relative; width: 58px; height: 37px; background-image: url(templates/subSilver/images/nav/home.png); background-repeat: no-repeat;" onmouseover="this.style.background='url(templates/subSilver/images/nav/home2.png)';" onmouseout="this.style.background='url(templates/subSilver/images/nav/home.png)';" onclick="location.href='faq.php';"> </div>
</td>
</tr>
</table> |
Tavaro - 22-11-2008, 17:35
| Cytat: | | Jak zrobić, żeby były w jednej lini ? |
Zamiast separatora w postaci obrazka (<img>) użyj div-a z tłem sep.png (pamiętaj o wymiarach), następnie wszystkim div-om wewnątrz <tr> (dotyczy także tych z tłem sep.png) dodaj do stylu
| Kod: | | display: table-cell; |
albo
Phantom - 22-11-2008, 17:46
Tavaro, szacunek dla Ciebie za twoją pomoc
Wszystko śmiga, lata jak należy
Pozdrawiam
Edit:
Ostatnie pytanie
Gdy dodam kod
| Kod: | | display: table-cell; |
wszystko jest pięknie ładnie pod przeglądarką mozilla i opera.
Pod przeglądarką IE wszystko się rozjeżdża
lecz gdy zamienie
| Kod: | | display: table-cell; |
na
pod przeglądrką IE jest wszystko ok ale inne przeglądarki nie wyświetlają obrazków
Jakaś rada na rozwiązanie tego typu problemu ?
nike_00 - 24-11-2008, 23:27
| Tavaro napisał/a: | | Jakaś rada na rozwiązanie tego typu problemu ? |
Oczywiście 
| Kod: | <!--[if IE]>
<link href="ie_fix.css" rel="stylesheet" type="text/css" />
<![endif]--> |
Gdzie:
ie_fix.css jest to ścieżka do pliku .css w którym dodasz te swoje display: inline; oczywiście z całym tagiem
Radek - 26-11-2008, 15:12
Phantom,
http://www.grabun.com/tek...y/css-rollover/
Poczytaj o Rollover w CSS i nie będzie trzeba korzystać z onmouseover i onmouseout, podświetlony i normalny przycisk jest w jednym obrazku, nie ma opóźnień między podświetlaniem.
|
|
|
