【发布时间】：2013-08-11 06:32:19
【问题描述】：
我目前正在为一个家庭成员制作一个网站，但是我对 html 和 css 比较陌生，并且在将项目正确定位在页面上时遇到了很多困难。
我曾多次尝试使用 display: inline-block 或尝试使用表格重做所有 CSS，但我似乎总是遇到问题。
我需要的是具有该主题知识的人，他们可以以最佳方式为我提供建议和指导，以完成我需要的工作。
我将在下面包含 css 和 html 源代码以及通过 google chrome 运行时的屏幕截图。我要感谢任何提供任何帮助或建议的人。
这里是图片的链接（就在下方），抱歉编辑不当。目前顶部接触区域位太低了，正文区域已落到导航栏下方，最后底部 BHA 徽标已脱离页面。
http://s23.postimg.org/uolfw96wb/screenshot_edited.png
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"/>
<meta name="###########" content=""/>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Home</title>
</head>
<body>
<div id="page">
<div class="toparea">
<img src="Client's Logo.png" id="logo"/>
<h1 id="title">Significant Ceremonies by ##########</h1>
<ul>
<li>Tel: ############</li>
<li>E-mail: #######################</li>
</ul>
</div>
<div class="sidearea">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Me</a></li>
<li><a href="">Humanism</a></li>
<li><a href="">Planning</a></li>
<li><a href="">Specialist Areas</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Contact Me</a></li>
</ul>
</div>
<div class="mainarea">
<h2 id="subtitle">Home</h2>
<p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
divine beings." - ###########</p>
<p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to
navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
</div>
<div class="bottomarea">
<ul>
<li>Tel: </li>
<li>E-mail: </li>
</ul>
<img src="BHA logo.jpg" id="bhalogo"/>
</div>
</div>
</body>
</html>
CSS 代码
body
{
background-color: #CCCCCC;
}
#page
{
position: absolute;
left: 25%;
height: 100%;
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #E6F5E6;
font-family: vijaya;
}
#logo
{
float: left;
width: 200px;
height: 220px;
margin-left: 20px;
margin-right: 20px;
}
#title
{
padding-top: 80px;
padding-right: 260px;
text-align: center;
color: #002E00;
}
.toparea ul
{
float: right;
padding-right: 20px;
list-style: none;
}
.sidearea
{
clear: both;
float: left;
}
.sidearea ul
{
list-style-type: none;
}
.sidearea ul li
{
margin-top: 5px;
margin-left: 5px;
margin-bottom: 10px;
margin-right: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
text-align: center;
border-style: solid;
border-radius: 5px 5px 5px 5px;
background-color: #4DB84D;
border-color: #002E00;
font-size: 25px
}
.sidearea ul li a
{
text-decoration: none;
color: black;
}
.mainarea
{
float: left;
margin-left: 80px;
background-color: #EEF8EE;
}
.bottomarea ul
{
clear: both;
float: left;
list-style-type: none;
}
#bhalogo
{
float: right;
width: 150px;
height: 100px;
margin-bottom: 20px;
padding-right: 20px;
}
再次感谢您的任何建议和帮助，如果这个问题被错误地提交，我很抱歉。
【问题讨论】：
-
我建议使用像 Wordpress 这样的 cms 并修改现有主题。应该可以为您节省很多的麻烦...
标签： css css-float positioning displayobject