Center page?

hashim · 05-Oct-2005, 06:44 PM #1

I would like to know how to create a page like http://news.yahoo.com/ or http://www.slashfood.com/ where the content is centered and it has whitespace or colors on the sides. What I would like to do is have a white space (#FFFFFF) in the center for my text, buttons, links. Then on the outside have color using (#0A47FF).

Can someone please help?

deepdiver01 · 06-Oct-2005, 12:18 AM #2

You will have to use tables or frames to achieve that.

If you don't know how, let us know and we can point you yo some great free tutorials.

hashim · 06-Oct-2005, 06:53 AM #3

Yes, please, any help you can provide would be great...would cellspacing work at all? Or is that part of tables?

deepdiver01 · 06-Oct-2005, 07:48 AM #4

Hey Hashim.

Cellspacing is for tables.

Here are some links that should get you going.

http://www.w3schools.com/html/html_layout.asp

http://www.w3schools.com/html/tryit....tryhtml_tables

http://codepunk.hardwar.org.uk/ahtml01.htm
Start there and keep going.

http://www.htmlgoodies.com/tutorials/tables/

http://webmonkey.wired.com/webmonkey...ml_cheatsheet/

The list could keep going. All these sites will not only help you with tables, there is an amazing amount of other useful information on all of them.

What you are needing to do is basic HTML. There are literally hundreds of books out there also that can help you.

Have fun.

Deep.

Gibble · 06-Oct-2005, 10:12 AM #5

NO TO TABLES!!! Tables are for displaying data in a tabular format, not for design

Use CSS positioning.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
<style type="text/css">
body {
margin: 0pt;
}
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

#content {
padding: 5px;
margin-left: 215px;
margin-right: 215px;
background-color: #FFFFFF;
}

#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
background-color: #0A47FF;
}

#sidebar-b {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left: 5px;
background-color: #0A47FF;
}

</style>
</head>
<body>
<div id="container">
<div id="sidebar-a">left</div>

<div id="sidebar-b">right</div>

<div id="content">middle</div>
</div>
</body>
</html>

http://www.inknoise.com/experimental/layoutomatic.php

hashim · 09-Oct-2005, 11:00 PM #6

Ok, that is a great idea. Now, the problem is how to get the blue to remain static. I inserted an image only on the left side in the blue, the right side with blue is not as long as the left side. Also, neither is the white part in the middle.

That is the hard part. How to make it look like http://news.yahoo.com. Is this an image or how do they keep all three parts even?

Any thoughts?

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)