Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]hover (obrazek +tekst)
daros17
post
Post #1





Grupa: Zarejestrowani
Postów: 233
Pomógł: 27
Dołączył: 27.08.2007

Ostrzeżenie: (0%)
-----


czesc mam pewien problem z menu. Próbuje zrobic aby po najechaniu na odnowsnik pokazywał się kwadrat. tekst wysrodkowany wobec kwadratu

Wysokość kwadratu 156px i taka chce miec na stale, mam w tej chwili taki kod ale tlo jest tylko na tekscie wiec kwadratu z tego nie ma.

Kod
.nawi li {
display:inline;
padding-left:5px;
text-decoration: none;
list-style : none;
color: #3f3f3f;


}
.nawi a:link, a  {
text-decoration:none;
color: #3f3f3f;
}
.nawi a:hover {
height:156px;
width:156px;
background-image: url(box.gif);
}
Go to the top of the page
+Quote Post
prowseed
post
Post #2





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Wybacz, ale nie rozumiem o co Ci chodzi : )
Mozesz wrzucic to gdzies on-line? Nawet na jsfiddle.
Tak na pierwszy rzut oka, to wszystko sprowadzasz do elementow liniowych, a chcesz, zeby sie zachowywaly jak bloki. W li zamiast display:inline daj display:inline-block;, natomiast .nawi li a powinien miec przypisane display:block;. Height i width wyrzuc z hovera i osadz tez w .nawi li a. Zeby sobie tekst wycentrowac w pionie bedziesz musial sie bawic paddingami, tak na pierwszy rzut oka, to:
  1. .nawi a {
  2. display:block;
  3. height:86px;
  4. padding-top:70px;
  5. width:156px;
  6. line-height:16px;
  7. text-align:center;
  8. text-decoration:none;
  9. color: #3f3f3f;
  10. }
  11. .nawi a:hover {
  12. background-image: url(box.gif);
  13. }


Ten post edytował prowseed 16.04.2012, 18:41:35


--------------------
Go to the top of the page
+Quote Post
daros17
post
Post #3





Grupa: Zarejestrowani
Postów: 233
Pomógł: 27
Dołączył: 27.08.2007

Ostrzeżenie: (0%)
-----


trochę mnie nakierowałeś, już sobie poradziłem dzięki
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 07:05