Joomla Article Styling

Question

Я хочу создать статью, которая будет содержать cv. HTML статьи выглядит следующим образом:

<div class="bio-container"> 
    <div class="bio"> 
     <img src="images/cv-girl.jpg" border="0" alt="cv-girl" title="cv-girl" /> 
     <ul> 
      <li>Position: </li> 
      <li>Physics Lab</li> 
     </ul> 
    </div> 

    <div class="bio"> 
     <h4>Paper blabla</h4> 
     <ul> 
      <li>paper 1</li> 
      <li>paper 2</li> 
      <li>paper 3</li> 
     </ul> 
    </div> 

    <div class="bio"> 
     <h4>Interests</h4> 
     <ul> 
      <li>Interests 1</li> 
      <li>Interests 2</li> 
      <li>Interests 3</li> 
      <li>Interests 4</li> 
     </ul> 
    </div> 

    <div class="bio"> 
     <h4>Lessons</h4> 
     <ol> 
      <li><a href="www.google.com">lesson 1</a></li> 
      <li><a href="www.google.com">lesson 2</a></li> 
      <li><a href="www.google.com">lesson 3</a></li> 
     </ol> 
    </div> 

    <div class="bio"> 
     <h4>Publishings</h4> 
     <div class="public-menu"> 
      <a href="#" onclick="showHide('books');return false;">Books</a> 
      <a href="#" onclick="showHide('magazines');return false;">Magazines</a> 
      <a href="#" onclick="showHide('conf');return false;">Conferences</a> 
      <a href="#" onclick="showHide('show');return false;">Shows</a> 
      <a href="#" onclick="showHide('disc');return false;">Discography</a> 
      <a href="#" onclick="showHide('other');return false;">Other</a> 
     </div> 
     <hr /> 

     <div id="books" class="anchor-hidden"> 
      <h5>Books</h5> 
      <table border="0"> 
       <thead> 
        <tr> 
         <th>A/A</th><th>Title</th><th>Year</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>[1]</td> 
         <td>C.K. Georgiadis, P. Fouliras, and A. Manitsaris, "Mobile Agent Platforms and Personalized Multimedia Services Issues", Chapter in "HANDBOOK OF RESEARCH ON MOBILE MULTIMEDIA, 2nd EDITION", I.K. Ibrahim (Ed.), Information Science Reference Inc (IGI Group), September 2008, ISBN 978-1-60566-046-2, pp. 595-611.</td> 
         <td>2008</td> 
        </tr> 
        <tr> 
         <td>[2]</td> 
         <td>S. Weerawarana, F. Curbera, et al., "Αρχιτεκτονική Πλατφόρμας Υπηρεσιών Ιστού", επιστημονική επιμέλεια ελληνικής έκδοσης: Χρήστος K. Γεωργιάδης, εκδόσεις Κλειδάριθμος, σελ. 455, ISBN 978-960-461-086-0, Αθήνα 2008.</td> 
         <td>2008</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
     <!-- The rest of the divs for the links goes here --> 
    </div> 
</div> 

И CSS является:

.bio img { 
    float: left; 
    margin-right: 20px; 
    border: 1px inset black; 
} 

.bio:nth-child(odd){ 
    background-color: #EAEAEA; 
} 

.public-menu a { 
    margin: 5px; 
} 

.anchor-hidden { 
    /*overflow: hidden;*/ 
    display: none; 
} 

функция JS:

function showHide(shID) { 
    if(shID == "all") { 
     document.getElementById("books").style.display = "block"; 
     document.getElementById("magazines").style.display = "block"; 
     document.getElementById("conf").style.display = "block"; 
     document.getElementById("show").style.display = "block"; 
     document.getElementById("disc").style.display = "block"; 
     document.getElementById("other").style.display = "block"; 
    } 

    else { 
     document.getElementById("books").style.display = "none"; 
     document.getElementById("magazines").style.display = "none"; 
     document.getElementById("conf").style.display = "none"; 
     document.getElementById("show").style.display = "none"; 
     document.getElementById("disc").style.display = "none"; 
     document.getElementById("other").style.display = "none"; 

     document.getElementById(shID).style.display = "block"; 
    } 
} 

шаблон я использую это Ja Edenite

Проблема заключается в том, что когда я нажимаю на книги тег, отображается скрытый div, но он не нажимает f ooter вниз. (Я не могу опубликовать снимок экрана в соответствии с политиками SO, поэтому ...)

Статья переполняет нижний колонтитул. Я пробовал несколько вещей до сих пор (пытаясь исправить это как 7 часов сейчас), и я либо действительно устал после всего этого времени, либо есть то, о чем я не думал.

Любые идеи будут в основном оценены!

Answer 1

Я только что принял ваш код и добавил в свой собственный нижний колонтитул, и это сработало для меня.

это то, что я использовал для колонтитула:

<div id="footer" style="text-align:center; height:50px; background-color:#000; color:#FFF;"> 
    <p>Test Footer</p> 
</div> 

Не уверен, что стиль вы дали сноске, но если вы дали его позиционирование, например position:fixed;, то я бы рекомендовал, чтобы избавиться от этого.

Answer 2

Возможно, это связано с размещением содержимого на сайте. Попробуйте добавить следующее под вашу статью:

<div class="clr"></div> 

Если вы используете редактор, который лишает пустых дивы из вы можете также использовать clearfix как самозагрузки делает:

.bio-container:after { 
    clear: both; 
} 
.bio-container:before, .bio-container:after { 
    display: table; 
    content: ""; 
    line-height: 0; 
} 

Надеется, что это помогает :)