Zrobiłem 2 obrazeczki jak poniżej
i
W css wpisałem kod, który ma podmieniać obrazki gdy na niego najedziemy:

[CSS] pobierz, plaintext 
.menu1{
background:url(img/menu1.png);width:190px;height:73px}
.menu1:hover{
background:url(img/menu1_h.png);width:190px;height:73px;}
[CSS] pobierz, plaintext 

Problem jest taki, że po najechaniu myszką na "menu1.png" podmienia się on w "menu1_h.png" w ten sposób, że powiększa się on na dole, a właśnie zależy mi aby "wysunął" się w góre...


Po drugie osadzam tekst w obrazku tym co wyżej i cały czas jest on na samej górze tego tła (menu1.png) a chcę by był nieco niżej na co nie pomaga ani padding, ani margin...

Jeżeli osadzasz tekst bezpośrednio w tym divie. To margin nic nie da, padding zwiększy rozmiar diva zostaje ci tylko text-indent .
Możesz użyć background-position albo inaczej ułożyć obrazki.

Generalnie tu masz rozwiązanie gotowe do zabawy

Nie za bardzo wiem o co chodzi z problemem 1. ale chyba kolega już wyjaśnił.

Co do problemu 2. jeśli jest to jednowierszowy tekst to możesz użyć line-height.
Zwiększając padding, zmniejszasz width i height w takim samym stosunku jak zmieniłeś padding.

A tak w ogóle, to zainteresuj się CSS Sprites i zrób to tak jak powinno się robić.

A jak najlepiej to zrobić, jeśli mam kilka takich divów z obrazkami i chcę, żeby jeden był obok drugiego w jednej linii? ul,li?
tło (obraz) z tekstem sa jednoczesnie odnosnikiem

Mysle, ze najlepszy sposob jest taki.

[HTML] pobierz, plaintext 
<ul>
<li><a href="link1.html"></a></li>
<li><a href="link2.html"></a></li>
<li><a href="link3.html"></a></li>
<li><a href="link4.html"></a></li>
<li><a href="link5.html"></a></li>
</ul>
[HTML] pobierz, plaintext 

Potem ustawiasz, zebys nie widzial punktorow, a kazdy li ma byc kolo siebie, czyli float.

[CSS] pobierz, plaintext 
ul {
list-style: none outside;
margin: 0; padding:0;
}
 
ul li {
float: left;
}
 
// no i preparujesz link z tlem. Background position dajesz zawsze na bottom, zeby obrazek nie skakal Ci do gory
ul li a {
display:block;
width: //szerokosc
height: // wysokosc
background: url(blablabla) no-repeat bottom
}
 
ul li a:hover {
background: url(blablabla2) no-repeat bottom
}
[CSS] pobierz, plaintext 

Każdy następny obrazek jest innego rozmiaru także przypisanie im stałych wymiarów nie zda niestety egzaminu

Może zdefiniować odrębną klasę dla każdego 'li'?

tak mi sie tez wydaje

EDIT: nie dla li, lepiej dla a przypisac osobna klase

@Kaloryfer, w takim razie musiałbym również dla każdego a dla tła napisać pozycję tła... Tylko jak żeby był cały obraz?



Jak zrobić, by dało się to wykonać?
Powtórzę, że obrazki mają być jeden obok drugiego w jednej linii (różnią się wymiarami).

Do menu1 i menu2 dałem float:left i działa. A ze strony poprawności, to może być?

A po co? Moim zdaniem wystarczy bottom.


Co masz na mysli piszac "poprawnosc"?

Zrobiłem już divami i do każdego dodałem float:left.

Poprawność - czyli mniej więcej miałem na myśli pisanie ze standardami html i css.

Jesli chodzi o semantyke kodu i jest to np. menu, powinienes zrobic to na listach (UL, LI). W zasadzie latwo Tobie to przerobic, zmieniasz tylko strukture HTML, "podlinkowujesz" istniejacy CSS (divy do a), dodajesz jeszcze display: block, bo normalnie na tagi "<a>" nie dzialaja parametry width, height itp. dopoki nie ustawisz im display:block.