simple question, simple answer?

jgprather
Jr. Member

Posts: 32

I'm a llama!

« on: August 01, 2007, 04:00:52 AM »

Hi everyone:

I'm working Dreamweaver 8. I want to experiment with some designs for my site. I came across this site and like the way the middle is white all the way across against the black background. I know how to change the background color in page properties in DW, but how do I make the middle a different color all the way across?

Here is the site I'm referring to:
http://www.powers-design.com/

Thanks!! Undecided


	Report to moderator Logged

Menard
Key Keeper
Veteran

Posts: 965

Re: simple question, simple answer?

« Reply #1 on: August 01, 2007, 04:14:11 PM »

Well, I was kind of hoping that someone more qualified than me would answer this.

I am not familiar with Dreamweaver, nor with your ability with HTML.

The site you pointed out, other than the horrible use of JavaScripts, is simply using a table to provide the white against black.

You can try code something along the lines of this:

Code:

Yeah, it's not pretty. I just hacked it together as an example.

*Note that all of the tags are included in that code. So don't go and just copy and paste it into your HTML or it will mess things up.


	Report to moderator Logged

Free Backlinks
Zhorkow's CargoShip
Nickel Paperback

Queen Bee
Mother of All
Administrator
Veteran

Posts: 2 624

Buzz, buzz!

Re: simple question, simple answer?

« Reply #2 on: August 01, 2007, 07:50:42 PM »

The designer of Powers Design set up a table with 5 rows to incorporate their layout, and used spacers (blank images that are usually 1x1px each, with width and height modified to needs) to control the height of the top and bottom cells (the blank black areas.) The two black cells directly outside of the white cell were used for the logo and content links, as well as the copyright/author notice on the bottom.

This is fairly simple and can be done with coding similar to the one presented by Menard:

Quote

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/images/spacer.gif" width="500" height="205" border="0"></td>
</tr>
<tr>
<td><div align="center"><font color="#FFFFFF">Logo and links here</font></div></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Remove the br tags and insert site content images etc
here... <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<br> <br> <br> <br> <br> <br> </td>
</tr>
<tr>
<td><div align="center"><font color="#FFFFFF">Copyright statement here</font></div></td>
</tr>
<tr>
<td><img src="/images/spacer.gif" width="500" height="49" border="0"></td>
</tr>
</table>
</body>
</html>

The better solution would be to use CSS, but since you're using Dreamweaver this layout can be made available to you with little time investment. Just copy this code into a new Dreamweaver document and you can start modifying it easily. You can do it yourself by simply inserting a table and specifying the amount of rows (5) and width (100%). Then insert spacers, logos, etc, where necessary.


« Last Edit: August 01, 2007, 08:02:05 PM by Tamuril »	Report to moderator Logged

Rachel Powell's Free and Premium SMF Themes and Affordable Wed Design Services

donecweb
Administrator
Veteran

Posts: 1 303

DonecWeb

Re: simple question, simple answer?

« Reply #3 on: August 02, 2007, 03:07:38 AM »

I have been recently experimenting with just such a background and I have an experimental site that uses this CSS code to achieve that kind of background.

Quote

body {
font-family: Arial,Helvetica,sans-serif;
color: black;
font-size: 1em;
line-height: 1.2em;
font-weight: normal;
font-style: normal;
text-align: left;
background-color :#54e977;
}

#leftbox {
background-color : white;
background-image : url('png/greengradleft.png');
border-bottom-style : none;
border-left-style : none;
border-right-style : none;
border-top-style : none;
height : 1600px;
margin-bottom : 0px;
margin-left : 10px;
margin-right : 0px;
margin-top : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
position : absolute;
top : 0em;
width : 200px;
}

#middlebox {
background-color : white;
border-bottom-style : none;
border-left-style : none;
border-right-style : none;
border-top-style : none;
height : 1600px;
left : 200px;
margin-bottom : 0px;
margin-top : 0em;
overflow : auto;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
position : absolute;
right : 200px;
top : 0px;
z-index : 1;
}

.content {
margin-top : -50px;
}

#rightbox {
background-color : white;
background-image : url('png/greengradright.png');
border-bottom-style : none;
border-left-style : none;
border-right-style : none;
border-top-style : none;
height : 1600px;
margin-bottom : 0px;
margin-left : 0px;
margin-right : 20px;
margin-top : 0px;
position : absolute;
right : 0px;
top : 0em;
width : 200px;
}

If you want to see the site (please ignore the menu box as I don't like it) you can see it at dbws[dot]info/test/donecweb[dot]dbws[dot]info/index.php
I don't want spiders going to that page so I used the [dot] to break the address and avoid a link.
The problem with this method is it requires the site to have a set height this one is 1600 pixels. If the height is not set it breaks the layout depending on how much content there is.


	Report to moderator Logged

DonEc Web

Links and accurate information provide the best answer, while garbage in provides garbage out.

johnhask
Contributor
Full Member

Posts: 182

Re: simple question, simple answer?

« Reply #4 on: August 04, 2007, 04:59:52 PM »

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="table-content">
<tr>
<td><p>Ut enim ad minim veniam, excepteur sint occaecat eu fugiat nulla pariatur. Duis aute irure dolor qui officia deserunt sed do eiusmod tempor incididunt. Mollit anim id est laborum.</p>
<p>Velit esse cillum dolore in reprehenderit in voluptate lorem ipsum dolor sit amet. Ut labore et dolore magna aliqua. Eu fugiat nulla pariatur.</p></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>