Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: меню css
 
 автор: divirtir   (19.06.2006 в 20:33)   письмо автору
 
 

помогите пожалуйста!!!
вот у меня меню. css. хочу сделать так как видел где то не помню где но очень распространённо. около каждого пункта стоит жирная точка такая. кружочек. при наведение мышкой на пуект он меняет звет но не так же как пункт! как это делаеться??? подскажите пожалуйста! я не то что не знаю как сделать так чтоб он менял цвет отдельно от пункта яч незнаю даже как написать такой крудочек! это не картинка. он пишеться как то!

<style>
<!--
body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;}
-->
#menu_cont ul {
 font-size: 0.85em;
 margin: 0;
 padding: 0;
 list-style: none;
}
#menu_cont li {
 display: inline;
 float: top;
}
#menu_cont li a {
 display: block;    
 padding: 7px 20px;
 color: #003388;
 background-color: #f5f5f5;
 margin-right: 2px; width:100px; text-decoration:none;
}
#menu_cont li a:hover {
 display: block;    
 padding: 7px 20px;
 color: #333;
 background-color: #fff;
 margin-right: 2px; text-decoration:none;
}
#menu_cont li span {
 display: block;    
 padding: 6px 20px;
 color: #555;
 background-color: #e8e8e8; 
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 margin-right: 2px;
}

</style>
</head>

<body marginheight="0" marginwidth="0" background="site1_21FONDO.jpg">
<div id="menu_cont">
 <ul>

  <li><a href="#"><font size="+6">.</font>Пункт меню 1</a></li>
  <li><a href="#">o Пункт меню 2</a></li>
  <li><a href="#">o Пункт меню 3</a></li>

 <li><a href="#">o Пункт меню 3</a></li>
  </ul>
</div> 


плиииз! от этого может зависить будущее всей нашей планеты!!!

   
 
 автор: RMW   (19.06.2006 в 21:45)   письмо автору
 
   для: divirtir   (19.06.2006 в 20:33)
 

Знаю только как эти кружочки рисуются
(кстати они по дефолту в списках присутствуют)
<ul type="disc">
<li>1
<li>2
</ul>

<ul type="circle">
<li>1
<li>2
</ul>

<ul type="square">
<li>1
<li>2
</ul>

   
 
 автор: divirtir   (19.06.2006 в 22:21)   письмо автору
 
   для: RMW   (19.06.2006 в 21:45)
 

нда! спасибо большре!!! хотя незнаю радоваться или не очень. у меня же это меня написано на этих самых li и на тех самых lu так что они вовсе не отображаються! может взять попробывать заменить Li и Lu ну например на tr и td ? это сработает как вы думаете? а то мне бесполезно втыкать сейчас в это меня эти нехорошие li - lu! :(

   
 
 автор: RMW   (19.06.2006 в 22:46)   письмо автору
 
   для: divirtir   (19.06.2006 в 22:21)
 

Ну, не знаю не знаю.
Я вот чуть изменил...
Правда в IE цвет не меняется, он hover только для ссылок поддерживает.

<html>
<head>
<style> 
<!-- 
body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;} 
-->
#menu_cont li:hover {
color:green;
}
 
#menu_cont ul {
color:red; 
font-size: 0.85em; 
margin: 0; 
padding: 0; 
list-style: disc; 
}

#menu_cont li { 
/*display: inline;*/ 
float: top; 
}
 
#menu_cont li a { 
display: block;     
padding: 7px 20px; 
color: #003388; 
background-color: #f5f5f5; 
margin-right: 2px; width:100px; text-decoration:none; 
}
 
#menu_cont li a:hover { 
display: block;     
padding: 7px 20px; 
color: #333; 
background-color: #fff; 
margin-right: 2px; text-decoration:none; 
}
 
#menu_cont li span { 
display: block;     
padding: 6px 20px; 
color: #555; 
background-color: #e8e8e8; 
border-top: 1px solid #ccc; 
border-bottom: 1px solid #ccc; 
margin-right: 2px; 


</style> 
</head> 

<body marginheight="0" marginwidth="0" background="site1_21FONDO.jpg"> 
<div id="menu_cont"> 
<ul> 

  <li><a href="#">Пункт меню 1</a></li> 
  <li><a href="#">Пункт меню 2</a></li> 
  <li><a href="#">Пункт меню 3</a></li> 

</ul> 
</div>
</body>
</html>

   
 
 автор: divirtir   (19.06.2006 в 23:05)   письмо автору
 
   для: RMW   (19.06.2006 в 22:46)
 

уууф! как хорошо вы придумали! жалко что в ie не фурычит! а скрипит у меня был для того чтоб смотреть в ie но не работает :( я в них тож не понимаю. наверно это не для этого! как его переделать чтоб работал?



<script type="text/javascript"><!--//--><![CDATA[//><!--
    jsHover = function() {
        var hEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0, len=hEls.length; i<len; i++) {
            hEls[i].onmouseover=function() { this.className+=" jshover"; }
            hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
        }
    }
    if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
//--><!]]></script>

   
 
 автор: RMW   (20.06.2006 в 01:07)   письмо автору
 
   для: divirtir   (19.06.2006 в 23:05)
 

В скрипте нужно заменить "nav" на "menu_cont"
Потом дополнить
#menu_cont li:hover, li.jshover {
color:green;
}
Со всякими марджинами и пэддингами сам разбирайся.

_
Короче для IE, чтобы кружочки
как бы появились нужно
margin: 10;
padding: 10;
При этом меню сдвигается.

   
 
 автор: divirtir   (20.06.2006 в 04:03)   письмо автору
 
   для: RMW   (20.06.2006 в 01:07)
 

ВАААУ! не ужель получиться! я уже 16 часов голову ломаю об эти падинги! ты мне обясни тока плиз эти маргин падинг 10 куда ставить то? в li ?? или в скрипит? :() тоесть маргин 10 писать для кружочков?? и шариков :))

   
 
 автор: AlexSol   (20.06.2006 в 09:36)   письмо автору
 
   для: divirtir   (20.06.2006 в 04:03)
 

особо не вдоваясь в детали, думаю что кружечки проще нарисовать самому.
http://alvit.de/css-showcase/css-navigation-techniques-showcase.php - выбирайте понравившееся и сохраняйте страницу, стили расположены в нейже.

ваш случай примерно этот http://e-lusion.com/design/menu/

   
 
 автор: divirtir   (20.06.2006 в 23:04)   письмо автору
 
   для: AlexSol   (20.06.2006 в 09:36)
 

во круто! спасибо большое! всё сделал всё забацал отлисно! спасииибо! :)
просто рисунки переделал под свои и стили поменял как надо!

   
 
 автор: RMW   (20.06.2006 в 12:32)   письмо автору
 
   для: divirtir   (20.06.2006 в 04:03)
 

Бли-и-ин :)))

<html> 
<head>

<script type="text/javascript"><!--//--><![CDATA[//><!-- 
    jsHover = function() {
        var hEls = document.getElementById("menu_cont").getElementsByTagName("LI"); 
        for (var i=0, len=hEls.length; i<len; i++) { 
            hEls[i].onmouseover=function() { this.className+=" jshover"; } 
            hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); } 
        } 
    } 
    if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover); 
//--><!]]></script>

<style>
<!-- 
body {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;} 
-->

#menu_cont li:hover, li.jshover { 
color:green;


#menu_cont ul { 
color:red; 
font-size: 0.85em; 
margin: 10; 
padding: 10; 
list-style: disc; 


#menu_cont li { 
/*display: inline;*/ 
float: top; 


#menu_cont li a { 
display: block;      
padding: 7px 20px; 
color: #003388; 
background-color: #f5f5f5; 
margin-right: 2px; width:100px; text-decoration:none; 


#menu_cont li a:hover { 
display: block;      
padding: 7px 20px; 
color: #333; 
background-color: #fff; 
margin-right: 2px; text-decoration:none; 


#menu_cont li span { 
display: block;      
padding: 6px 20px; 
color: #555; 
background-color: #e8e8e8; 
border-top: 1px solid #ccc; 
border-bottom: 1px solid #ccc; 
margin-right: 2px; 


</style> 
</head> 

<body marginheight="0" marginwidth="0" background="site1_21FONDO.jpg"> 
<div id="menu_cont"> 
<ul> 

  <li><a href="#">Пункт меню 1</a></li> 
  <li><a href="#">Пункт меню 2</a></li> 
  <li><a href="#">Пункт меню 3</a></li> 

</ul> 
</div> 
</body> 
</html>

   
 
 автор: divirtir   (21.06.2006 в 04:50)   письмо автору
 
   для: RMW   (20.06.2006 в 12:32)
 

какой всё таки нород тут хорошый! заботливый! спасибо всем!!! у меня теперь по поводу отображения в браузерах вопрос. меня смотриться хорошо в ie и opera а вот в мазила косит!
пункты - рисунками сделанные но дело не в рисунках! в коде что то! рисунки пунктов - ссылок смещенны вправо. некрасиво. отстув наверное в 40 px от положенного! что делать? вот страница
http://www.dntkv.com/dextra/PADEXTRA9.html
помогите пожалуйста. почему не хочет правельно показывать мозила? плииз!

   
 
 автор: Oligarx   (21.06.2006 в 08:22)   письмо автору
 
   для: divirtir   (21.06.2006 в 04:50)
 

да, и ещё в FF точек нету ... или может их не видно?

   
 
 автор: divirtir   (21.06.2006 в 10:37)   письмо автору
 
   для: Oligarx   (21.06.2006 в 08:22)
 

точки вроде есть! с точками всё нормально! они расположены с правой части рисунка пункта. а пункты смещены не с лева а с права. поэтому точки тоже в право перетащились. вот. но у меня покрайней мере точки есть. моет FF разнве у нас какие нить.

   
 
 автор: Oligarx   (21.06.2006 в 10:54)   письмо автору
 
   для: divirtir   (21.06.2006 в 10:37)
 

FF версия 1.5.0.4

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования