1

私は過去2日間、ポートフォリオWebサイトのこの問題のトラブルシューティングに費やしましたが、まだ解決策を見つけていません。

ページの基本構造は、ヘッダー、コンテンツのラッパー（ナビゲーションバーとコンテンツdiv）、およびフッターです。問題は、フッターがラッパーdivの中央を通り抜けて、コンテンツがフッターの周りと下を走るようになることです。スクリーンショットを投稿しますが、評判がよくありません。

問題を引き起こしているのはレジュメ情報を含むdivだけのようですが、フッターはナビゲーションバーにのみ対応しています。

コードは以下のとおりです。

追加情報： フッターの位置を固定に設定しようとすると、ページから完全に消えます。また、.wrapper divを削除して、コンテンツdivを使用してみました。また、divの位置を絶対および相対に変更してみました。

HTML

<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='icon' href='/favicon.png' />
<link rel='stylesheet' href='main.css' />
<link rel='stylesheet' href='webfonts.css' />

<title>Kyle Simmonds: Design, Writing and Web</title>

</head>
<body>

<header>
    <!--<a class='headerlogo' href="http://kylesimmonds.com"><h1>Kyle Simmonds</h1></a>-->
    <a href='index.html'>
            <ul>
                <li id='title'>Kyle Simmonds</li>
                <li id='subtitle'>Copywriting, Graphic Design and Web Development</li>
            </ul>
    </a>
</header>

<div class='wrapper'>

<!-- NAVIGATION BAR -->
    <nav>       
            <ul class='firstlevel'>
                <li><a href='index.html'>Home</a></li>
                <li><a href='resume.html'>R&eacute;sum&eacute;</a></li>
                <li><a href='portfolio.html'>Portfolio</a></li>
                <li><a href='blog.html'>Musings</a></li>
                <li><a href='contact.html'><font color='#f00'>Contact Me</font></a>
                    <ul class='secondlevel'>
                        <li>Email: <a href='mailto:kbsimmonds@gmail.com'>kbsimmonds@gmail.com</a></li>
                    </ul>
                </li>
            </ul>
    </nav>

    <div class='content' id='resume'>

        <h2>ABOUT ME</h2>
            <p></p>
<hr />
        <h2>EXPERIENCE</h2>
            <h4>Gulliver's Travel</h4>
            <ul>
                <li id='jobtitle'>Social Media Intern</li>
                <li id='subhead'>January&ndash;August '12</li>
                <li>// Established and managed company's Facebook and Twitter pages</li>
                <li>// Created graphics for emails and promotions</li>
            </ul>

            <h4>TCU Schieffer School of Journalism</h4>
            <ul>
                <li id='jobtitle'>Website Assistant</li>
                <li id='subhead'>August '09&ndash;December '12</li>
                <li>// Uploaded content onto the school's website through HTML and CSS</li>
                <li>// Managed the site by keeping it free of visual and typographical errors</li>
            </ul>

            <h4>TCU Student Activities</h4>
            <ul>
                <li id='jobtitle'>Graphic Designer</li>
                <li id='subhead'>September '10&ndash;December '12</li>
                <li>// Designed posters for campus-wide events</li>
                <li>// Created invitations and printed materials for special events</li>
            </ul>

            <h4>Peaceable Kingdom Retreat for Children</h4>
            <ul>
                <li id='jobtitle'>Summer Staff</li>
                <li id='subhead'>Summer '10&ndash;'11</li>
                <li>// Facilitated activities for campers including high-ropes courses (zip line and rock climbing) and pool activities</li>
                <li>// Ensured a safe and fun environment for campers by being lifeguard, CPR and high-ropes certified</li>
            </ul>

<hr />  
        <h2>SKILLS</h2>
            <ul id='skills'>
                <li>// Advertising</li>
                <li>// Copywriting/editing</li>
                <li>// Graphic Design</li>
                <li>// Photoshop</li>
                <li>// InDesign</li>
                <li>// Illustrator</li>
                <li>// Web Development</li>
                <li>// HTML</li>
                <li>// CSS</li>
                <li>// jQuery</li>
                <li>// Audio/Video Editing</li>
            </ul>

<hr />
        <h2>EDUCATION</h2>
            <h4>Texas Christian University</h4>
            <ul>
                <li id='subhead'>December '12</li>
                <li>// BS Strategic Communication</li>
                <li>// Music Minor</li>
                <li>// Studies in Italian</li>
            </ul>

    </div>
</div>

<footer>
<p>&copy; 2013 Kyle Simmonds. All rights reserved.</p>
</footer>

<script src='jquery-1.8.3.js'></script>
<script src='jquery-ui-1.9.2.custom.min.js'></script>

</body>
</html>

CSS

body{
font-family:'OpenSans', sans-serif;
margin:0 auto;
padding:0px;
width:100%;
height:100%;
}

a, a:hover,a:active,a:visited{
text-decoration:none;
color:#000;
}

header{
width:100%;
height:70px;
background:#000;
margin:0 auto;
padding:0px;
}

    header h1{
        margin:0 0 0 10px;
        }

    header h4{
        font-weight:300;
        margin:10px;
        }

            header ul{
                width:960px;
                margin:0px 0 0 0;
                padding:8px 0 0 50;
                overflow:hidden;
                }

            header li{
                list-style:none;
                display:inline;
                }

                    #title{
                        font-size:36px;
                        color:#fff;
                        }

                    #subtitle{
                        font-size:12px;
                        font-weight:lighter;
                        font-style:italic;
                        color:#ddd;
                        }

.wrapper{
height:100%;
width:960px;
margin:0 auto;
margin-bottom:10px;
padding:0px;
position:relative;
}

    nav{
        height:100%;
        width:300px;
        margin:0 auto;
        float:left;
        padding:10px;
        }

            nav .firstlevel{
                height:100%;
                margin:0px;
                padding:0px;
                display:block;
                border-right:solid 2px #000;
                float:left;
                }

            nav .firstlevel li{
                list-style-type:none;
                font-weight:lighter;
                font-size:16px;
                padding:10px;
                }

                    nav .secondlevel ul{
                        display:inline;
                        }

                    nav .secondlevel li{
                        font-size:12px;
                        margin:0 0 0 -30px;
                        padding:10px;
                        }

    .content{
        height:100%;
        width:600px;
        margin:10px 0 0 50;
        padding:0px;
        position:absolute;
        }

            .content p{
                font-size:12px;
                }

                hr{
                    border:0;
                    height:1px;
                    background:#aaa;
                    }

                    #resume{
                        display:inline;
                        }

                            #resume h2{
                                font-size:16px;
                                color:#aaa;
                                margin-bottom:5px;
                                padding:0;
                                }

                            #resume h4{
                                font-size:14px;
                                color:#444;
                                margin-top:15px;
                                margin-bottom:0;
                                }

                            #resume ul{
                                margin:0 0 0 0px;
                                }

                                    #jobtitle{
                                        font-weight:bold;
                                        font-size:16px;
                                        margin:3px 0 0 0;
                                        }

                                    #subhead{
                                        color:#aaa;
                                        }

                            #resume li{
                                font-size:12px;
                                list-style:none;
                                display:block;
                                margin:0;
                                padding:0;
                                }

footer{
background-color:#000;
height:6%;
width:100%;
margin:0 auto;
margin-bottom:0px;
padding:0px 0 0 0;
position:absolute;
clear:both;
}

    footer p{
        position:relative;
        font-size: 10px;
        color:#fff;
        text-align:right;
        margin:8px 10 0 0;
        }

また、これをより良い質問にするための提案や、より良いコードについての提案があれば、私に知らせてください。助けてくれてありがとう。

4

2 に答える 2

2

さて、私はいくつかの提案があります。ここで、更新されたjsFiddleを確認できます。

http://jsfiddle.net/tf4cq/1/

.content基本的に、絶対に位置付けた理由はありません。サイドバー（ナビゲーションメニュー）をフロートさせたので、コンテンツが左側に正しく整列するようにするにleft-paddingは、サイドバーの幅以上の値を追加するだけです。

フッターが思った場所に収まらない理由は、floatまたはposition: absolute（またはfixed、案件）。

基本的に、CSSファイルを少し更新する必要があります。

body{
    font-family:'Open Sans', sans-serif;
    margin:0 auto;
    padding:0;
    width:100%;
    height:100%;
}

a, a:hover, a:active, a:visited{
    text-decoration:none;
    color:#000;
}

header{
    width:100%;
    height:70px;
    background:#000;
    margin:0 auto;
    padding:0;
}

    header h1{
        margin:0 0 0 10px;
    }

    header h4{
        font-weight:300;
        margin:10px;
    }

    header ul{
        width:960px;
        margin:0;
        padding:8px 0 0 50;
        overflow:hidden;
    }

    header li{
        list-style:none;
        display:inline;
    }

#title{
    font-size:36px;
    color:#fff;
}

#subtitle{
    font-size:12px;
    font-weight:lighter;
    font-style:italic;
    color:#ddd;
}

.wrapper{
    height:100%;
    width:960px;
    margin:0 auto 10px;
    padding:0;
    position:relative;
}

nav{
    height:100%;
    width:300px;
    margin:0 auto;
    float:left;
    padding:10px;
}

    nav .firstlevel{
        height:100%;
        margin:0px;
        padding:0px;
        display:block;
        border-right:solid 2px #000;
        float:left;
    }

    nav .firstlevel li{
        list-style-type:none;
        font-weight:lighter;
        font-size:16px;
        padding:10px;
    }

    nav .secondlevel ul{
        display:inline;
    }

    nav .secondlevel li{
        font-size:12px;
        margin:0 0 0 -30px;
        padding:10px;
    }

.content{
    height:100%;
    width:600px;
    margin:10px;
    padding:0;
    padding-left:300px;
}

    .content p{
        font-size:12px;
    }

hr{
    border:0;
    height:1px;
    background:#aaa;
}

#resume{
}

    #resume h2{
        font-size:16px;
        color:#aaa;
        margin-bottom:5px;
        padding:0;
    }

    #resume h4{
        font-size:14px;
        color:#444;
        margin-top:15px;
        margin-bottom:0;
    }

    #resume ul{
        margin:0 0 0 0px;
    }

    #resume li{
        font-size:12px;
        list-style:none;
        display:block;
        margin:0;
        padding:0;
    }

#jobtitle{
    font-weight:bold;
    font-size:16px;
    margin:3px 0 0 0;
}

#subhead{
    color:#aaa;
}

footer{
    background-color:#000;
    height:6%;
    width:100%;
    margin:0 auto;
    margin-bottom:0px;
    padding:0;
    position:absolute;
    clear:both;
}

    footer p{
        position:relative;
        font-size: 10px;
        color:#fff;
        text-align:right;
        margin:8px 10 0 0;
    }
于 2013-01-19T22:52:38.690 に答える
1

私が（ばかげて）気付いたのは、htmlが正しい宣言である場合、DOCTYPEはhtml5と言うことでした。@TiesonT。助けてくれてありがとう。DOCTYPEを変更すると、問題が解決しました。

于 2013-01-20T23:36:28.217 に答える