+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Menu a styl css. Prośba o pomoc. (/thread-menu-a-styl-css-pro%C5%9Bba-o-pomoc)
Menu a styl css. Prośba o pomoc. - Mikko - 23-08-2010
Witam.
Mam pewien problem. Mianowicie stworzyłem stronę w oparciu o grafikę w photoshopie, pociąłem ją, wyeksportowałem ją do html'a i... chciałbym żeby menu, które znajduje się po lewej stronie było "animowane". Piszę w cudzysłowiu, ponieważ chodzi tu tak naprawdę o podmianę grafiki po najechaniu na stronę. (Takie rozwiązanie było w poprzedniej wersji tej strony, tylko, że była ona zrobiona na podstawie szablonu - gotowca)
Adres strony, o którą chodzi: www.swietlicacr.glt.pl
Serdeczne dzięki za ewentualną pomoc.
Zamieszczę również kod źródłowy:
<html>
<head>
<meta http-equiv="Content-Language" content="pl">
<!-- #BeginEditable "doctitle" -->
<title>projekt4</title>
<!-- #EndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/2%20kopia.jpg">
<!-- ImageReady Slices (projekt4.psd) -->
<table id="Tabela_01" align=center width="996" height="1654" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" dir="ltr" background="images/index_01.jpg" width="996" height="403" alt=""></td>
<td width="4" background="images/index_02.jpg" width="1" height="403" alt=""></td>
</tr>
<tr>
<td width="361"background="images/index_03.jpg" width="361" height="110" alt="" valign="top">
<p align="left"> <script type="text/javascript" src="http://www.darmowe-liczniki.pl/usluga.licznik.19069"></script><p align="left"> </td>
<td colspan="3"background="images/index_04.jpg" width="637" height="110" alt="">
<p align="center"><font face="Monotype Corsiva" size="5">STRONA
INTERNETOWA<br>
Świetlicy u Zmartwychwstańców<br>
przy parafii pw. Zmartwychwstania Pańskiego w Poznaniu</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_05.jpg" width="362" height="71" alt="" >
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Aktualności</font></td>
<td colspan="2" rowspan="14"background="images/index_06.jpg" width="633" height="1025" alt="" valign="top">
<p></p>
<p> </p>
<p align="center"><font size="7" face="Algerian" color="#FF0000">STRONA
W TRAKCIE BUDOWY</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_07.jpg" width="362" height="72" alt="">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">O Świetlicy</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_08.jpg" width="362" height="72" alt="">
<font face="Sandwich" style="font-size: 32pt" color="#FFFFFF">Patronka Świetlicy</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_09.jpg" width="362" height="71" alt="">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Prace Plastyczne</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_10.jpg" width="362" height="72" alt="">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Kronika</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_11.jpg" width="362" height="72" alt="">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Galeria </font></td>
</tr>
<tr>
<td colspan="2"background="images/index_12.jpg" width="362" height="71" alt="">
<p dir="ltr">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Sponsorzy</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_13.jpg" width="362" height="72" alt="">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Wakacje</font></td>
</tr>
<tr>
<td colspan="2"background="images/index_14.jpg" width="362" height="72" alt="">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Scholka </font></td>
</tr>
<tr>
<td colspan="2"background="images/index_15.jpg" width="362" height="71" alt="">
<span lang="en-us">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Współpraca</font></span></td>
</tr>
<tr>
<td colspan="2" background="images/index_16.jpg" width="362" height="72" alt="">
<span lang="en-us">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Linki</font></span></td>
</tr>
<tr>
<td colspan="2"
background="images/index_17.jpg" width="362" height="72" alt="">
<span lang="en-us">
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF">Kontakt</font></span></td>
</tr>
<tr>
<td colspan="2"background="images/index_18.jpg" width="362" height="26" alt=""> </td>
</tr>
<tr>
<td colspan="2"background="images/index_19.jpg" width="362" height="139" alt=""> </td>
</tr>
<tr>
<td colspan="4"background="images/index_20.jpg" width="996" height="115" alt="">
<font face="Brush Script Std">
<br>
<font size="5">Powered by Mike</font></font></td>
</tr>
<tr>
<td width="361"background="images/spacer.gif" width="361" height="1" alt=""></td>
<td width="1"background="images/spacer.gif" width="1" height="1" alt=""></td>
<td width="632"background="images/spacer.gif" width="637" height="1" alt=""></td>
<td width="4"background="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
RE: Menu a styl css. Prośba o pomoc. - Lobek - 23-08-2010
Jeżeli dobrze rozumiem to chodzi Ci o to aby po najechaniu napis "Aktualności" miał np: inny kolor?
Jeżeli tak to musisz zastosować a:hover i podać parametry.
Natomiast jeżeli chodzi Ci aby grafika się przesuwała po najechaniu to w css musisz zedytować pod siebie taki kod
a.nazwa_class {width: !! px; height: ?? px; background:url("adres do grafiki która składa się z wyglądu przed i po najechaniu na nią");}
a:hover.nazwa_class {background-position: 0 -??px}
i w kodzie przypisać nazwa_class do odnośnika
RE: Menu a styl css. Prośba o pomoc. - Pedro84 - 23-08-2010
To coś nie ma prawa działać prawidłowo. Śmieciowy kod rodem z 99 roku, w dodatku z fatalnymi bykami.
RE: Menu a styl css. Prośba o pomoc. - Mikko - 23-08-2010
Lobek a jak konkretniej to zrobić? Chodzi o coś na kształt koloru - wtedy będzie to podmiana po porstu na inny plik graficzny o zmienionym odcieniu tej barwy.
Pedro serdeczne dzięki ale czymś takim nie pomagasz
RE: Menu a styl css. Prośba o pomoc. - Lobek - 23-08-2010
W zasadzie Pedro84 ma rację.
Przy takim kodzie nie zdziałasz wiele.
Napisałem to bardziej po to abyś w przyszłości mógł to zrobić - naucz się DIV-ów oraz CSS-a, a wtedy będzie większy sens zastosowania tego.
"Chodzi o coś na kształt koloru - wtedy będzie to podmiana po po prostu na inny plik graficzny o zmienionym odcieniu tej barwy"
No właśnie nie. Jeżeli chcesz zmienić tylko kolor to wystarczy Ci a:hover, natomiast jeżeli chcesz podmieniając grafikę po najechaniu to wtedy stosujesz drugi kod
Jednak jeżeli chcesz tego tak bardzo to zajmij się tylko kolorem.
W sekcji head daj:
<style type="text/css">
a {color: kolor odnośników}
a:hover {color: kolor odnośników po najechaniu}
</style>
do danego "linka" w menu po lewo dodaj
<font face="Sandwich" style="font-size: 34pt" color="#FFFFFF"><a href="adres strony">Aktualności</a></font>
Po tym zabiegu wszystkie linki będą zmieniały kolor po najechaniu.
Jeżeli chcesz coś więcej to zainteresuj się klasami i cóż stwórz stronę od poczatku i poprawnie ją napisz
RE: Menu a styl css. Prośba o pomoc. - Kartofelek - 23-08-2010
Nie wiem jak teraz można pisać taki kod. Przecież nawet tutoriale czy książki uczą już od dawna pisania na divach.
<font face="Brush Script Std"> &n....
Nie lubię pisać upierdliwych komentarzy. Ale podany powyżej kod jest najgorszy
RE: Menu a styl css. Prośba o pomoc. - Pedro84 - 24-08-2010
@mikko, wbrew pozorom... pomagam. Bo to co masz to jest zupa tagów, żaden szanujący się koder nawet tego nie poprawi, za żadną kasę, tylko...przepisze na nowo
To jest syf rodem z 90. lat