+- 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: styl lokalny w css (/thread-styl-lokalny-w-css)
Strony:
1
2
styl lokalny w css - Tiburon - 17-10-2009
Witam w jaki sposób, mogę zapisac a:link i a:hover w arkuszu wewnetrznym przypasowany do innych linków gdzie uzywam również <img src>
obecnie mam to zrobione tak:
<a href="index.html"><img src="p.powrot.jpg" style="margin-left:23px;" alt="powrót" border="0" onmouseover="this.src = 'p.powrot1.jpg'" onmouseout="this.src = 'p.powrot.jpg'" /></a>
chodzi mi o efekt, aby po najechaniu na przycisk zmieniał on kształt, chce tak zrobic wszystkie przyciski na stronie
RE: styl lokalny w css - Labsta.com - 17-10-2009
Użyj sposobu, który opisałem tu: http://websta.pl/szybkie-triki/szybkitrik-obrazek-z-efektem-hover-rollover-w-css
Jego zaletą jest to że google zaindeksuje Ci anchory i efekty będą widoczne też bez js.
RE: styl lokalny w css - Tiburon - 17-10-2009
własnie dzieki tej stronie tworze takie przyciski, z tym że aby utworzyc kilka przycisków musze tworzyc, tyle class ile rodzai przycisków?
I mój przycisk nie zmienia wielkosci, tylko zmienia wyglad, poprzez zmiane jakby całego obrazka, czy to bedzie jakos komplikowac działanie tego?
I jeszcze jedno pytanie, gdy muszę robic osobne "klasy" to moge je zrobic w innym arkuszu.css i jak wtedy zapisac w kodzie html ten drugi arkusz, bo jeden juz mam na divy, a teraz bym musial zrobic dla tych klas, dla przejrzystosci.
Zapisanie drugiego arkuszu odbywa sie podobnie jak tego głownego?
W span wpisuje adres strony? niestety nie do konca rozumiem tej komenty.
Przepraszam jeżeli to co napisałem jest chaotyczne, ale nie umie inaczej tego przedstawic
RE: styl lokalny w css - Labsta.com - 17-10-2009
Niezbyt rozumiem drugie pytanie.
Jeśli chodzi o pierwsze to:
Umieszczanie obrazków w css, a nie w html ma zaletę taką samą jak rozdzielenie wyglądu od treści. Gdy zmieniasz wygląd nic nie grzebiesz w html tylko w samym css.
Opisany tam sposób możesz sprytnie wykorzystać do wielu przycisków na jednej stronie. Załóżmy, że mają one zawsze ten sam rozmiar, ale inne grafiki. Możesz zrobić tak:
Kod:
<a class="link" id="websta" href="#"><span>Websta.pl</span></a>
<a class="link" id="wtalk" href="#"><span>Webmastertalk.pl</span></a>
<a class="link" id="google" href="#"><span>Google.pl</span></a>a w css
Kod:
a.link
{
display:block;
height:40px;
overflow:hidden;
width:100px;
}
a.link:hover
{
background-position: 0px -40px;
}
a.link span
{
display:block;
text-indent: -9999px;
}
#websta{
background: url(websta.jpg) no-repeat;
}
#wtalk{
background: url(wtalk.jpg) no-repeat;
}
#google{
background: url(google.jpg) no-repeat;
}Oczywiście mając grafiki przygotowane tak jak w tym moim tutku. Jak widzisz cały trik polega na dodaniu id w html i obrazka w css
RE: styl lokalny w css - Tiburon - 17-10-2009
Co do niezrozumianego pytania, to....
Tworzac przyciski tak jak w Twoim przykładzie (rozwiazanie o niebo lepsze od mojego poprzedniego z kilku powodów, ale najbardziej rzucającym się w oczy był ten że po wejści na dany przycisk i powrocie poprzez cofniecie w przegladarce, przycisk pozostawał w pozycji "najechania myszką". tzn jakby w pozycji hover), musze wprowadzac nowe kody w css i ja chciałbym do tego stworzyc nowy arkusz css, jeden juz mam na divy w stronie, w których mam całe tło pocietej strony i jest to arkusz.css teraz na te klasy stworzyłbym arkusz1.css i jak w takim razie dodac ten arkusz1.css tak samo jak arkusz.css przez taki sam kod tzn .
<link rel="stylesheet" type="text/css" href="arkusz.css" />
<link rel="stylesheet" type="text/css" href="arkusz1.css" />
Czy wogóle to jest zbyteczne i wszystko robic w jednym arkuszu? Ale tak czy inaczej prosze o napisanie czy mając dwa arkusze dodaję je tak jak w przykładzie powyzej?
Aby wyczerpac temat to prosze mi jeszcze napisac co oznacza:
text-indent: -9999px;
i overflow:hidden(niby wiem co to oznacza, ale nie widze nigdy różnicy gdy to jest lub tego niema)
i co to jest ten <span>
RE: styl lokalny w css - Labsta.com - 17-10-2009
Łączenie arkuszy zrób w pliku css
Czyli w pliku arkusz.css, daj:
Kod:
@import "arkusz1.css";Co do końcowego pytania to polecam osobiście ten kurs: http://kurs.browsehappy.pl/ - moim zdaniem jest świetny i nowoczesny.
-text-indent służy do robienia wcięcia w pierwszej linii akapitu, tak jak często jest to zrobione w książkach, wartość ujemna oznacza, że w lewo a nie w prawo.W tym przypadku służy schowaniu tekstu wpisanego w <span> (wysuwa go poza widoczne pole)
-span jest po to żeby można użyć text-indent i ukryć tekst, który jest tam dla google i scrennreaderów
a overflow:hidden tam zostaw, w skrócie służy temu żeby się rodzić nie zapadał
RE: styl lokalny w css - Tiburon - 17-10-2009
Dzieki wielkie za pomoc, szkoda że nie ma tutaj pochwał, ale za to leci słowna, naprawdę dziekuje
RE: styl lokalny w css - Labsta.com - 17-10-2009
Nie ma sprawy.
Techniczne rzecz biorać pochwały i nagany są (Reputacja: Poziom ostrzeżeń: )
RE: styl lokalny w css - Tiburon - 17-10-2009
Niestety pojawił sie problem, mianowicie przy tworzenia samych class wszystko jest ok, ale gdy dodajemy id i potem w kodzie css #.... to przycisk nie zmienia sie po najechaniu
RE: styl lokalny w css - Labsta.com - 17-10-2009
Wrzuć to na jakiś serwer i daj link. Zobaczę o czemu.