我已经尝试了一切!我根本无法让我的网站看起来像我想要的那样。
这是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
我似乎无法让红色框具有最小屏幕高度。
答案 0 :(得分:0)
因为CSS中的宽度部分具有#header id但在代码中使用了pageHeader。
答案 1 :(得分:0)
我不完全确定你在这里要求的是什么,页眉和页脚对我来说工作得很好。
至于高度,你是否试图让页脚留在底部,尽管内容很少?尝试谷歌搜索“css粘性页脚”。有几个人在那里玩,并了解他们的工作方式。