Witam :P dzisiaj to juz druga rzecz z ktora mam spory problem coz ciezkie jest zycie poczatkujacego ;P
Zrobilem buttony na stronie cooltext.com caly cykl wyglada tak wybor czcionki>caly wyglad buttonu/cienie etc./pobieranie buttonu (2 obrazki 1 jak myszka nie jest na buttonie a drugi jak jest) wkladam je do tego samego folderu w ktorym jest cala strona i biore linka np taki
fixx napisał(a)
czy moglby mi ktos powiedziec jak usunac obramowanie
<img src="cooltext435166440.png" onmouseover="this.src='cooltext435166440MouseOver.png';" onmouseout="this.src='cooltext435166440.png';" border="0" />
niestety juz to probowalem guzik znika po dodaniu tego w kod zaraz wrzuce screen shota jak to wyglada
edit.
tak to wyglada swiezo po odswiezeniu strony
http://img14.imageshack.us/i/menuproblemm.jpg/
a tak po najechaniu myszka na spora czesc tego fioletowego prostokata na pierwszym obrazku
http://img196.imageshack.us/i/menuproblem.jpg/
mi sie guzik wcale nie wyswietla (w twoj text wstawilem tylko moje zdjecia)
http://img32.imageshack.us/gal.php?g=eventsmouseout.png
moglbys zrobic tak zeby to dzialalo z tych 2 ? bo jak probuje tego kodu co wczesniej podales(wpisujac poprawne nazwy zdjecia przed i zdjecia po) sie nie wyswietla ... ;/
Ja mam to na CSS zrobione i śmiga jak należy. Przyjrzyj się i popraw swój kod:
Kod menu w index:
<div id="header">
<div class="content">
<h1><a href="/">KamilNamysla.pl</a></h1>
<ul>
<li><a href="css/webdesign.html">WEBDESIGN</a></li>
<li><a href="css/fotomontaze.html">FOTOMONTAŻE</a></li>
<li><a href="css/inne.html">INNE</a></li>
<li><a href="css/kontakt.html">KONTAKT</a></li>
</ul>
</div>
</div>
Klasy w CSS:
#header {
position: relative;
height: 102px;
border-bottom: 1px solid #fff;
background: url(../images/headertlo_01.jpg);
width: 100%;
}
#header h1 {
position: relative;
top: 6px;
left: -7%;
overflow: hidden;
}
#header h1 a {
display: block;
width: 244px;
height: 82px;
background: url(../images/logo.png) no-repeat;
text-indent: -666em;
}
#header ul { overflow: hidden; position: absolute; right:20%; bottom: -5px; list-style: none;}
#header ul li { float: left;}
#header ul li a { display: block; padding: 10px 12px 40px; color: #787878; font: 17px tahoma, verdana, arial, sans-serif; text-decoration: none;}
#header ul li a:hover { background: url(../images/light.png) bottom repeat-x; padding: 7px;}
@Robster:
BTW., jeśli Cię to interesuje, to czytniki ekranu mogą mieć pewien problem z tekstem linków pisanym wielkimi literami. Takie ciągi znaków są przeważnie rozumiane jako skróty i odczytywane litera po literze ("INNE" byłoby przeczytane nie jako "inne", ale "i-en-en-e"). Rozwiązaniem jest napisanie tekstu linków przy użyciu liter normalnej wielkości i użycie na nich text-transform: uppercase (deklarację tą można dołączyć do #header ul lub #header ul li).
To jednak bardziej (drobna) kwestia ideowa: że niby użycie kapitalików to w tym wypadku rzecz związana z prezentacją, a więc powinna być realizowana w arkuszach stylów.
juz sobie poradzielem :P wielkie dzieki za pomoc
bswierczynski napisał(a)
@Robster:
BTW., jeśli Cię to interesuje, to czytniki ekranu mogą mieć pewien problem z tekstem linków pisanym wielkimi literami. Takie ciągi znaków są przeważnie rozumiane jako skróty i odczytywane litera po literze ("INNE" byłoby przeczytane nie jako "inne", ale "i-en-en-e"). Rozwiązaniem jest napisanie tekstu linków przy użyciu liter normalnej wielkości i użycie na nich text-transform: uppercase (deklarację tą można dołączyć do #header ul lub #header ul li).To jednak bardziej (drobna) kwestia ideowa: że niby użycie kapitalików to w tym wypadku rzecz związana z prezentacją, a więc powinna być realizowana w arkuszach stylów.
Wielkie dzięki za informację, nie wiedziałem że tak to jest interpretowane ^^