css - Joomla 記事のスタイリング

Question

履歴書を含む記事を作成したいです。記事の 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 が表示されますが、フッターが押し下げられないことです。（SOのポリシーによると、スクリーンショットを投稿することはできませんので...）

記事がフッターからはみ出しています。これまでにいくつかのことを試しました (これを修正するのに約 7 時間かかりました)。

どんなアイデアでも大歓迎です！

score 0 · Accepted Answer

私はちょうどあなたのコードを取り、私自身のフッターdivに追加しました、そしてそれは私にとってうまくいきました。

これは私がフッターに使用したものです：

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

フッターにどのようなスタイルを付けたかはわかりませんが、たとえばposition:fixed;、フッターにポジショニングを付けた場合は、これを取り除くことをお勧めします。

score 0 · Accepted Answer

サイトにフローティングコンテンツがあることが原因である可能性があります。記事の下に以下を追加してみてください。

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

空の div を削除するエディターを使用している場合は、bootstrap のように clearfix を使用することもできます。

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

お役に立てれば：）

css - Joomla 記事のスタイリング

2 に答える 2

Related

Reference