Domanda

I am currently producing a website for a family member, however I am relatively new to html and css and I'm having a lot of difficulty in getting items to be positioned correctly on the page.

I have tried redoing all my CSS many times using display: inline-block or trying to use tables but I always seem to run into problems.

What I need is people with knowledge in the subject that cna give me advice and pointers in the best way to do what I need.

I will include the css and html source code below and a screenshot of what it looks like when run through google chrome. I would like to thank anyone who gives any help or advice.

Here is a link to the image (just below), sorry about the bad editing. Currently the top contact area bit is too far down, the main text area has fallen below the navigation bar and finally the bottom BHA logo has escaped the page.

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 Code

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

Again thank you for any advice and help, and sorry if this question was badly submitted I just really am struggling with this.

È stato utile?

Soluzione

I'd try to give some width to my divs. If your entire page is 800 px then;

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

Imagine css as lego. if you put something on your 4 block size logo, it should stay there perfectly, if not check the size or your alignments.

edit: this is not a solution, just a hint to give you idea about what to do.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top