Question

我目前正在为一个家庭成员制作一个网站，但是我对html和css相对较新，而且我很难在页面上正确定位项目。

我尝试过多次使用display重写我的CSS：inline-block或尝试使用表格，但我似乎总是遇到问题。

我需要的是那些具有该主题知识的人，他们会以最好的方式为我提供建议和指导。

我将在下面添加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;
}

再次感谢您提供任何建议和帮助，对不起，如果这个问题被严重提交，我真的很想解决这个问题。

Answer 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作为lego。如果你在你的4块尺寸标志上放了一些东西，它应该完美地保留在那里，如果没有检查尺寸或你的路线。

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

关于CSS定位的建议

1 个答案: