4 replies [Last post]
DARRYLW99
DARRYLW99's picture
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT+1
Joined: 2012-10-09
Posts: 1
Points: 2

I have the following very rudimentary design, but I have no idea how to do it.
It needs to be 900px wide and preferably centred in the middle of the screen. Also, Unfortunately I am designing this for IE7 upwards, so it needs to look good in these browsers.

----------------------------------------------------------------------------------------|
|      LOGO          |                          |      Register for Professionals Forum |
|                    |                          |                                       |
|--------------------|                          |---------------------------------------|
|                                               |WELCOME TEXT                           |
|     WELCOME                                   |X                                      |
|     ABOUT                                     |X                                      |                         
|     OPTION 1                                  |X                                      |                         
|     OPTION 2                                  |X                                      |                         
|     OPTION 3                                  |X                                      |                         
|     OPTION 4                                  |X                                      |                         
|     OPTION 5                                  |---------  --------------------------  |
|     OPTION 6                                  |        |  |   text                 |  |
|     OPTION 7                                  |        |  |   text                 |  |
|     OPTION 8                                  |  IMG   |  |   text                 |  |
|     OPTION 9                                  |        |  |   text                 |  |
|                                               |        |  |   text                 |  |
|                                               |---------  --------------------------  |
|     ----------------------------------------  |-------------------------------------  |
|     |                                      |  ||                                   |  |
|     |                                      |  ||           img                     |  |
|     |           IMG                        |  |-------------------------------------  |
|     |                                      |  |                                       |
|     |                                      |  |-------------------------------------  |
|     |                                      |  ||                                   |  |
|     |                                      |  ||           IMG                     |  |
|     |                                      |  |-------------------------------------  |
|     |                                      |  |------------  -----------  ----------  |
|     ----------------------------------------  |           |  |         |  |        |  |
|                                               | IMG 1     |  |   IMG 2 |  | IMG 3  |  |
|                                               |------------  -----------  ----------  |
|                                               | IMG 3     |                           |
|                                               |           |                           |
|                                               |------------                           |
|                                               |                                       |
-----------------------------------------------------------------------------------------
| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX                               |
| Privacy                                                                               |
| Terms & Conditions                                                                    |
-----------------------------------------------------------------------------------------
 
<----------------------------- 900 pixels Wide ----------------------------------------->

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You will need to expand your

You will need to expand your knowledge base. Go to http://htmldog.com and work through the tutorials there.

That should get you started. We can then help you with the hitches and glitches that you may run into.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 22 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi DARRYLW99, You essentially

Hi DARRYLW99,
You essentially have a 2 column layout with a footer.
There are many ways you could go about this, and lots to learn whichever way you go.
You could start of by generating a layout CSS Layout Generator, then you only need to worry about what is in each column.
Or you could look at a grid system, but that may make your head spin, and it would be better to learn the basics first.

kevin619
kevin619's picture
Offline
Regular
Fremont,CA
Last seen: 8 years 38 weeks ago
Fremont,CA
Timezone: GMT+5
Joined: 2012-02-16
Posts: 24
Points: 28

This guide will attempt to

This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout. I will try my best to explain the concepts behind each step, but a lot of the time other people have already covered these things better than I can. Because of this there will sometimes be links to more information on external sites.

Please use a modern browser such as Opera, Firefox, Google Chrome or Safari for this exercise. Don’t worry though, your site should work in IE at the end of it.
http://www.subcide.com/articles/creating-a-css-layout-from-scratch/

Make sure you check out my>>App Designers Blog<<

SusanGray
SusanGray's picture
Offline
newbie
USA
Last seen: 10 years 4 weeks ago
USA
Timezone: GMT+5
Joined: 2012-12-21
Posts: 7
Points: 7

Creating a CSS layout from

Creating a CSS layout from scratch

.article #content h1, .articles #content h1 {
color: #F18300;
font-size: 24px;
font-weight: normal;
line-height: 30px;
margin: 0 0 10px;
padding: 0;
}
.articles #content h1 {
font-size: 18px;
line-height: 20px;
}