Forum PHP.pl > [CSS] Prosta rzecz - czy da się zrobić to inaczej?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Prosta rzecz - czy da się zrobić to inaczej?

Przem4S

10.03.2011, 21:34:23

Witam mianowicie usiłuję zrobić button w jednym obrazku, zrobiłem to w ten sposób:

Kod

.strona_glowna {
    height:50px;
    width:130px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    display:block;
    float:left;
}

.strona_glowna:hover {
    height:50px;
    width:130px;
    padding:50px;
    margin-top:-50px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    display:block;
    float:left;
}

Ale czy da się zrobić to w inny sposób?

ShadowD

10.03.2011, 21:37:57

input/type/image wydaje mi się trafniej. Poza tym po co dublujesz atrybuty w hover? Czy na pewno potrzebny Ci display:block?

Przem4S

11.03.2011, 19:01:23

Displayblock wyje

lem. Usunąłem też te zbędne powtarzające się atrybutry. Tylko nie wiem jak to inaczej przełożyć. Puki co mam:

Kod

.strona_glowna {
    height:50px;
    width:130px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    float:left;
}

.strona_glowna:hover {
    padding:50px;
    margin-top:-50px;
}

Refresz

potreb

11.03.2011, 19:11:48

Refresh

Nie wiem co chcesz osiągnąć, po najechaniu zmieniające się tło?

Przem4S

11.03.2011, 19:24:44

Dokładnie tylko jak wykonać to w inny (może lepszy?) sposób?

Obecnie mam coś takiego: klik.

potreb

11.03.2011, 19:27:36

Wg mnie to jest najlepszy sposób, oczywiście masz jeszcze js, co wg mnie rozwiązanie z epoki lodowcowej, ja mam tak, także ten sposób jest jak najbardziej odpowiedni

[CSS] pobierz, plaintext 
.submit_button {
	background: url('../images/button1.png')  0px no-repeat #fff;
	height: 26px;
	width: 91px;
	color: #525252;
}
 
.submit_button:hover {
	background: url('../images/button2.png')  0px no-repeat #fff;
	height: 26px;
	width: 91px;
	color: #4c6989;
}
[CSS] pobierz, plaintext

Przem4S

11.03.2011, 19:31:29

Tylko że chodzi o to żeby uniknąć efektu "przeładowania" obrazka gdy na niego najadę dlatego używam jednego obrazka (przykład: klik). I obecnie każda "pozycja" w menu ma swój obrazek, może da się zrobić to w całości? Po prostu zoptymalizować to.

potreb

11.03.2011, 19:39:43

Twój obrazek menu to około 20 kilobajtów, trochę dużo jak na jeden element, może spróbuj go zoptymilizować w Adobe Fireworks, albo w innym programie

Damonsson

11.03.2011, 23:14:37

Tak to co zrobiłeś jest zajebiste i tak należy to robić, a nie tak jak użytkownik @potreb.
Koniec tematu. Ewentualnie poczytaj sobie lektury o CSS sprites- właśnie tak się nazywa to co zrobiłeś.

cojack

11.03.2011, 23:37:42

To nie jest css sprites.

Damonsson

12.03.2011, 11:18:01

Racja mój błąd, przy css sprites regulujesz background position.

konole

12.03.2011, 11:23:48

CSS Sprites jest najlepszym rozwiązaniem i tego bym się trzymał na Twoim miejscu.

Kod

.strona_glowna {
    height:50px;
    width:130px;
    background:url('images/domyslny/strona_glowna.png') no-repeat;
    float:left;
}

.strona_glowna:hover {
    background-position: -50px 0px;
}

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.