Советы по CSS-позиционированию

В настоящее время я занимаюсь созданием веб-сайта для члена семьи, однако я относительно новичок в области html и css и испытываю большие трудности с правильным размещением элементов на странице.

Я много раз пытался переделать весь свой CSS, используя display: inline-block или пытаясь использовать таблицы, но я всегда сталкиваюсь с проблемами.

Что мне нужно, так это люди со знаниями в этой области, которые могут дать мне совет и советы, чтобы наилучшим образом сделать то, что мне нужно.

Ниже я приведу исходный код css и html и снимок экрана с тем, как он выглядит при запуске через Google Chrome. Я хотел бы поблагодарить любого, кто дает любую помощь или совет.

Вот ссылка на изображение (чуть ниже), извините за плохое редактирование. В настоящее время бит верхней области контакта расположен слишком далеко вниз, основная область текста опустилась ниже панели навигации и, наконец, нижний логотип КНБК покинул страницу.

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;
}

Еще раз спасибо за любые советы и помощь, и извините, если этот вопрос был плохо задан, я просто действительно борюсь с этим.

Источник

1 ответ

Решение

Я бы попытался придать моей ширине некоторую ширину. Если вся ваша страница 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 блока, оно должно остаться там идеально, если не проверить размер или ваши выравнивания.

изменить: это не решение, просто подсказка, чтобы дать вам представление о том, что делать.

Источник
Другие вопросы по тегам