[newbie] маленькая проблема в css

0

1

есть небольшой css файл:

.top_menu > a:link,a:visited
{
    text-align:center;
}

.left_menu > a:link,a:visited
{
    text-align:left;
}

...

проблема в том что .top_menu не имеет никакого эффекта а .left_menu воздействует и на свой класс и на класс .top_menu

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.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" href="CSS/menu.css" type="text/css" media="screen" charset="utf-8" />
        <title>Main</title>
        
    </head>
    <body>
    <div class="top_menu">
        <ul>
        <li><a href="main.html">Главная</a></li>
        <li><a href="page1.html">Уроки</a></li>
        <li><a href="page2.html">Задания</a></li>
        <li><a href="page3.html">Физкультура</a></li>
        </ul>
    </div>
    </body>
</html>

Ссылка

←	[php] SPL Type Handling - плюсы/минусы

Посоветуйте бесплатный хостинг

→

а где у вас left_menu в html?

~~ihatetangotheme~~
(04.02.11 17:01:51 MSK)

Ответ на: комментарий от ihatetangotheme 04.02.11 17:01:51 MSK

Походу я не въехал в группировку и наследование, потому что даже <a href=«main.html»>main.html</a></h2> окрашивается...

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="5;url=main.html" />
        <link rel="stylesheet" href="CSS/style.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="CSS/menu.css" type="text/css" media="screen" charset="utf-8" />
        <title>Main</title>
        
    </head>
    <body>
    <div class="left_menu">
        <ul>
        <li><a href="#top">top</a></li>
        <li><a href="#bottom">bottop</a></li>
        </ul>
    </div>
    <div class="base">
    <a name="top" />
    <div class="top_menu">
        <ul>
        <li><a class="button" href="main.html">Лунапарк</a></li>
        <li><a class="button" href="page1.html">Бухло</a></li>
        <li><a class="button" href="page2.html">Девушки</a></li>
        <li><a class="button" href="page3.html">Покер</a></li>
        </ul>
    </div>
    </div>
<h1>Sorry! We have moved!</h1>
<h2>The new URL is: <a href="main.html">main.html</a></h2>
<p>You will be redirected to the new address in five seconds.</p>
<p>If you see this message for more than 5 seconds, please click on the link above!</p>

    <a name="bottom" />
    </body>
</html>

div.top_menu > ul > li > a {text-align:center;}

div.left_menu > ul > li >  a {text-align:left;}

div.top_menu ul,.left_menu ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

div.top_menu > ul > li
{
float:left;
}

div.top_menu > ul > li > a:link,a:visited,.left_menu > ul > li > a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#3366FF;
padding:4px;
text-decoration:none;
}

div.top_menu > ul > li > a:hover,a:active,.left_menu > ul > li > a:hover,a:active
{
background-color:#2952CC;
}

div.left_menu
{
position:fixed;
width:100px;
padding:5px;
border:5px groove #3366FF;
margin:auto;
margin-top:0px;
background-color:gray;
}

~~Andaril~~ ★
(04.02.11 17:10:46 MSK) автор топика

Ответ на: комментарий от Andaril 04.02.11 17:10:46 MSK

во что окрашивается? может из-за

div.top_menu > ul > li > a:hover,a:active,.left_menu > ul > li > a:hover,a:active

,a:active

вообщем что должно быть и что не получается?

~~ihatetangotheme~~
(04.02.11 20:26:46 MSK)

Файрбаг в руки. Скорее всего намутил в селекторах.

xetf ★★
(04.02.11 20:36:13 MSK)

Ответ на: комментарий от ihatetangotheme 04.02.11 20:26:46 MSK

Есть две мениюшки, горизонтальная и вертикальная, хотел совместить их настройки в css так что бы они занимали меньше места. В итоге напортил.

Вот правельный конфиг

div.menu_left > ul, div.menu_top > ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

div.menu_left > ul > li > a {text-align:left;}

div.menu_top > ul > li > a {text-align:center;}

div.menu_top > ul > li {float:left;}

div.menu_left > ul > li > a:link, div.menu_left > ul > li >  a:visited, div.menu_top > ul > li > a:link, div.menu_top > ul > li > a:visited {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#3366FF;
    text-align:center;
    padding:4px;
    text-transform:capitalize;
}

div.menu_left > ul > li > a:hover, a:active, div.menu_top > ul > li > a:hover, a:active {background-color:#2952CC}

div.menu_left {position:fixed;z-index:0;}

div.menu_top {z-index:2;}

кто занает как сделать его еще меньше?

~~Andaril~~ ★
(04.02.11 23:54:19 MSK) автор топика