Pozycjonowanie menu na szablonie.

[Xaoo]

Witam. Chciałbym umieścić swoje menu wewnątrz szablonu. Mam tylko pewny problem. Jeżeli staram się przesunąć tylko menu na dół to przesuwa mi się razem ze tłem. Co jest nie tak?

CSS

Kod:

#main {
    background-image: url(images/tlo.png);
    background-repeat:no-repeat;
    width:780px;
    height:850px;
    margin-left:170px;
    margin-bottom:10px;}


#menu {
    background-image: url(images/menu.png);
    background-repeat:no-repeat;
    margin-left:13px;
    margin-top:0px;
    width:755px;
    height:35px;}

ul#menu li {
    display: inline;}

HTML

Kod:

<div id="main">

<ul id="menu">


            <li><a href="index.html"><img scr="images/menustr.png"></a></li>
            <li><a href="prace.html"><img scr="images/menuprac.png"></a></li>
            <li><a href="download.html"><img scr="images/menudownl.png"></a></li>
            <li><a href="kontakt.html"><img scr="images/menukont.png"></a></li>
            
                    </ul>
                            </div>

[KeeL]

Cześć,
a próbowałeś dodać z-index ?

[Zikerek]

Moze sprecyzuj, z tlem menu Ci sie przesuwa (menu.png?) czy cale tlo strony Ci sie przesuwa? Jezeli chcesz ustawic menu (tekst) w pozycji relatywnej do tla menu to dodajesz do CSS'a

ul#menu li a
{
I TUTAJ SOBIE POZYCJONUJESZ LINKI
}

Jezeli o to Ci chodzilo ; >

@Edit
Albo tak jak kolega pode mna napisal : p

[Dhofca]

Bo przesuwasz pewnie element o id = "menu", a tam masz wrzucone background. Zrób sobie div'a i dopiero w nim umieść listę (ul). W css do tego diva wrzuć to co masz teraz w #menu, a menu przesuwaj tak:

Kod:

#menu ul{
margin: x x x x;
}

[Xaoo]

Można prosić o jakieś jaśniejsze wytłumaczenie bo nie robiłem diva do menu [jesli o to chodzi] więc nie bardzo łapie o co chodzi.

Tutaj dla ułatwienia sprawy pokaże wam jak to wygląda:
Bez przesuwania menu.


Przesuwanie SAMEGO menu o 10px.

[Zikerek]

Kod:

<div id="main">
        <div id="menu">
                    <ul>


            <li><a href="index.html"><img scr="images/menustr.png"></a></li>
            <li><a href="prace.html"><img scr="images/menuprac.png"></a></li>
            <li><a href="download.html"><img scr="images/menudownl.png"></a></li>
            <li><a href="kontakt.html"><img scr="images/menukont.png"></a></li>
            
                    </ul>
          </div>
</div>

I wtedy masz:

Kod:

#main {
    background-image: url(images/tlo.png);
    background-repeat:no-repeat;
    width:780px;
    height:850px;
    margin-left:170px;
    margin-bottom:10px;}


#menu {
    background-image: url(images/menu.png);
    background-repeat:no-repeat;
    display:block-inline;
    width:755px;
    height:35px;}

#menu ul
{
margin-left:13px;
margin-top:0px;
}
#menu ul li {
    display: inline;}

Nie sprawdzalem, powinno byc dobrze.

Chodzi o to, ze miales element o ID menu, ktory byl Twoim UL (lista, czyli Twoimi odnosnikami) i mial background(tlo), wiec przesuwajac UL tlo szlo razem z UL, bo do niego bylo przypisane.

[Xaoo]

Dobra. Udało mi się je ustawić w ten sposób:

Kod:

#menu {
    background-image: url(images/menu.png);
    background-repeat:no-repeat;
    display:block-inline;
    width:755px;
    position: absolute;
    top:204px;
    left:191px;
    height:35px;}

Tylko teraz mam problem z zrobieniem odnośników dla obrazków menu. Jak je zrobić?
Mam tak w HTML i według mnie powinny się wyświetlić a ich nie ma:/

Kod:

<div id="main">
        <ul id="menu">
                
                                        
                    
    <li><a href="index.html"><img scr="images/menustr.png"></a></li>
            <li><a href="prace.html"><img scr="images/menuprac.png"></a></li>
               <li><a href="download.html"><img scr="images/menudownl.png"></a></li>
                  <li><a href="kontakt.html"><img scr="images/menukont.png"></a></li>
            
                    </ul>
                            </div>

[Dhofca]

Nie img scr, a img src.

[Xaoo]

o boże ;D Taki mały prawie nie zauważalny błąd w pisowni;/ Znacie jakiś program, który automatycznie podkreśla błąd ?

EDIT: Dobra.. Teraz następne pytanie

Chciałbym mieć menu poziome i pionowe.
----------------------------------------------------
Napisałem sobie osobny selektor:

Kod:

ul#menu_pionowe {
    position:absolute;    
    margin-top:48px;
    left:191px;
    background-repeat:no-repeat;
    padding:0px;}
    

ul#menu_pionowe li {
    display:block;}

Chciałbym aby odstęp w pionie między jednym menu "stats" i "reklama" był większy niż jest domyślny [chyba 1px]. Trzeba przypisać osobny selektor czy idzie jakoś to napisać?

[Dhofca]

Nie wiem czy dobrze Cię rozumiem, ale czy nie wystarczy dodać margin-bottom: xx px; do ul#menu_pionowe?

Co do podkreślania błędów. Podkreślania chyba nie ma, ale jest kolorowanie składni na przykład w Notepad++. Jeżeli zrobisz błąd to nie pokoloruje jakiegoś znacznika na odpowiedni kolor i zorientujesz się, że coś jest nie tak.