0
4

2 に答える 2

2 
#bg_menu { #000;

このcssは正しくありません。私はあなたが意味すると思います：

#bg_menu { background-color: #000;
于 2013-06-08T02:36:25.417 に答える
0

<a>ではなく、それ自体に色宣言を配置する必要があります<li>。

#navigation .menu_li:hover a {color: #000;}

高さの問題に関しては、高さの設定をすべて削除してください。高さの設定は避けてください。問題を引き起こすだけです。より良い代替手段は、lis をに設定display: inline-blockし、行の高さを 54px にすることです。

についてはp、 に変更しspan、画像を に設定しvertical-align: middleます。

編集: 変更の例を次に示します: http://jsfiddle.net/n5VWn/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
    big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
    dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
    canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
    mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        outline: none;
        text-decoration: none;
    }

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; overflow: hidden;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }


    @charset "UTF-8";
    /**
     * Cascading Style Sheet - CSS
     */

    /*Formating the navigation menu, it's same on all pages, changing only the active menu item. We also have the
    formatting of the base that will receive the contents of the pages.*/

    html, body {
        font-family: "Carrois Gothic", sans-serif; color: #444; background: #EEEBEB; font-size: 16px; height: 100%;
        /*Browser webkit font fix*/
        -webkit-text-size-adjust: none;
        /*improve the readability of the text avoiding aliasing in the fonts.*/
        -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased; font-smoothing: antialiased;
    }

    .bg { float: left; min-width: 1024px; width: 100%; }

    #bg_menu { #000; background: url('../img/bg_header.png') repeat-x; }

    #bg_content { min-height: 100%; height: auto; background: url('../img/dotted.jpg') repeat-x;
        box-shadow: inset  4px 6px 30px #969696; }

    .menu_content {margin: 0 auto; width: 1000px; color: #FFF; }

    .content { position: relative; width: 1000px; height: 300px; margin: 30px auto; border-radius: 4px;
        background-color: #FFF; box-shadow: 2px 2px 5px #A5A8AB; }

    .wrapper_navigation { float: left;  }

    .wrapper_options {  float: right; display: table; padding: 0 6px 0 6px; margin: 7px 12px 0 2px; }
    .wrapper_options p, .wrapper_options img { display: table-cell; vertical-align: middle;}

    .menu_list { display: table; text-align: center; vertical-align: middle; }

    .menu_li { display: inline-block; line-height: 54px; padding: 0 14px 0 14px; font-weight: bold; font-size: 90%;  }

    #li_option { padding: 2px; }

    #adminPhoto { }

    #adminName {  max-width: 200px; }

    .menu_li a { color: #FFF; }

    #navigation .menu_li:hover a {color: #000;}

    #navigation .menu_li:hover, .wrapper_options:hover { background-color:#FFF; color: #000;
        box-shadow: inset 0px 2px 2px #969696; }

</style>
</head>
<body>

<div id="bg_menu" class="bg">
            <header class="menu_content">
                <nav id="menu">
                    <div class="wrapper_navigation">
                        <ul id="navigation" class="menu_list">
                            <li class="menu_li"><a href="#">Veículos</a>

                            </li>
                            <li class="menu_li"><a href="#">Administração</a>

                            </li>
                            <li class="menu_li"><a href="#">Newsletter</a>

                            </li>
                            <li class="menu_li"><a href="#">Estatísticas</a>

                            </li>
                            <li class="menu_li"><a href="#">Manutenção</a>

                            </li>
                        </ul>
                    </div>
                    <div class="wrapper_options">

                                <img id="adminPhoto" src="${admin.img}" width="40px" height="40px" alt="Foto do Administrador" />
                                <p id="adminName">${admin.fullName}</p>

                    </div>
                </nav>
            </header>
        </div>

        <div id="bg_content" class="bg">
            <div class="content">

            </div>

        </div>

</body>
</html>
于 2013-06-08T02:54:55.300 に答える