[CSS] Konflikt stylów...

[Toman87]

Witam!

Przeglądnąłem google wzdłuż i wszerz jednakże nie znalazłem rozwiązania mojego problemu.

Jestem początkującym webmasterem, może lepiej webpadawanem.

Problem jest taki, że chcę zrobić na swojej stronie dwa menu: pionowe, poziome i przypisać im inne style.
Próbowałem na rożne sposoby, klasy również nie wypaliły.
Te dwa rodzaje menu umieszczam oczywiście w osobnych divach. Style są dobrze zrobione, ponieważ testuje kod z kursów obecnych na necie.
Po przypisaniu stylów (mam dwa osobne pliki menu_poziome.css i menu_pionowe.css) to "drugie" menu zawsze dziedziczy cechy tego ostatnio wpisanego.

Moje pytanie jest następujące: Jak mogę przypisać poszczególne style do poszczególnych elementów, tak aby nie dziedziczyły cech kolejnych?
Wina może nie jest tu samych plików, tylko sposobu przypisania.

Przypuszczam, że rozwiązanie nie jest trudne dla specjalistów, ale jak na razie po całym dniu prób, ja nie mogę do niego dotrzeć.

Dzięki za pomoc i pozdrawiam.

[Mafialy]

To nie lepiej zrobić plik style.css
i w pliku html dać :

Kod:

<div id="menupoziome"> odsyłacze </div>

<div id="menupionowe"> odsyłacze </div>

A potem dać w style.css

Kod:

#menupoziome a {
coś tam
}
#menupionowe a {
coś tam
}

??

[Toman87]

Zaraz przetetuję , mam nadzieję, że przejdzie

Dzięki za szybką odpowiedź i pozdrawiam.

[Mafialy]

[Toman87]

Spróbowałem w ten sposób co napisałeś powyżej.
Ogólnie to wszystko jest na swoim miejscu, ale styl pierwszego menu, został znowu "przejęty" przez styl drugiego...

Kod:

<div id="MENU_POZIOME">
<link rel="Stylesheet" type="text/css" href="style/szablon.css" />
    <ul>
    <li><a href="podstrony/bestiariusz.htm">Home</a></li>
    <li><a href="podstrony/bestiariusz.htm">Kontakt</a></li>
    <li><a href="podstrony/bestiariusz.htm">Pliki</a></li>
    </ul>
    </div>

W identyczny sposób jest dla MENU_PIONOWEGO. Natomiast kod w index.htm wygląda następująco:

Kod:

#MENU_POZIOME {
    margin-left: 153;
    width: 500;
    height: 25;
    filter: Alpha(Opacity = 65, Style = 0);
    background-color: #000;
}

ul {
    float: left;
    background-color: #fff;
    padding: 1px 0 1px 1px;
    border: 1px solid #000;
}

ul li {
    float: left;
}

                ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    font-weight: bold;
    background: #000 url("../grafiki/menu_poziome/tlo14.gif") repeat-x center;
    color: #fff;
    padding: 10px 20px;
    border-right: 1px solid #fff;
    border-right: 1px solid #fff;
}

                 ul a:hover {
    background-color: #800;
    background-image: url("../grafiki/menu_poziome/tlo24.gif");
}

Podobnie jest dla MENU_PIONOWE tylko troszkę inna wizualizacja.

Jakieś pomysły?

---

[Mafialy]

To może np

Kod:

#Menu_poziome ul li { ?

zamiast samego ul li ?
??
A i chyba powinno być

Kod:

margin-left: 153px; czy width: 500px;

[Labsta.com]

Pokaże Ci pewne rozwiązanie, zadziała pod warunkiem, że masz poprawne arkusze.
Robisz tak:
w sekcji head dajesz:

Kod:

<link href="master.css" rel="stylesheet" type="text/css" media="all" />

i to ma być jedyny arkusz jaki wstawiasz w pliku html !
W master.css robisz import dodatkowych arkuszy. Przykładowy plik master.css

Kod:

/*- Import Stylesheet -*/
@import "menu_poziome.css";
@import "menu_pionowe.css";
/*----------------*/
/* tu możesz dać styl całego szablonu */

//edit:
-używaj małych liter w nazwach id i class, bo to standard
-tak jak pisze mafialt samo ul=wszystkie listy, a #menu_poziome ul oznacza tylko listy w #menu_poziome
-powtórz sobie podstawy selektorów CSS
-następnym razem wklejaj kod, to szybciej pójdzie

[razorskate]

Sądzę, że znam rozwiązanie.

Zmień w CSS na to:

Kod:

#MENU_POZIOME {
    margin-left: 153;
    width: 500;
    height: 25;
    filter: Alpha(Opacity = 65, Style = 0);
    background-color: #000;
}

#MENU_POZIOME ul {
    float: left;
    background-color: #fff;
    padding: 1px 0 1px 1px;
    border: 1px solid #000;
}

#MENU_POZIOME ul li {
    float: left;
}

    #MENU_POZIOME ul a:link, ul a:visited {
    text-decoration: none;
    display: block;
    font-weight: bold;
    background: #000 url("../grafiki/menu_poziome/tlo14.gif") repeat-x center;
    color: #fff;
    padding: 10px 20px;
    border-right: 1px solid #fff;
    border-right: 1px solid #fff;
}

    #MENU_POZIOME  ul a:hover {
    background-color: #800;
    background-image: url("../grafiki/menu_poziome/tlo24.gif");
}

Analogicznie robisz menu pionowe. Dzięku zwiększeniu precyzji w CSS docierasz dokładniej do każdego elementu.
Mam nadzieję, że mnie zrozumiałeś.
Pozdrawiam, Mikołaj.

--Edit--
Sorki, Mafialt, ale długo pisałem posta, i nie zauważyłem, że dałeś taką samą odpowiedź. Przepraszam

[Mafialy]

weź tak jak napisał razorskate

[razorskate]

Musisz zmienić nie tylko ul i li , ale wszystkie odnoszące się do danego menu. Zobacz w moim opoście poprzednim .
Pozdrawiam.