Forum PHP.pl > [CSS/JS] Button rollover z tekstem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS/JS] Button rollover z tekstem

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

swist666

30.12.2008, 22:35:04

Witam chciałbym zrobić button - coś na wzór youtube "Ulubione" ( http://i41.tinypic.com/nwzvis.jpg ), jednak napotkałem parę problemów:

1) Pewnie wyda wam się banalny ale ja nie mogę znaleść rozwiązania jak poprawnie uzyskać podkreślenie kropkowane, metoda którą znałem nie działa:

[HTML] pobierz, plaintext 
A.tralala:link, visited{border-bottom:1px solid #000000; text-decoration:none; color:#000000; font-family:Tahoma, Geneva, sans-serif;}
A.tralala:hover{border-bottom:1px solid #000000; text-decoration:none; color:#000000; font-family:Tahoma, Geneva, sans-serif;}
[HTML] pobierz, plaintext

- w Firefoxie i pod IE działa, jednak opera jakoś dziwnie sama dobiera odsępy między kropkami w różynch linkach:
http://i42.tinypic.com/2mzf81h.jpg :/
i nie wiem jak to rozwiązać

2) chciałbym aby ikonki obok były obsługiwane przez rollover jak na youtube a niestety nie wiem jak to zrobić jak stosuje margin-top: 15px; to albo dla samej ikonki (a chcę, żeby działało dla ikonki i dla tekstu), albo jak dam klase do wszystkiego to margin też dotyczy tekstu i się rozjeżdża :/

macie jakieś rady??

ziqzaq

30.12.2008, 23:06:34

Wystarczy chwilę pokombinować, dostosuj sobie:

[PHP] pobierz, plaintext 
<?php
<html>
<head>
<title>Tit</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.link-ulubione, .link-ulubione:active, .link-ulubione:visited {
    padding: 0 0 0 22px;
    text-decoration: none;
    background: url('obrazek.png') no-repeat left center;
}
.link-ulubione span {
    border-bottom: 1px dotted #00f;
}
</style>
</head>
<body>
<a href="#" class="link-ulubione"><span>Tutaj tekst</span></a>
</body>
</html>
?>
[PHP] pobierz, plaintext

Jak chcesz jakieś rollover to poprostu dodaj :hover i baw się obrazkiem i tekstem.
Powodzenia

// Edit:
Gwoli ścisłości hover ze zmianą obrazka (na wszelki wypadek):

[PHP] pobierz, plaintext 
<?php
<style type="text/css">
.link-ulubione:hover {
    background: url('inny_obrazek.png') no-repeat left center;
}
</style>
?>
[PHP] pobierz, plaintext

Możesz oczywiście zmienić trochę położenie obrazka (np. trochę w prawo do góry) zamiast zmieniać go całego - też fajny efekt.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.