Witam!
Posiadam forum phpbb3, postanowiłem przerobić nawigację pod stronę, mam belkę z menu rozwijalnym i na stronie wszystko działa, lecz na forum gdy wstawiam styl css odpowiedzialny za belkę, całe forum się rozjeżdża ponieważ on przyjmuje sobie ten styl jako dla całego forum. Jak zrobić aby dany styl był tylko dla jednego elementu.
0
0
Strona:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styl.css" />
</head>
<body>
<span class="preload1"></span>
<span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>link1</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">link2</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><b>link3</b></li>
<li><a href="#nogo3" class="fly">link4<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
<li><a href="#nogo4">link5</a></li>
<li><a href="#nogo5">link6</a></li>
<li><a href="#nogo6">link7</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><b>link</b></li>
<li><a href="#nogo19">link</a></li>
<li><a href="#nogo20">link</a></li>
<li><a href="#nogo21">link</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">link</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="#nogo54">link</a></li>
<li><a href="#nogo55">link</a></li>
<li><a href="#nogo56">link</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>link</span></a></li>
</ul>
</body>
</html>
Styl css
.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}
#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}
#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}
#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}
#nav :hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover > li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}
Proszę jakiegos moderatora o umieszczenie tego w poście wyżej
0
przypuszczalnie masz konflikt w nazwach klas,id . Posprawdzaj dokładnie przy pomocy firebug'a czy nic sobie nie nadpisujesz.
0
Już sobie poradziłem, dla nawigacji utworzyłem osobną stronę, w globalnym css'ie dopisałem dla niej szerokości.
i dla tej strony czyli nawigacji jest osobny css i wszystko smiga :)