+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: [CSS] Konflikt stylów... (/thread-css-konflikt-stylow)
Strony:
1
2
[CSS] Konflikt stylów... - Toman87 - 21-11-2009
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.
RE: [CSS] Konflikt stylów... - Mafialy - 21-11-2009
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
}??
RE: [CSS] Konflikt stylów... - Toman87 - 21-11-2009
Zaraz przetetuję
, mam nadzieję, że przejdzie 
Dzięki za szybką odpowiedź i pozdrawiam.
RE: [CSS] Konflikt stylów... - Mafialy - 21-11-2009
RE: [CSS] Konflikt stylów... - Toman87 - 22-11-2009
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?
RE: [CSS] Konflikt stylów... - Mafialy - 22-11-2009
To może np
Kod:
#Menu_poziome ul li { ???
A i chyba powinno być
Kod:
margin-left: 153px; czy width: 500px;
RE: [CSS] Konflikt stylów... - Labsta.com - 22-11-2009
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" />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
RE: [CSS] Konflikt stylów... - razorskate - 22-11-2009
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
RE: [CSS] Konflikt stylów... - Mafialy - 22-11-2009
weź tak jak napisał razorskate
RE: [CSS] Konflikt stylów... - razorskate - 22-11-2009
Musisz zmienić nie tylko ul i li , ale wszystkie odnoszące się do danego menu. Zobacz w moim opoście poprzednim .
Pozdrawiam.