Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[CSS]Edycja przycisków

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

[CSS]Edycja przycisków

Post 24.02.2012, 08:39:32

Witam.

Mam napisy w tabelkach zdefiniowane w stylach css i po najechaniu zmieniaja one kolor tla na szary, a czcionka na bialy. Kod wyglada tak:

Kod: Zaznacz cały
.menu1 {padding:0px 0px 0px 0px;}
.menu1 li {float:left; font-size:36px; line-height:1.2em;  border-right:1px solid #d9d9d9;}
.menu1 a {color:#333333; text-decoration:none;  display:block; padding-top:325px; width:220px; height:120px;}
.menu1 a:hover span {color:#fff; background:#333333;}
.menu1 span {display:block; padding:5px 71px 5px 30px;}


Chcialbym dodatkowo dodac pod kazdy napis maly plik graficzny (dla kazdego inny). Jak dodaje
Kod: Zaznacz cały
background-image:
to tlo zmiania sie, ale juz nie ma podswietlenia na szaro tylko caly przycisk jest wypelniony tym plikiem graficznym,a takze w pozostalych przyciskach. Te plik graficzny mial by sie pojawiac nad tym napisem po najecheniu kursorem. Z gory dzieki za odp.
Kuba0101
Posty: 37
Dołączył(a): 29.01.2012

Re: [CSS]Edycja przycisków

Post 24.02.2012, 09:19:21

Musisz stworzyć nowe oddzielne klasy z tłami.
robisz w ten sposób:
Kod: Zaznacz cały
background-image:url('../gfx/arrow.png') no-repeat bottom center;


Tutaj więcej o tłach i opcjach.
Avatar użytkownikaJaason
Tomasz Waszkiewicz

capoeirista
capoeirista

Posty: 3511
Dołączył(a): 14.04.2002
Lokalizacja: Warszawa

Re: [CSS]Edycja przycisków

Post 24.02.2012, 10:43:51

dzięki. Dodalem ten kod, ale obrazek pojawia sie na srodku na napisie, a chcialbym abym byl nad nim po srodku

Wyglada to tak:

http://imageshack.us/photo/my-images/24 ... 01szz.png/


Teraz kod wyglada tak:
Kod: Zaznacz cały
.menu1 {padding:0px 0px 0px 0px;}
.menu1 li {float:left; font-size:36px; line-height:1.2em;  border-right:1px solid #d9d9d9;}
.menu1 a {color:#333333; text-decoration:none;  display:block; padding-top:325px; width:220px; height:93px;}
.menu1 a:hover span {
   color:#fff;
   background-color: #333333;
   background-image: url(../site/images/ci.png);
   background-repeat: no-repeat;
   background-position: center bottom;
}
.menu1 span {display:block; padding:5px 71px 5px 30px;
]
Kuba0101
Posty: 37
Dołączył(a): 29.01.2012

Re: [CSS]Edycja przycisków

Post 24.02.2012, 11:09:40

Dodaj do przycisku górny padding na wysokość obrazka i zmień pozycję tła na center top.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19648
Dołączył(a): 14.04.2002

Re: [CSS]Edycja przycisków

Post 24.02.2012, 11:21:19

Moglbys wyjasnic o co chodzi z tym "górny padding" ? "padding-top" ?

edit:
Ok, ustawilem padding-top przy obrazku z wartoscia:

Kod: Zaznacz cały
.menu1 a:hover span {
   color:#fff;
   background-color: #333333;
   background-image: url(../site/images/ci.png); padding-top: 45px;
   background-repeat: no-repeat;
   background-position: center top;


Obraz faktycznie pojawil sie nad napisem, ale takze jest w czarnym tle:
http://imageshack.us/photo/my-images/37 ... d01hf.png/
ktore takze sie powiekszylo, ja jednak chcialbym, aby byl nad napisem, ale nie w czarnym tle. Tylko napis ma sie podswietlic na czarno.
Kuba0101
Posty: 37
Dołączył(a): 29.01.2012

Re: [CSS]Edycja przycisków

Post 25.02.2012, 16:12:08

Na tej stronie http://www.smelink.se/hemsida-till-foretag.html przy tabelkach oferty po najecheniu na nia "uwypukla sie" ramka. Jak moglbym zastosowac ten sam efekt u siebie?
Kuba0101
Posty: 37
Dołączył(a): 29.01.2012

Re: [CSS]Edycja przycisków

Post 25.02.2012, 16:39:24

Przyjmując, że każda kolumna to osobny DIV z klasą class="kolumna", to zrobiłbym tak

Kod: Zaznacz cały
.kolumna:hover { box-shadow: 0 0 10px #000; }

animowane pojawianie się tego cienia zrobiłbym używając CSS transitions

http://jsfiddle.net/jetvX/1/
http://jsfiddle.net/jetvX/2/ - powyższe + animacja
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19648
Dołączył(a): 14.04.2002

Re: [CSS]Edycja przycisków

Post 25.02.2012, 17:48:26

Dzieki. Wlasnie nie, wydaje mi sie, ze jest zdefiniowane jako jeden div.
Kuba0101
Posty: 37
Dołączył(a): 29.01.2012

Re: [CSS]Edycja przycisków

Post 27.02.2012, 19:11:46

Zrobilem tak jak napisales. Wykasowalem oryginalny kod i stworzylem na nowo tak:

Kod: Zaznacz cały
.kolumna {
    width: 100px;
    border: 1px solid #000;
    background-color: #fff;
    min-height: 300px;
    float: left;
    -webkit-transition: box-shadow 500ms ease;
-moz-transition: box-shadow 500ms ease;
-o-transition: box-shadow 500ms ease;
transition: box-shadow 500ms ease;
}

.kolumna:hover {
    box-shadow: 0 0 10px #000;
    position: relative;
    z-index: 1;
}


I tak 5x do 5 kolumn .koluma, .kolumna2...


Na stronie sa 2 tla.Pierwsze jest glownym tlem (background 1), a drugie (background 2) jest przy samej stopce:

http://img864.imageshack.us/img864/3790 ... ard01w.png

Chcialbym usunac te 2 tlo, ale jak wykasuje linijke z CSS to i tak pod stopka bedzie biale tlo. Co zrobic, aby jego nie bylo? Myslalem, ze zmniejsze rozmiar calej strony, ale nie wiem gdzie szukac.
Kuba0101
Posty: 37
Dołączył(a): 29.01.2012


Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 10 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50713 zarejestrowanych użytkowników.
Najnowszy użytkownik: DallasCa


Nasi użytkownicy napisali:

  • 936122 wiadomości
  • w 246735 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)