0
我被要求「修復」一個客戶的舊網站,該網站是由一個設計團隊明確努力瞭解當時新的HTML5 + CSS而於2011年編寫的。這段代碼有很多錯誤,其中大部分我已經能夠修復,像使用在填充CSS菜單時遇到問題
<p> </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(基於客戶端的,有一點我修改的)
<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 & 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>
有一個類中的顯示來電選擇器,這可能是問題的一部分,但我的直覺告訴我,這需要有更多專業知識的人來剖析一切問題。
找出你自己的代碼有什麼問題是一回事,而另一個嘗試分析別人的問題。任何意見將不勝感激:)
也發佈您的標記。 –
會做。謝謝,邁克爾。 – noahtomlin