2017-03-31 56 views
0

我被要求「修復」一個客戶的舊網站,該網站是由一個設計團隊明確努力瞭解當時新的HTML5 + CSS而於2011年編寫的。這段代碼有很多錯誤,其中大部分我已經能夠修復,像使用在填充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(基於客戶端的,有一點我修改的)

<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> 

有一個類中的顯示來電選擇器,這可能是問題的一部分,但我的直覺告訴我,這需要有更多專業知識的人來剖析一切問題。

找出你自己的代碼有什麼問題是一回事,而另一個嘗試分析別人的問題。任何意見將不勝感激:)

+0

也發佈您的標記。 –

+0

會做。謝謝,邁克爾。 – noahtomlin

回答

0

所以再次回顧代碼,我想我已經找出了問題。

而不是把填充在CSS中,原作者把一個數值範圍在樣式標籤中的HTML 每一個菜單,例如

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

白癡。

我將嘗試正確寫入類似於樣式表的東西。