Jump to content

La_Perm

Newbie
  • Posts

    6
  • Joined

  • Last visited

Everything posted by La_Perm

  1. А еще в иксплорере косяк, курсор на первое подменю навожу, а до второго не доезжаю((( подменю пропадает. Знаю, что такое бывает, когда промежутки между пунктами большие, но в фаерфоксе такого нет. вставила ссылку <script src="cssmenujs.js"> </script> а сам скрипт такой function cssmenuhover() { if(!document.getElementById("cssmenu")) return; var lis = document.getElementById("cssmenu").getElementsByTagName("LI"); for (var i=0;i<lis.length;i++) { lis[i].onmouseover=function(){this.className+=" iehover";} lis[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");} } } if (window.attachEvent) window.attachEvent("onload", cssmenuhover);
  2. Прошу прощения за беспокойство. Вот только что своими силами сделала. Покажу фрагмент моего меню <ul id="cssmenu"> <li><a href="#">Главная</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">О нас</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </li> <li><a href="#">Сервис</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul></li> <li><a href="#">Цены</a> <ul><li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> <li><a href="#">Ссылка 3</a></li> <li><a href="#">Ссылка 4</a></li> <li><a href="#">Ссылка 5</a></li></ul></li> <li><a href="#">Контакты</a> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li></ul></li> </ul> И вот кусок css ul#cssmenu {width:auto; margin: 0; border: 0 none; padding: 0; list-style: none; background: none; height: 20px; } ul#cssmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 20px; } ul#cssmenu ul { margin: 0; border: 0 none; padding: 0; width: 200px; list-style: none; display: none; position: absolute; top: 20px; left: 0; } ul#cssmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden; } ul#cssmenu ul li { width: 150px; float: left; display: block !important; display: inline; } /* Main Menu */ ul#cssmenu a { border: 0px; padding: 0 10px; float: none !important; float: left; display: block; background: none; color: #f19fc1; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; } /* Main Menu Hover */ ul#cssmenu a:hover, ul#cssmenu li:hover a, ul#cssmenu li.iehover a { background: #2d5004; color:none; } /* Second Menu */ ul#cssmenu li:hover li a, ul#cssmenu li.iehover li a { float: none; background: none; color: #f19fc1; } /* Second Menu Hover */ ul#cssmenu li:hover li a:hover, ul#cssmenu li:hover li:hover a, ul#cssmenu li.iehover li a:hover, ul#cssmenu li.iehover li.iehover a { background: #2d5004; color:none; } ul#cssmenu ul ul { display: none; position: absolute; top: 0; left: 170px; } ul#cssmenu li:hover ul ul, ul#cssmenu li.iehover ul ul { display: none; } ul#cssmenu li:hover ul, ul#cssmenu ul li:hover ul, ul#cssmenu li.iehover ul, ul#cssmenu ul li.iehover ul { display: block; } Что я опять не так сделала? У меня все открывается как надо, но шрифт в меню одного размера. То есть я в дримвьювере меню делаю с заглавной буквы, а фаерфокс его показывает со строчной. ПОЧЕМУ?надо "Главная", а он показывает "главная"
  3. Они были но я их убрала потому что запуталась. когда делаю теги списка то у меня меню немного вниз скатывается а мне этого не надо. Мне надо, чтоб основное меню было так, как есть сейчас, а из под него подменю вылезало.
  4. Не то, чтоб я вообще не знаю, как это сделать, но запуталась в тегах. Итак, исходный css файл был таким body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body.jpg) repeat-x #F7FFC4; padding-bottom:10px;} a {color:#deff00; text-decoration:none;} a:hover {text-decoration:underline;} #container {background:url(images/main_bckg.jpg) center top no-repeat; width:980px; margin:0 auto;} #logo {margin:0 90px 0 110px; background:url(images/logo_bckg.jpg) no-repeat #4A730B; padding:43px 0 69px 0; text-align:center;} #logo a {color:#FFFFFF; text-decoration:none; text-transform:uppercase; font-size:20px; font-weight:bold;} #menu {margin:0 90px 0 110px; height:28px; background:url(images/menu_bckg.jpg) no-repeat #102C04; padding:17px 0 0 30px;} #menu a {color:#FFFFFF; font-size:14px; padding:9px 10px; text-decoration:none; text-transform:lowercase;} #menu a:hover {background:url(images/menu_over.jpg) bottom center no-repeat;} #main {margin:0 90px 0 110px; background:url(images/content_bckg.jpg) no-repeat #8EB002; float:left; min-height:420px; display:inline;} #text {margin:30px 240px 0px 40px;} #text ul {padding:0; margin:10px 0 10px 40px;} #text li {list-style:none; padding-left:15px; background:url(images/li.gif) no-repeat 0px 7px;} h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;} #text p {margin:10px 0;} #sidebar {float:right; width:160px; padding:0 40px 0 50px; margin-top:50px;} #sidebar h2 {font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:18px; font-weight:normal;} #sidebar ul {margin:20px 0; padding:0;} #sidebar li {list-style:none; padding:3px 0 3px 10px;} #sidebar li:hover {background-color:#2d5004;} #sidebar a {text-decoration:none; color:#deff00;} #footer {margin:0 90px 0 110px; clear:both; background:url(images/footer_bckg.jpg) center top repeat-x; height:89px; padding:53px 40px 0 40px;} #menu_footer {font-size:11px;} #menu_footer a {color:#FFFFFF; text-transform:lowercase;} #left_footer {float:left; font-size:11px; margin-top:30px;} #left_footer a {color:#FFFFFF;} #right_footer {float:right; font-size:11px; margin-top:30px;} Сейчас он выглядит вот так: body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body.jpg) repeat-x #F7FFC4; padding-bottom:10px;} a {color:#ffffff; text-decoration:none;} a:hover {text-decoration:none;} #container {background:url(images/main_bckg.jpg) center top no-repeat; width:980px; margin:0 auto;} #logo {margin:0 110px 0 110px; background:url(images/logo_bckg.jpg) no-repeat #4A730B; padding:43px 0 69px 0; text-align:center;} #logo a {color:#f19fc1; text-decoration:none; text-transform:uppercase; font-size:20px; font-weight:bold;} #menu {margin:0 110px 0 110px; height:28px; background:url(images/menu_bckg.jpg) no-repeat #f19fc1; padding:17px 0 0 30px;} #menu a {color:#f19fc1; font-size:14px; padding:9px 10px; text-decoration:none; text-transform:lowercase;} #menu a:hover {background:url(images/menu_over.jpg) bottom center no-repeat;} .dropmenu ul { margin: 0; padding: 0; list-style: none; width: 80px; } ul li { position: relative; border: 0px ; padding:0px; } *+html ul li { float: left; } *+html ul li { width: 10%; } li ul { position: absolute; left: 0px; top: 29px; display: none; width: 79px; } ul li a { display: block; } ul li a:hover { display: block; } li:hover ul { display: block; } #main {margin:0 110px 0 110px; background:url(images/content_bckg.jpg) no-repeat #8EB002; eft; min-height:420px;} #text {margin:0px 140px 0px 40px;} h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;} #text p {margin:10px 0;} #footer {margin:0 110px 0 110px; clear:both; background:url(images/footer_bckg.jpg) center top repeat-x; height:89px; padding:53px 40px 0 40px;} #menu_footer {font-size:11px;} #menu_footer a {color:#FFFFFF; text-transform:lowercase;} #left_footer {float:left; font-size:11px; margin-top:30px;} #left_footer a {color:#FFFFFF;} #right_footer {float:right; font-size:11px; margin-top:30px;} Я добавила в css дропменю для всплывающего меню. Сейчас html страничка выглядит вот так <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /></head> <body> <div id="container"> <!-- header --> <div id="logo"><a href="#"> </a></div> <div id="menu"> <a href="#">Главная</a> <a href="#">О нас </a> <a href="#">Сервис</a> <a href="#">Цены</a> <a href="#">Контакты</a> </div> <!--end header --> <!-- main --> <div id="main"> <div id="text" > <table border="0" cellspacing="13"> <tr> <td> <img src="foto/wed_neves_9s.jpg" width="174" height="174"></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td><img src="foto/wed_neves_11s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_12s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td><img src="foto/wed_neves_13s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_14s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td><img src="foto/wed_neves_15s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_16s.jpg" width="174" height="174" /></td> <td><img src="foto/wed_neves_10s.jpg" width="174" height="174" /></td> </tr> <tr> <td colspan="3" align="center"><a href="wedding.html">1</a> | 2 | <a href="wedding-3.html">3</a></td> </tr> </table> </div> </div> <!-- end main --> <!-- footer --> <div id="footer"> <div id="menu_footer"><a href="#">home</a> | <a href="#">about</a> | <a href="#">products</a> | <a href="#">services</a> | <a href="#">pricing</a> | <a href="#">contact</a> | <a href="#">sitemap</a> | <a href="#">testimonials</a> | <a href="#">etc.</a></div> <div id="left_footer">© Copyright 2008 <strong>Your Website</strong></div> <div id="right_footer"> Design by <a href="http://www.realitysoftware.ca" title="Web Design"><strong>Reality Software</strong></a> & <a href="http://www.flashmp3player.org" title="Free Flash MP3 Player"><strong>Flash Music Player</strong></a> <div style="display:none;"><a href="http://csstemplatesfree.net">free website templates for free</a></div> </div> </div> <!-- end footer --> </div> </body> Итак, требуется, чтобы при наведении на ссылки Главная, о нас, Сервис, цены, контакты появлялось подменю из 3 ссылок. Подменю должно всплывать, не справа от основного меню, а под ним, то есть - под Главная подменю из 3 ссылок, под О нас подменю из 3 ссылок и т.д. Скажу сразу, что пробовала действовать так, как написано здесь http://www.seomark.ru/dropmenu.html# но запуталась в тегах совершенно. Потому прошу помощи. Основное меню должно быть таким (см. верх картинки, т.к. боковых сайдбаров в моей переделке не предусмотрено)
  5. А что в css написать, чтоб меню с точкой чуть левее двинулось, а то точка на узорчатый фон нагло лезет.
  6. Дорогие пользователи! Я здесь новенькая, а уже прошу помощи, но я не знаю, как мне быть. Делаем с одной девушкой сайт. Она в фотошопе рисует, а я версткой балуюсь. Необходимо, чтобы на сайте было как бы 2 вида активных ссылок, я не знаю, как это сделать. В горизонтальном меню на одной ссылке есть подчеркивание - это обозначение стр., на которой находишься. и так же с нумерацией (только наоборот т.е. без подчеркивания та, на которой находишься + выделение цветом) и в левом меню - кружочек и выделение цветом.. это обозначение стр на которой стоишь. Сейчас имеется вот такой css(не мной написанный) * { margin:0; padding:0; } body,html { font-family:arial; background:#dcd7cb; height:100%; } a, img { outline:none; border:none; } a { text-decoration:none; cursor:pointer; } a:hover { text-decoration:underline; } a:link { color: #be692a; } #wrapper { width:990px; margin:0 auto; min-height:100%; } /* HEADER */ #header { float:left; background:url("../images/bg-header.jpg") no-repeat center; width:990px; height:337px; } .logo { float:left; background:url("../images/logo.jpg") no-repeat; width:189px; height:284px; margin:66px 0 0 43px; position:relative; z-index:1; } /* END HEADER */ /* CONTENT */ #content { float:left; width:990px; min-height:100%; background:url("../images/bg-content.jpg") repeat-y; } #left-column { float:left; width:240px; margin-left:19px; text-align:center; } #left-column h3 { border: 1px solid #D9CBBD; color: #917454; float: left; font-size: 16px; margin: 0 31px 16px; padding: 6px; background:#d8d0c4; } .nav { float:left; padding:40px 30px 0; width:180px; margin-bottom:27px; } .nav ul { list-style-type:none; } .nav ul li { text-align:left; } .nav ul li a { color:#853d08; font-size:14px; } .interesting-link { padding:0 40px; float:left; } .interesting-link ul { list-style-type:none; } .interesting-link ul li { line-height:1.1; text-align:left; } .interesting-link ul li a { color:#7e5a3a; font-size:13px; } #right-column { float:left; width:667px; margin:20px 0 0 28px; } .h-nav { display:block; margin-bottom:25px; text-align:center; } .h-nav ul { list-style-type:none; } .h-nav ul li { display:inline; margin:0 7px; } .h-nav ul li a { font-size:19px !important; color:#8b4a01 !important; } #right-column a { font-size:14px; color:#2e1304; } #right-column p { font-size:14px; color:#2e1304; margin-bottom:25px; line-height:1.3; } .our-partners { display:block; background:#d9d3c5; padding:8px 5px 12px; width:640px; text-align:center; margin-top:100px; clear: both; } .our-partners h4 { float:left; width:620px; font-size:16px; color:#917454; font-weight:normal; padding:0 10px 8px; border-bottom:1px solid #c7b7ac; text-align:left; } .link-our-partner { float:left; } .link-our-partner-center { margin:0 190px; } .link-our-partner ul { list-style-type:none; } .link-our-partner ul li { padding:0 20px; line-height:1.6; text-align:left; } .link-our-partner ul li a { color:#7e5a3a !important; font-size:14px; } .clear { clear:both; } /* END CONTENT */ /* FOOTER */ #footer { margin:0 auto; width:990px; height:103px; background:url("../images/bg-footer.jpg") no-repeat; position:relative; } .wetchik { position:absolute; left:48px; bottom:15px; } /* END FOOTER */ А вот то, к чему надо стремиться http://keep4u.ru/full/1992d6cc43b120b00b0ff080a4d0dd10.html http://keep4u.ru/full/ed30a0ae122f37295ea37bd7cc8ed041.html
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy