Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / Программирование [игнор отключен] [закрыт для гостей] / проблема с css / 6 сообщений из 6, страница 1 из 1
22.09.2005, 14:48
    #33283860
imp1
imp1
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблема с css
Проблема в том, что написал всплывающую менюху, вернее взял готовую чуток поменял.
А вот изменить css не получается, потому когда ставлю новые стили задеваются старые. помогите написать свои классы
вот код css:
UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 180px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

UL LI {
POSITION: relative
}
LI UL {
DISPLAY: none; LEFT: -187px; POSITION: absolute; TOP: 0px
}

.UL_LI_A {
BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 0px solid; TEXT-DECORATION: none
}

.UL_LI_A_END {
BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 1px solid; TEXT-DECORATION: none
}

HTML UL LI {
FLOAT: left; HEIGHT: 1%
}
HTML UL LI A {
HEIGHT: 1%
}
LI:hover UL {
DISPLAY: block
}
LI.over UL {
DISPLAY: block
}

а вот код html

<A href="#" class=sub_menu> Конкурсы, викторины</A>

<UL>
<LI ><A class="UL_LI_A"
href="#">111 <IMG height=1 alt=xxx.gif src="" width=160 border=0 align="middle"></A>
</LI>

<LI><A class="UL_LI_A"
href="#">Миниконкурсы по информатике<IMG height=1 alt=xxx.gif src="" width=160 border=0 align="middle"></A>
</LI>
<LI><A class="UL_LI_A"
href="#">222<IMG height=1 alt=xxx.gif src="" width=160 border=0 align="middle"></A>
</LI>

<LI><A class="UL_LI_A"
href="#">333<IMG height=1 alt=xxx.gif src="" width=160 border=0></A>
</LI>

<LI><A class="UL_LI_A"
href="#">444<IMG height=1 alt=xxx.gif src="" width=160 border=0 align="middle"></A>
</LI>


<LI><A class="UL_LI_A_END"
href="#">Дети и сети<IMG height=1 alt=xxx.gif src="" width=160 border=0 align="middle"></A>
</LI>
</UL></LI>
</ul>

просто другие ul li становятся на сайте корявыми, потому требуется локализация при помощи классов. Заранее спасибо :-)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.09.2005, 16:04
    #33284138
хм...
хм...
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблема с css
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>

.menu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 180px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

.menu UL LI {
POSITION: relative
}
.menu LI UL {
DISPLAY: none; LEFT: -187px; POSITION: absolute; TOP: 0px
}

.UL_LI_A {
BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 0px solid; TEXT-DECORATION: none
}

.UL_LI_A_END {
BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 1px solid; TEXT-DECORATION: none
}

HTML .menu UL LI {
FLOAT: left; HEIGHT:  1 %
}
HTML .menu UL LI A {
HEIGHT:  1 %
}
.menu LI:hover UL {
DISPLAY: block
}
.menu LI.over UL {
DISPLAY: block
}

</style>
</head>
<body style="margin:10px">

<ul>
<li>aaaaaaaaaaaa
	<ul>
	<li>aaaaaaaaaaaa</li>
	<li>sssssssssssssss</li>
	<li>ddddddddddddddddddd</li>
	<li>ffffffffffffffff</li>
	</ul>
</li>
<li>sssssssssssssss</li>
<li>ddddddddddddddddddd</li>
<li>ffffffffffffffff</li>
</ul>

<br>

<span class='menu'>
<A href="#" class=sub_menu> Конкурсы, викторины</A> 

<UL>
<LI ><A class="UL_LI_A" 
href="#"> 111  <IMG height= 1  alt=xxx.gif src="" width= 160  border= 0  align="middle"></A> 
</LI>

<LI><A class="UL_LI_A" 
href="#">Миниконкурсы по информатике<IMG height= 1  alt=xxx.gif src="" width= 160  border= 0  align="middle"></A> 
</LI>
<LI><A class="UL_LI_A" 
href="#"> 222 <IMG height= 1  alt=xxx.gif src="" width= 160  border= 0  align="middle"></A> 
</LI>

<LI><A class="UL_LI_A" 
href="#"> 333 <IMG height= 1  alt=xxx.gif src="" width= 160  border= 0 ></A> 
</LI>

<LI><A class="UL_LI_A" 
href="#"> 444 <IMG height= 1  alt=xxx.gif src="" width= 160  border= 0  align="middle"></A> 
</LI>


<LI><A class="UL_LI_A_END"
href="#">Дети и сети<IMG height= 1  alt=xxx.gif src="" width= 160  border= 0  align="middle"></A> 
</LI>
</ul>

</span>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.09.2005, 11:34
    #33285511
imp1
imp1
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблема с css
каюсь, корявый код написал с всплывающим меню, что теперь и сам не могу разобраться.
Вот нормальный код, где следует прописать классы, граждане, помогите, ну пожалуйста. Для удобство и css и скрипт скинул в один файл, что вы могли легко сами потестить.
--------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
A.sub_menu {MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 5px; MARGIN-LEFT: 5px; COLOR: #0049c1; FONT-FAMILY: tahoma, verdana, sans-serif; HEIGHT: 16px; TEXT-DECORATION: none}
A.sub_menu:hover {MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 5px; MARGIN-LEFT: 5px; COLOR: #0291ff; FONT-FAMILY: tahoma, verdana, sans-serif; HEIGHT: 16px; TEXT-DECORATION: none}


UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 180px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
UL LI {POSITION: relative}
LI UL {DISPLAY: none; LEFT: -187px; POSITION: absolute; TOP: 0px}

.UL_LI_A {BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 0px solid; TEXT-DECORATION: none}
.UL_LI_A_END {BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 1px solid; TEXT-DECORATION: none}

HTML UL LI {FLOAT: left; HEIGHT: 1%}
HTML UL LI A {HEIGHT: 1%}
LI:hover UL {DISPLAY: block}
LI.over UL {DISPLAY: block}

</style>
<!-- <SCRIPT src="drop_down.js"
type=text/javascript></SCRIPT> -->
<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {



navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes ;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}



}
}
window.onload=startList;
</script>
</head>
<body style="margin:10px">
<ul>
<li>Один
<ul>
<li>один</li>
<li>два</li>
<li>три</li>
<li>четыре</li>
</ul>
</li>
<li>два</li>
<li>три</li>
<li>четыре</li>
</ul>

<br>
<table align="left">
<tr><td width="200"></td>
<td>
<UL id=nav>

<LI>

<A href="#" class=sub_menu>Один</A>
<UL>
<LI><A class="UL_LI_A"
href="#">Один</A>
</LI>
<LI><A class="UL_LI_A_END"
href="#">два</A>
</LI>
</UL></LI>
</ul>
</td></tr></table>
</body></html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.09.2005, 16:11
    #33286425
хм...
хм...
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблема с css
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
A.sub_menu {MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 5px; MARGIN-LEFT: 5px; COLOR: #0049c1; FONT-FAMILY: tahoma, verdana, sans-serif; HEIGHT: 16px; TEXT-DECORATION: none}
A.sub_menu:hover {MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 5px; MARGIN-LEFT: 5px; COLOR: #0291ff; FONT-FAMILY: tahoma, verdana, sans-serif; HEIGHT: 16px; TEXT-DECORATION: none}


.menu UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 190px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
.menu UL LI {POSITION: relative}
.menu LI UL {DISPLAY: none; LEFT: -187px; POSITION: absolute; TOP: 0px}

.UL_LI_A     {BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 0px solid; TEXT-DECORATION: none}
.UL_LI_A_END {BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 1px solid; TEXT-DECORATION: none}

HTML .menu UL LI {FLOAT: left; HEIGHT:  1 %}
HTML .menu  UL LI A {HEIGHT:  1 %}
.menu LI:hover UL {DISPLAY: block}
.menu LI.over UL {DISPLAY: block}

</style>
<!-- <SCRIPT src="drop_down.js" 
type=text/javascript></SCRIPT> -->
<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {



navRoot = document.getElementById("nav");
for (i= 0 ; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }



 }
}
window.onload=startList;
</script>
</head>
<body style="margin:10px">
<ul>
<li>Один
	<ul>
	<li>один</li>
	<li>два</li>
	<li>три</li>
	<li>четыре</li>
	</ul>
</li>
<li>два</li>
<li>три</li>
<li>четыре</li>
</ul>

<br>
<table align="left">
<tr><td width="200"></td>
<td class="menu">
<UL id=nav>

  <LI>

<A href="#" class=sub_menu>Один</A>  
  	<UL>
    <LI><A class="UL_LI_A" href="http://www.filimonoff.ru/books">books</A> 
    </LI>
    <LI><A class="UL_LI_A_END" href="http://www.sql.ru/forum/actualthread.aspx?tid=219195">два</A> 
    </LI>
	</UL></LI>
</ul>
</td></tr></table>
</body></html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.09.2005, 16:13
    #33286434
хм...
хм...
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблема с css
ps.

FAQ http://www.sql.ru/faq/faq_topic.aspx?fid=202 При добавлении кода (скажем sql) хорошим тоном, считается выделение кода используя ключевое слово выделения -
Код: plaintext
src
. Например:

Код: plaintext
1.
2.
-- some comments

select * from sysobjects
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.09.2005, 18:19
    #33287189
maXmo
maXmo
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблема с css
хм... , учись, пока я жив.
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
A.sub_menu {MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 5px; MARGIN-LEFT: 5px; COLOR: #0049c1; FONT-FAMILY: tahoma, verdana, sans-serif; HEIGHT: 16px; TEXT-DECORATION: none}
A.sub_menu:hover {MARGIN-TOP: 5px; FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN-BOTTOM: 5px; MARGIN-LEFT: 5px; COLOR: #0291ff; FONT-FAMILY: tahoma, verdana, sans-serif; HEIGHT: 16px; TEXT-DECORATION: none}


.menu UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 190px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
.menu UL LI {POSITION: relative}
.menu LI UL {DISPLAY: none; LEFT: -187px; POSITION: absolute; TOP: 0px}

.UL_LI_A     {BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 0px solid; TEXT-DECORATION: none}
.UL_LI_A_END {BORDER-RIGHT: #446FEE 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #446FEE 1px solid; DISPLAY: block; PADDING-LEFT: 5px; BACKGROUND: #D2DCFB; PADDING-BOTTOM: 5px; BORDER-LEFT: #446FEE 1px solid; COLOR: #0C5EE4; PADDING-TOP: 5px; BORDER-BOTTOM: #446FEE 1px solid; TEXT-DECORATION: none}

HTML .menu UL LI {FLOAT: left; HEIGHT:  1 %}
HTML .menu  UL LI A {HEIGHT:  1 %}
.menu LI:hover UL {DISPLAY: block}
.menu LI.over UL {DISPLAY: block}

</style>
<!-- <SCRIPT src="drop_down.js" 
type=text/javascript></SCRIPT> -->
<script language="javascript">
startList = function() {
if (document.all&&document.getElementById) {



navRoot = document.getElementById("nav");
for (i= 0 ; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }



 }
}
window.onload=startList;
</script>
</head>
<body style="margin:10px">
<ul>
<li>Один
	<ul>
	<li>один</li>
	<li>два</li>
	<li>три</li>
	<li>четыре</li>
	</ul>
</li>
<li>два</li>
<li>три</li>
<li>четыре</li>
</ul>

<br>
<table align="left">
<tr><td width="200"></td>
<td class="menu">
<UL id=nav>

  <LI>

<A href="#" class=sub_menu>Один</A>  
  	<UL>
    <LI><A class="UL_LI_A" href="http://www.filimonoff.ru/books">books</A> 
    </LI>
    <LI><A class="UL_LI_A_END" href="http://www.sql.ru/forum/actualthread.aspx?tid=219195">два</A> 
    </LI>
	</UL></LI>
</ul>
</td></tr></table>
</body></html>
------------------
- А как в Интеpнете pаботать? - Сначала нужно узнать, что вам нужно rtfm
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / Программирование [игнор отключен] [закрыт для гостей] / проблема с css / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]