Css

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем nws, 8 апр 2008.

  1. nws

    nws Гость

    Привет всем. Нужна помощь.

    Взял меню с http://www.cssplay.co.uk/menus/vertical_slide.html

    Код (Text):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="author" content="">

    <title>Untitled 4</title>
    </head>
    <style type="text/css">
    ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow:hidden; background:#f8f8f8; width:14em; text-align:left; color:#fff; border:1px solid #606;}
    ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:1em;}
    ul.menu1 ul {margin-left:1em;}
    ul.menu1 li {text-indent:0.5em;}
    ul.menu1 li.drop {margin-bottom:-2px;}
    ul.menu1 li a,
    ul.menu1 li a:visited {display:block; width:14em; height:2em; line-height:1.9em; text-decoration:none; color:#606;}
    ul.menu1 li a.last,
    ul.menu1 li a.last:visited {display:block; width:14em; height:14em; line-height:2em;}
    ul.menu1 li ul {display:none;}

    ul.menu1 li:hover a,
    ul.menu1 li a:hover {border:0; color:#00c; font-weight:bold;}
    ul.menu1 li:hover ul,
    ul.menu1 li a:hover ul {display:block; height:12em; width:12em; margin-top:-1px; background:#def; border:1px solid #000;}
    ul.menu1 li:hover ul li a,
    ul.menu1 li a:hover ul li a {height:2em; background:#def; color:#00c; font-weight:normal;}
    ul.menu1 li:hover ul li:hover a,
    ul.menu1 li a:hover ul li a:hover {background:#00c; color:#fff;}

    </style>

    <body>
    <ul class="menu1">
    <li class="drop"><a href="item1.html">PRODUCTS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item1a.html">Mobiles</a></li>
    <li><a href="item1b.html">Photoframes</a></li>
    <li><a href="item1c.html">Tripods</a></li>
    <li><a href="item1d.html">Cameras</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li class="drop"><a href="item2.html">SERVICES<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item2a.html">Photography</a></li>
    <li><a href="item2b.html">Video editing</a></li>
    <li><a href="item2c.html">Web design</a></li>
    <li><a href="item2d.html">Guides</a></li>
    <li><a href="item2e.html">Tutorials</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li class="drop"><a href="item3.html">PORTFOLIO<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item3a.html">Web Sites</a></li>
    <li><a href="item3b.html">Photo Galleries</a></li>
    <li><a href="item3c.html">Videos</a></li>
    <li><a href="item3d.html">Animation</a></li>
    <li><a href="item3e.html">Banner design</a></li>
    <li><a href="item3f.html">Logo design</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li class="drop"><a href="item4.html">LINKS<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item4a.html">Web sites</a></li>
    <li><a href="item4b.html">Free stuff</a></li>
    <li><a href="item4c.html">Fonts</a></li>
    <li><a href="item4d.html">References</a></li>
    <li><a href="item4e.html">Guides</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li><a class="last" href="item5.html" title="Home">HOME</a></li>
    </ul>



    </body>
    </html>

    Так как я не сильно шарю в CSS, может кто-то привести это меню к нормальному виду:
    Т.е. просто убрать слишком большие отступы после линков
    История
    Нормативно-технические акты
    Интеграция в ЕС
    Пожары

    Код (Text):
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="author" content="">

    <title>Untitled 4</title>
    </head>
    <style type="text/css">
    ul.menu1, ul ul {padding:0; margin:0; border:0; list-style-type:none; height:22em; overflow:hidden; background:#f8f8f8; width:14em; text-align:left; color:#fff; border:1px solid #606;}
    ul.menu1 table {border-collapse:collapse; padding:0; margin:0; font-size:1em;}
    ul.menu1 ul {margin-left:1em;}
    ul.menu1 li {text-indent:0.5em;}
    ul.menu1 li.drop {margin-bottom:-2px;}
    ul.menu1 li a,
    ul.menu1 li a:visited {display:block; width:14em; height:2em; line-height:1.9em; text-decoration:none; color:#606;}
    ul.menu1 li a.last,
    ul.menu1 li a.last:visited {display:block; width:14em; height:14em; line-height:2em;}
    ul.menu1 li ul {display:none;}

    ul.menu1 li:hover a,
    ul.menu1 li a:hover {border:0; color:#00c; font-weight:bold;}
    ul.menu1 li:hover ul,
    ul.menu1 li a:hover ul {display:block; height:12em; width:12em; margin-top:-1px; background:#def; border:1px solid #000;}
    ul.menu1 li:hover ul li a,
    ul.menu1 li a:hover ul li a {height:2em; background:#def; color:#00c; font-weight:normal;}
    ul.menu1 li:hover ul li:hover a,
    ul.menu1 li a:hover ul li a:hover {background:#00c; color:#fff;}

    </style>

    <body>
    <ul class="menu1">
    <li class="drop"><a href="item1.html">О службе ГЗ и ЧС<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item1a.html">Руководство</a></li>
    <li><a href="item1b.html">История</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li class="drop"><a href="item2.html">Законадательство<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item2a.html">Нормативные акты</a></li>
    <li><a href="item2b.html">Акты службы</a></li>
    <li><a href="item2c.html">Нормативно-технические акты</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li class="drop"><a href="item3.html">Наша деятельность<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item3a.html">Деятельность подразделений</a></li>
    <li><a href="item3b.html">Платные услуги</a></li>
    <li><a href="item3c.html">Международная деятельность</a></li>
    <li><a href="item3d.html">События</a></li>
    <li><a href="item3e.html">Интеграция в ЕС</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    <li class="drop"><a href="item4.html">Чрезвучайные ситуации<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
    <ul>
    <li><a href="item4a.html">Классификатор</a></li>
    <li><a href="item4b.html">Статические данные</a></li>
    <li><a href="item4c.html">Пожары</a></li>
    </ul>
    </td></tr></table><!--[if lte IE 6]></a><![endif]-->
    </li>
    </ul>


    </body>
    </html>
     
Загрузка...

Поделиться этой страницей