填充CSS菜单时遇到问题

时间:2017-03-31 16:41:37

标签: css html5 menu padding

我被要求"修复"一个客户的旧网站,由一个设计团队在2011年编写,显然很难理解当时新的HTML5 + CSS。这段代码有很多问题,而且大部分内容我已经能够解决,比如使用

<p>&nbsp;</p>

换行。我甚至不开玩笑。

无论如何,我被要求做的一件事就是扩展网站的文本容器和菜单,并拉出菜单的实际文本以适应新的宽度,这已经很好了。但是,我在填充菜单文本时遇到了一些麻烦。我在论坛上搜索了一些建议,并尝试了建议的样式代码,但它似乎将菜单文本移出menu.jpg所需的区域。

CSS(这是客户端,所以对他们大喊大叫)

#header_menu_container
/* This is verbatim from the code I am working with.  I seriously have NO IDEA why this selector even exists. */
{


}

#header_menu 
{
    margin: 0;
    display: inline-block;
    list-style: none;
    font-size: 15px;
}

/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}

.no_submenu, .has_submenu
{
    display: block;
    float: left;
    position: relative;
}

.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}

.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}

.has_submenu span{
cursor: pointer;
_cursor: hand;
}

.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}

.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}

.is_submenu li a:hover{
color: #b55239;
}

HTML(基于客户端&#39; s,我的一些修改)

<ul id="header_menu">
                    <li class="no_submenu" style="width: 63px;">
                        <b><a href="./index.html">Home</a></b>
                    </li>
                    <li class="has_submenu" id="who-we-are">
                        <b><span style="width: 103px;">Who We Are</span></b>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./whoweare_janyce-lastman.html">Janyce Lastman</a></b>
                            </li>
                            <li>
                                <b><a href="./whoweare_ziny-kirshenbaum.html">Ziny Kirshenbaum</a></b>
                            </li>
                            <li>
                                <b><a href="./whoweare_tutors.html">Tutors</a></b>
                            </li>
                        </ul>
                    </li>

                    <li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./services_consultant-to-schools.html">Consultant To Schools</a></b>
                            </li>
                            <li>
                                <b><a href="./services_education-consulting-and-case-management.html">Education Consulting And Case Management</a></b>
                            </li>
                            <li>
                                <b><a href="./services_educational-assessments.html">Educational Assessments</a></b>
                            </li>
                            <li>
                                <b><a href="./services_school-placement-consultation.html">School Placement Consultation</a></b>
                            </li>
                            <li>
                                <b><a href="./services_seminars-and-workshops.html">Seminars And Workshops</a></b>
                            </li>
                            <li>
                                <b><a href="./services_test-tips-support.html">Test Tips Support</a></b>
                            </li>
                            <li>
                                <b><a href="./services_tutoring.html">Tutoring</a></b>
                            </li>
                        </ul>
                    </li>

                    <li class="has_submenu" id="media-and-press">
                        <span style="width: 113px;"><b>Media &amp; Press</b></span>
                            <ul class="is_submenu" style="display: none;">
                                <li>
                                    <b><a href="./media-and-press_in-the-press.html">In the Press</a></b>
                                </li>
                                <li>
                                    <b><a href="./media-and-press_book-reviews.html">Book Reviews</a></b>
                                </li>
                                <li>
                                    <b><a href="./media-and-press_selected-articles.html">Selected Articles</a></b>
                                </li>
                                <li>
                                    <b><a href="./media-and-press_interesting-links.html">Interesting Links</a></b>
                                </li>
                            </ul>
                    </li>
                    <li class="no_submenu" style="width: 53px;">
                        <a href="./faq.html"><b>FAQ</b></a>
                    </li>

                    <li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./testimonials_ttg-tutors.html">Testimonials for TTG Tutors</a></b>
                            </li>
                            <li>
                                <b><a href="./testimonials_janyce-lastman.html">Testimonials for Janyce Lastman</a></b>
                            </li> 
                        </ul>
                    </li>     

                    <li class="has_submenu" id="contact-us">
                    <span style="width: 70px;"><b>Contact</b></span>
                        <ul class="is_submenu" style="display: none;">
                            <li>
                                <b><a href="./contactus_contact-info.html">Contact Info</a></b>
                            </li>
                            <li>
                                <b><a href="./contactus_employment-opportunities.html">Employment Opportunities</a></b>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

在类选择器中有一个显示调用,这可能是问题的一部分,但我的直觉告诉我,这需要有更多专业知识的人来剖析其中的所有错误。

找出自己代码的错误是一回事,而另一个问题是尝试分析别人的错误。任何建议将不胜感激:)

1 个答案:

答案 0 :(得分:0)

因此,再次回顾一下代码,我想我已经找到了问题。

原始作者不是在CSS中添加填充,而是在HTML中为每个菜单添加一个数字宽度,例如

<span style="width: 73px;"><b>Services</b></span>

白痴。

我会尝试在样式表中正确地写一些类似的东西。