+- 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 na graficzne. (/thread-menu-na-graficzne)
Strony:
1
2
Menu na graficzne. - erfix - 09-09-2012
Siemka
mam obrazek i chcę by jego poszczególne elementy były menu. Czyli jak ktoś najedzie na domek i go kliknie to zęby przenosiło do strony głównej jak na ławkę to czat czy na głośnik to do muzyki. To jest jeden obrazek z wieloma elementami. Musze go pociąć ?; czy jest jakiś sposób zęby ustawić obrazek jako tło a na niego nanieść "punkty" odsyłaczy??
RE: Menu na graficzne. - Kartofelek - 09-09-2012
jest. Niewidzialne linki z pozycją absolutną, a obrazek jako tło elementy nadrzędnego z pozycjonowaniem relatywnym.
RE: Menu na graficzne. - erfix - 10-09-2012
No to gitara. Wiec teraz muszę mieć jakiegoś div'a i w nim jako tło ostawić obrazek, tak ? Jakiejś wartości jeszcze muszę podać poza (position:relative
?Edit
Obrazek mam ale jak zrobić te linki?
RE: Menu na graficzne. - erfix - 10-09-2012
Co nie co z tego kumam ale to jest pliku index.html? tak? Nic do css nie muszę dodawać tylko sobie linki poustawiać ? A jak ustawić wielkość linku bo położenie już widzę.
RE: Menu na graficzne. - erfix - 10-09-2012
Wielkie dzięki. Już zabieram się do pracy
EDIT
Elo. Zrobiłem to tak jak napisał kornell i działa
ale są dwie małe wady.1. Do o koła obrazka pojawiła się ramka na 1px; a border jest na 0.
2. Na środku obrazka pojawiła się ikonka taka jak na stronach że brak obrazka.
RE: Menu na graficzne. - Kartofelek - 10-09-2012
Żadne map tylko odpowiednio stylowana lista
Kod:
<ul style="backround:url(.....) no-repeat; width:....px; height:....px; position:relative; list-style:none; padding:0; margin:0;">
<li style="position:absolute; top:....px; left:....; width:....px; height:....px; overflow:hidden; text-indent:-9999em;">Jestem pierwszą pozycją menu. tego tekstu i tak nie bedzie widac</li>
<li style="position:absolute; top:....px; left:....; width:....px; height:....px; overflow:hidden; text-indent:-9999em;">Jestem fruga pozycją menu. tego tekstu i tak nie bedzie widac</li>
<li style="position:absolute; top:....px; left:....; width:....px; height:....px; overflow:hidden; text-indent:-9999em;">Jestem trzecia pozycją menu. tego tekstu i tak nie bedzie widac</li>
</ul>RE: Menu na graficzne. - erfix - 13-09-2012
Chrome, IE nawet nie mam zainstalowanej. Tego co napisał Kartofelek nie bardzo kminie i nie bardzo to działa;/
tak wygląda mój kod
Kod:
<img src="background:url(images/urban.png) no-repeat center;" width="800" height="600" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:erfix -->
<area shape="rect" coords="282,59,476,315" alt="Strona GĹ‚Ăłwna" href="index.html" />
<area shape="rect" coords="577,117,716,318" alt="Radio" href="radio.html" />
<area shape="rect" coords="327,450,509,565" alt="Galeria" href="galeria.html" />
<area shape="rect" coords="123,455,251,595" alt="Forum" href="forum.pl" />
<area shape="rect" coords="541,489,667,600" alt="Imprezy" href="imprezy.html" />
<area shape="rect" coords="600,330,763,479" alt="NEWSY" href="newsy.html" />
</map>Chyba że gdzieś powinienem mieć jakiś plik jeszcze a o tym nic nie wiem . Ten kod mam w index.html a obrazek w folderze images. Coś jeszcze ?
RE: Menu na graficzne. - erfix - 14-09-2012
Wiec jak powinno być? Bo w jakimś poradniku wyczytałem że własnie tak.
RE: Menu na graficzne. - erfix - 16-09-2012
Wielkie dzięki, działa.