0

我目前正在为一个家庭成员制作一个网站，但是我对 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;
}

再次感谢您的任何建议和帮助，如果这个问题被错误地提交，我很抱歉，我真的很挣扎。

4

1 回答 1

1

我会尝试给我的 div 一些宽度。如果您的整个页面是 800 像素，那么；

.page{your stuff}
.top-div{width:800px; float:left; margin:0 auto;}
.logo{float:left; width:200px;margin:0 auto;}
.toparea{float:left; width:600px; margin:0 auto; }
.sidebar{float:left; width:200px; margin:0 auto;}
.mainpart{float:left; width:600px; margin:0 auto;}
.bottompart{float:left; width:800px; margin:0 auto;}

将 CSS 想象成乐高积木。如果您在 4 块大小的徽标上放了一些东西，它应该完美地留在那里，如果不检查大小或对齐方式。

编辑：这不是一个解决方案，只是一个提示，让您知道该怎么做。

于 2013-08-10T22:32:19.243 回答