0

私はすべてを試しました！私は自分のウェブサイトを自分の望むように見せることができません。

これがHTMLです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to SilmanServer!</title>
<link href="./main.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="pageHeader"> 
<h1>SilmanServer</h1>
<p>Aaron Silman's Personal Home Server </p>
</div>

<div id="navigation">
    <ol>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./blog.html">Blog</a></li>
        <li><a href="./projects.html">Projects</a></li>
        <li><a href="./about.html">About Me</a></li>
        <li><a href="./contact.html">Contact</a></li>
    </ol>
</div>


<div id="main">

<div>
<h2>What the hell?</h2>
<p>
This the project I embarked on around June of 2012 with an old computer that I had at home. My goal: To transform that old, useless HP Pavilion a6750y into a fully functioning webserver for this website! Along the way I also learned (X)HTML, CSS, Javascript, PHP, MySQL and a bunch of other things needed for designing and developing websites, as well as administrating my own server.
</p>
</div>

<div>
<h2> Why? </h2>
<p>
As mentioned before, I really wanted to learn how to build websites that function both on the client side and server side. I wanted to just play around and learn. So I started learning, beginning with the basics. I will also use this website as documentation, tracking my progress and noting a lot of important steps so if anyone (including myself - in case I forget) wants a guide to setting up a server and learning web design and development they an refer to <a href="./guide_to_the_web.html">this page </a> for a complete, idiot-proof, guide to the web from scratch.
</p>
</div>

</div>

<div id="pageFooter">

<p> This is a footer
</p>
</div>

</div>
</body>
</html>

そしてここにCSSがあります：

/* CSS Document */

/* CSS Reset*/
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* Global Styles */
html{
    background: url(./images/sway.jpg);
    background-attachment: fixed;
    background-repeat::no-repeat;

    height: 100%;
}

body{
    margin: 0 auto;
    padding-left: 0px;
    background: #3ee; /*<-------------- problem here bro */
    font-family:"Times New Roman", Times, serif;
    font-size: 1em;
    color: white;
}


#pageheader, #pageFooter {
    float:left;
    min-width:100%;
} 

/*Header Styles*/

#pageHeader{
    padding: 30px;
    font-size: 3em;
    font-family::"Arial Black", Gadget, sans-serif;
    background-color: #0F6; 
}

#pageHeader p{
    padding: 1px;
    font-size: .5em;
    font-family::"Arial Black", Gadget, sans-serif;
}

/*Body Styles*/

/*Navigation styles */

#navigation{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    float: left;
    background-color: #C09;
    position: inherit;
}

#navigation li{
    float: left;
    padding: 20px;
}

#navigation a:hover{
    color: #91BED4;
}


/* Main Content */

#main{
    min-height: 100%;
    width: 60%;
    margin: 0 auto;
    background:#F00;
    clear: both;
    color: #FFF
}

/* Footer */

#pageFooter{
    height: 150px;
    background: #00F;
    color:#CF0;
    font-size: 2em;
    /*position:fixed;
    bottom:0;*/
}

ご覧のとおり、何が何の影響を受けているかを確認するために、さまざまなセクションを色分けしています。何らかの理由で、ナビゲーションdivの色が表示されず、代わりにボディの色を帯びています。このページには、画面全体に広がるヘッダーとフッター、および画面サイズの最小の高さを持つメインコンテンツブロックが必要ですが、最小の高さの指定は機能しません。

これを修正するにはどうすればよいですか？私がやろうとしていることのためのいくつかの有用なテクニックは何ですか？私はCSSを初めて使用するので、アドバイスは役に立ちます。

ウェブサイトは次のようになります：http：//imgur.com/OIuad

赤いボックスを画面の最小の高さにすることができないようです。

4

2 に答える 2

0

CSSの幅部分には#headeridがありますが、コードではpageHeaderを使用しているためです。

于 2012-08-15T05:58:38.323 に答える
0

ここで何を求めているのか完全にはわかりません。ヘッダーとフッターは幅方向で正常に機能しています。

高さに関しては、コンテンツが少ないにもかかわらずフッターを下に留めようとしていますか？グーグル「cssスティッキーフッター」を試してみてください。そこにはいくつかありますので、それらをいじって、それらがどのように機能するかを学びましょう。

于 2012-08-15T06:15:20.430 に答える