Thread: Page Layout

**Karti** · 3 Jan 2011 @ 22.41

Hi all,
I am trying to set out a website for my wife starting from a single page.

I have the following but I cannot see how to get the Divs in line: Any help is greatly appreciated (you can view it on here)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
       <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
        <title>Welcome to Website</title>
        <meta content="Jim" name="author">
        <meta content="Centre the Page" name="description">
        <style type="text/css">
            <--
            a.Style1:link
            {
            color: #FFFFFF;
            }
            a.Style1:visited
            {
            color: #FFFFFF;
            text-decoration: underline;
            }
            a.Style1:active
            {
            color: #FFFFFF;
            text-decoration: underline;
            }
            a.Style1:hover
            {
            color: #2A54C1;
            ext-decoration: underline;
            }
            #main
            {
            width:800px;
            margin:0px auto; /* Right and left margin widths set to "auto" */
            }
            -->
        </style>
    </head>
    <body>
        <div id="main">
            <img style="width: 800px; height: 110px;" alt="" src="images/header.png" align="middle">
            <img style="width: 800px; height: 370px;" alt="" src="images/main_page.png" align="middle">
            <img style="width: 800px; height: 120px;" alt="" src="images/footer.png" align="middle">
            <br>
                <div style="position: absolute; left: 561px; top:  26px; width: 310px; height: 44px;" id="text1" align="left">
                    <font style="font-size: 43px;" color="#97ca54" face="Arial">
                    <b>bling</b>
                    </font>
                    <font style="font-size: 30px;" color="#2a54c1" face="Arial">
                    <b>bookmarks</b>
                    </font>
                </div>
            <div style="position: absolute; left: 142px; top: 18px; width: 315px; height: 23px;" id="text2" align="left">
                <font style="font-size: 15px;" color="#ffffff" face="Arial">
                <b>Once blinged, your page is never forgotten!</b>
                </font>
            </div>
            <div style="position: absolute; left: 642px; top: 138px;  width: 186px; height: 16px; text-decoration: underline;" id="text3"  align="left">
                <font style="font-size: 13px;" color="#000000" face="Arial">
                <b>Help for Web designers</b>
                </font>
            </div>
            <div style="position: absolute; left: 641px; top: 334px;  width: 186px; height: 16px; text-decoration: underline;" id="text4"  align="left">
                <font style="font-size: 13px;" color="#000000" face="Arial">
                <b>Calling all Web designers</b>
                </font>
            </div>
        </div>
    </body>
</html>

I am trying to get the headings to the right to fit into the colour scheme but having no luck. I am using Kompozer on Linux and the issue started when I centred the Div - main

Once again any help greatly appreciated.

Regards

K

**Jason** · 4 Jan 2011 @ 07.34

Could you clarify what you are trying to do here? Are you trying to get the right side of the header to align to the right?

In web dev in-line styles are typically frowned upon. As are nonsense id's like text1/2/3/4. I would encourage you to get your toes wet and attempt this in a code editor instead of relying on some software to put something together for you.

Back to my original question. Could you say what should be where.

Thanks.

**Karti** · 4 Jan 2011 @ 08.35

Jason,

More than happy to look at coding and no doubt the good practices will only come in time. I have attached a screen shot showing what I was trying to do with the complete web page.

Hope that helps.

Many thanks

K

**Jason** · 4 Jan 2011 @ 10.10

Sorry I took so long to get back to you. I usually solve these things a bit more quickly. Really busy with work heh.

Anyway.

HTML Code:

<div id="main">

Should be...

HTML Code:

<div id="main" style="position:relative">

You then need to look at your div's with an id of text1 and text2. If you modify the 'left' CSS attribute you will be able to get them to be exactly where you want them to be.

To explain.

Code:

position:absolute;

The code above places an element exactly where you want it from its parent element. You can the move the element around by specify left / top attributes. Your problem was that you didn't specify what element it should be absolutely positioned from. By default this is the body tag. As your site is centered, if anyone has a browser width larger than 800px your site will appear messed up.

The fix to this is to apply position:relative to your #main div. This means that your elements will be x pixels from the centered element and not from the edge of the browser.

Hope this helps.

**Karti** · 4 Jan 2011 @ 13.41

Jason,

Thanks for getting back. I took a little bit longer to work on removing the in-line CSS and created a separate sheet:

Code:

body{
    font-size:80%;
    font-family:verdana,arial,'sans serif';
    background-color:#FFF000;
    color:#000080;
    min-width: 800px;
    margin:50px 0px; padding:0px;
    text-align:center;
}
#main {
    width:800px;
    margin:0px auto;
}
h1 {font-size:160%;}
h2 {font-size:130%;}
h3 {font-size:110%;}
h4 {font-size:90%;}
a:link {color:#000080;}
a:hover {color:red;}

I then managed to get it all working together.

Code:

<html>
    <head>
        <meta content="text/html; charset=ISO-8859-1"http-equiv="content-type">
        <title>Welcome to Bling Bookmarks</title>
        <meta content="Jim Pearson" name="author">
        <meta content="Learing to Create Web Pages" name="description">
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <div id="main" style="position:relative">
                <img style="width: 800px; height: 110px;" alt="" src="/images/header.png" align="middle">
                <img style="width: 800px; height: 370px;" alt="" src="/images/main_page.png" align="middle">
                <img style="width: 800px; height: 120px;" alt="" src="/images/footer.png" align="middle">
                <br>
            <div style="position: absolute; left: 500px; top: 25px; width: 400px; height: 44px;"id="text1" align="left">
                <h1>
                <b>bling bookmarks</b>
                </h1>
            </div>
            <div style="position: absolute; left: 50px; top: 0px; width: 500px; height: 23px;"id="text2" align="left">
                <h3>
                <b>Once blinged, your page is never forgotten!</b>
                </h3>
            </div>
            <div style="position: absolute; left: 525px; top: 115px; width: 186px; height: 16px;"id="text3" align="left">
                <h3><u>Help for Heroes</u></h3>
                <p>
                    Help for Heroes is an organisation which was formed to
                    help those that have been wounded in Britain's Current Conflicts.
                <br>
                    All of the profits made from the sale of Bling Bookmarks will go to this charity.
                <br>
                <h3><u>Calling all MEN</u></h3>
                    Bling Bookmarks arent just for the Ladies! There are also some designed for Men!
                <br>
                    You will be proud to use your "manly" Bling Bookmark safe in the
                    knowledge that it will take more than a Bling Bookmark to make you less manly!
                </p>
            </div>
            <div style="position: absolute; left: 135px; top: 35px; width: 313px; height: 563px;"id="text7" align="left">
                <h3>
                    <b>bling bookmarks</b>
                </h3>
                <h4>
                    <b>Where all profits from sales go to charity</b>
                </h4>
                <p>
                    Bling Bookmarks are not only pretty! They serve a purpose too! They keep your page safe
                    and secure and help to raise funds for charity.
                    <br>
                    <b><u>ALL Profits</u></b>
                    from the sale of these bookmarks go to charity. The charity I am supporting at this time is Help for Heroes.
                    For 2011 I have set a target to raise &pound;5000.
                    <br>
                    They are easy to use and come in a range of different styles and colours.
                    <br>
                    You need never lose a page again, whether on the beach, on a bench or
                    in the bath! These beautiful bookmarks will hold your page and not mark your book!
                    <br>
                    Each bookmark is handmade and designed by me. They are packaged in zip
                    sealed bags and are ideal as a gift to someone else or even yourself!
                    <br>
                    For each Bling Bookmark you buy, not only are you donating to charity
                    you are also getting a lovely bookmark. Even if you dont read, you will
                    want to start reading just to use the great bookmark!
                </p>
            </div>
            <div style="position: absolute; left: 90px; top: 550px; width: 627px; height: 14px;"id="text8" align="center">
                <h4>
                    Copyright &#0169; 2011  J et J - All Rights Reserved - E-Mail: admin@blingbookmarks.co.uk 
                </h4>
            </div>
            <div style="position: absolute; left: 15px; top: 180px; width: 140px; height: 92px;"id="textMenu" align="left">
                <h4>
                    <a href="./index.html" class="Style1"title="Home">Home</a>
                    <br>
                    <a href="./aboutme.html" class="Style1" title="About Me">About Me</a>
                    <br>
                    <a href="./products.html" class="Style1" title="Products">Products</a>
                    <br>
                    <a href="./hfh.html" class="Style1" title="Help for Heroes">Help for Heroes</a>
                    <br>
                    <a href="./contactme.html" class="Style1" title="Contact Me">Contact Me</a>
                </h4>
            </div>
        </div>
    </body>
</html>

Please comment on the code if you have a moment as I have tried to tidy it up. The site is here but please excuse the garish colours

Is this the best way to manipulate text? as I found it a bit hit and miss when I was moving it?

Once again, many thanks for your time

K

**WelshStew** · 4 Jan 2011 @ 14.15

I would go further with removing the inline CSS. Things like:

Code:

<div style="position: absolute; left: 500px; top: 25px; width: 400px; height: 44px;"id="text1" align="left">

can also be moved into your external CSS file like the below:

Code:

CSS:

.header{position: absolute; left: 500px; top: 25px; width: 400px; height: 44px;}

HTML:

<div class="header">blah blah</div>

**Frinkky** · 4 Jan 2011 @ 14.15

Hi Karti, welcome to WPC.

Wow, that is a bright background there - I'd suggest toning it down a bit, user experience is a big factor in any online endeavour and you don't want to get people reaching for the shades (or worse, the big X in the corner) before they've even read your page.

I took the liberty of quickly knocking up your page in a more desirable format, code-wise, to help you make the move to 'good practices'

The idea is that you can go through the markup and css to see what goes where and how it interoperates.

I did start to comment the css but I don't want to go over stuff you already know, so just holler if something is unclear.

I recommend you get yourself a browser with decent developer tools, like Firefox with the Firebug plugin and/or Chrome. That'll make dissecting code so much easier. As for a code editor, doesn't GEdit come with Linux? Not really familiar, but others here are and can chip in.

Link: Welcome to Bling Bookmarks

**Jason** · 4 Jan 2011 @ 14.45

Great Job Frinkky :D

**Karti** · 4 Jan 2011 @ 15.44

Wow,

Many thanks Jason WelshStew and Frinkky for the assistance that you have given!!

I will look at the work that has been done and post back my completed work after I have made the changes.

Once again many thanks for your assistance

K

**Karti** · 4 Jan 2011 @ 15.47

Frinkky,

By the way I am using Bluefish on Linux as I have (under advisement

from Jason) started using a code editor rather than a WYSIWYG.

Also I would not mind seeing the css sheet that you used so I can relate it to the names and its format.

K