1

ナビゲーションバーのボタンに関する現在の問題を修正するために、CSSのすべてのプロパティを変更しようとしていますが、無駄です。

カーソルを合わせると、ボタンがナビゲーションバーの背景の高さを超えます。これは想定外の高さです。

http://www.mohrdevelopment.com

私のHTML：

            <ul class="navigation">
                <li class="current"><a href="index.html"><em class="home"/>Home</b></a></li>
                <li><a href="second.html"><em class="photos"/><b>Photos</b></a></li>
                <li><a href="projects.html"><em class="projects"/><b>Projects</b></a></li>
                <li><a href="about.html"><em class="about"/><b>About</b></a></li>
                <li><a href="contact.html"><em class="contact"/><b>Contact</b></a></li>
            </ul>

私のCSS：

body {
        font-family:sans-serif;
        background: url(images/background3.png);
    }

    .navigation {
        background:#1841c8 url(Navigation/Navigation/nav_background.png);
        height:40px;
        margin-bottom:0px;
        font-size: 0; /*remove whitespace*/
        display:block;
        min-width:625px;
    }

    .navigation li{
        display:inline-block;
        line-height: 40px;
        font-size:16px;
            }

    .navigation li a{
        display:block;
        color:#FFFFFF;
        padding: 11px 5px 15px;
    }

    .navigation li a em{
        height:32px;
        display:inline-block;
        padding: 0 5px 6px 50px;
        font-weight:bold;
        vertical-align: middle;
        background-position: 0 50%;
        font-size:16px;
    }

    .navigation li a:hover{
        color:#00CCFF;
        background: url(Navigation/Navigation/nav_hover.png);
        text-decoration:none;
        padding: 11px 5px 10px;
    }

    .navigation .current a {
        color:#FFFFFF;
        background:url(Navigation/Navigation/nav_hover.png);
        padding-bottom:11px;
    }


    /*Navigation bar icons*/
    .navigation li a em.home {
        background-image: url(Navigation/Icon_images/home.png);
        background-repeat: no-repeat;

    }

    .navigation li a em.photos{
        background-image: url(Navigation/Icon_images/Photo.png);
        background-repeat: no-repeat;
    }


    .navigation li a em.projects{
        background-image: url(Navigation/Icon_images/projects.png);
        background-repeat: no-repeat;
    }


    .navigation li a em.about{
        background-image: url(Navigation/Icon_images/about.png);
        background-repeat: no-repeat;
    }

    .navigation li a em.contact{
        background-image: url(Navigation/Icon_images/Contact.png);
        background-repeat: no-repeat;
    }

    a {
      Color:blue;
      Text-decoration:none;
    }

    h1 {
        background: url(images/Header.png);
        text-indent:-9999px;
        width:1092px;
        height:132px;
        margin:auto;

    }


    .content, aside {
        height:600px;
    }

    .wrap {
          margin:auto;
          width:80%;
          background:yellow;
        }

    .content {
        background:teal;
        float:left;
        width:80%;
        height:auto;
        min-width:500px;
        display:inline;

    }

    aside {
        background:lightblue;
        float:left;
        width:20%;
        min-width:125px;
        display:inline;
    }

    aside ul {
        padding-left:1px;
        list-style:none;
    }


    ul a {
        text-decoration:none;
        color: #666;
    }

    ul a:hover {
        text-decoration:underline;
        color:black;
    }

    .sidebarli {
    }

    li {
        list-style:none;
        margin-bottom:20px;}

    label {
        display: block;
        cursor: pointer;
        color: #292929;
        font-family:sans-serif;
        padding-bottom:8px;
    }

    form ul {padding-left:0px;
    }

    textarea {
        width:400px;
        height:220px;

    }
4

2 に答える 2

1

問題はNavigation/Navigation/nav_hover.png画像にあると思います。背景画像にリピートを適用しています。

使ってください

.navigation li a:hover 
{
    background: url("Navigation/Navigation/nav_hover.png") **no-repeat** scroll 0 0 transparent;
    color: #00CCFF;
    padding: 11px 5px 10px;
    text-decoration: none;
}

style.cssで。

これで問題が解決したかどうか教えてください。

于 2012-07-26T09:38:08.610 に答える
1

A 要素のパディングを調整できます。

.navigation li a {
  padding: 2px 5px;
}

また、「em」タグを閉じる必要があります。開始の「em」タグはありますが、終了の「/em」タグはありません。

于 2012-07-26T09:28:00.963 に答える