Dwa loga w jednym miejscu

wersja skryptu MyBB: 1.6.9
adres forum: insidery.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Chciałem zrobić sobie animowane logo, które by się zmieniało po najechaniu myszką, ale jest problem. Sama animacja działa (napisana w jQuery, dodane do headerinclude) ale logo zamiast znajdować się w class="logo" to jakoś wchodzi na pasek z logowaniem i kolorowe guziki, które są u mnie na górze lub te w/w rzeczy przesuwają się na do góry na logo.
Kod header i logo wygląda tak:

<div class="logo">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
<span style="float: right; margin-top: 0;"><img src="http://insidery.cba.pl/images/prawybanner.gif"</img></span>
</div>

a ja potrzebuję do tego dodać

<div class="costam"

i wyglądało by to mniej więcej tak:

<div class="logo">
<div class="costam"
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" class "a" /></a>
<a href="..drugie logo..." class "b" /></a>
</div>
<span style="float: right; margin-top: 0;"><img src="http://insidery.cba.pl/images/prawybanner.gif"</img></span>
</div>

W CSS dodane:

div.costam {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
        }
    
img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

I dwa podstawowe pytania:

• Co jest źle w kodzie, że wszystko się rozjeżdża w sposób opisany wyżej?
  
• Co jest w class="logo"? Nie mam tego w CSS. Może to związane jest z tym "logo"?
  

może dlatego, że nie ma klamry zamykającej tag

<div class="costam"

i niektóre rzeczy są źle pododawane.

<div class="logo">
<div class="costam">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" class="a" /></a>
<a href="link odnośnika"><img src="ścieżka do drugiego loga.png" class="b" /></a>
</div>
<span style="float: right; margin-top: 0;"><img src="http://insidery.cba.pl/images/prawybanner.gif"</img></span>
</div>

@edit
Jeśli nie masz klasy logo, to ona po prostu jest pusta Możesz ją sobie zdefiniować i dodać własne atrybuty.

Nie, nie o klamrę chodzi. Pisałem to akurat ręcznie i nie zamknąłem klamry.

Wg mnie coś jest z tym class="logo". Za co to dokładnie odpowiada? Za położenie loga w danym miejscu? Za jego wielkość?
Mnie to wygląda tak, że jakby ten div costam nie chciał "wejść" wewnątrz tego "logo"

Może położenie w CSS?
Ale też kombinowałem i nic mi nie wychodzi. Cały header od logo w dół (w kodzie) przesuwa się na górę forum. Jakby nie widział tego class logo.

---

EDIT: No rozumiem z tą klasą logo. Ale skoro div costam jest w obrębie klasy logo to dlaczego wszystko jest przesunięte w dół albo jak pisałem niższy fragment headera idzie do góry?

Problemem, z tego co widzę, jest szerokość monitora. U mnie na FullHD wygląda elegancko.

http://img69.imageshack.us/img69/7435/zr...225200.png

Pokaż, jak to wygląda u Ciebie.

U mnie wygląda tak samo, bo też mam FullHD.
Teraz nie robię testów, to co piszę jest wyłączone, po prostu rano robiłem testy i teraz pytam co jest nie tak. Na razie wróciłem do poprzedniego stanu.
Co do błędu to jak pisałem logo zachodzi aż na niższy panel. Pokaże zaraz Ci to na screenie.

---

EDIT
Tak wygląda screen po wprowadzeniu modyfikacji

---

Czyli jak widać, albo logo idzie w dół, albo cała reszta do góry. I diabeł wie gdzie jest teraz klasa logo

Hmmm... Mógłbyś dać konto testowe z dostępem do stylu po takiej przeróbce? Pokminiłbym trochę w Firebugu i może doszedł, co jest z nim nie tak.

Wiesz, szczerze mówiąc kombinowałem już na wszelkie sposoby i sprawdzałem też na Firebugu i nie mogę dojść o co chodzi, czemu to tak się przesuwa.
Styl jest oryginalny (domyślny) tylko nieco ubarwiony przeze mnie.
Jak dla mnie klasa costam (o której wspominałem wcześniej) jakby nadpisuje klasę logo
Takie moje zdanie.
Nie chce mi się już nic z powrotem gmerać w tym i zmieniać. Jak masz jakieś forum testowe to sprawdź sobie.
Ja zapytałem po prostu dlaczego tak się dzieje, myślałem że to prostsza rzecz.

Do tego jest jeszcze Javascript

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>

---

Przeanalizuj to na spokojnie, jak dojdziesz do jakichś wniosków to napisz.

---

Chciałem zrobić po prostu animację loga, jak najedziesz na nie myszką to zmienia się na inny obrazek.
No ale niestety się nie da, bo wszystko jedzie w dół.