Help with dreamweaver templates

Amp34 · 19 Dec 2006 at 23:33

I am trying to create a site on dreamweaver but am having difficulties getting it to look the way I want. I want a template to start with so the title and other bits and pieces look the same on each page. This is what I want it to look like (bit basic but the general idea is there):

So the jist of it is the title and the standard writing area will be the same on each page but the three editable regions in the middle will be (mainly) different on each page with different writing and bits in them depending on the page.

The problem I have is that I can't get the 3 editable regions to be seperate and they need to be seperate (meaning i can't just use tables) as the 3 regions will change sizes depending on the page. I have tried using div tags but they go right the way across the page so I can't stick the three next to each other.

So is it possible for someone to give me a bit of guidence as to how I can stick 3 editable regions next to each other, or quickly make a basic template and let me know how you did it?

Thanks

Amp34 · 20 Dec 2006 at 12:24

Ok thanks guys time to go away and learn a bit then, the links seem a pretty good starting point. Is it ok to post the template once I have done it so you guys can have a look over it?

Amp34 · 23 Dec 2006 at 21:23

So what is the standard width that most people use to do their websites? I know it used to be 800px but is there a larger standard width now?

I have fnally got some time to actually sit down and wade through the css so i'll be posting a layout with nasty looking colours very shortly for a few pointers.

Amp34 · 23 Dec 2006 at 22:33

Ok so here is a peliminary version of my site, with just the columns etc in approximate positions. The only problem I have is that in IE7 the left hand column doesnt show up, it works fine in firefox (I dont know about IE6). can someone give me a few pointers, thanks.

CSS

Code:

body {
  min-width: 550px;
  max-width: 1000px;
  background-color: pink;
}
#header {
  clear: both;
  background-color:#666666;
}
#container {
  padding-left: 200px;
  padding-right: 150px;
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
  background-color:teal;
}
#left {
  width: 200px;
  right: 200px;
  margin-left: -100%;
  background-color:#FF00FF;
}
#right {
  width: 150px;
  margin-right: -150px;
  background-color:#00FFFF;
}
#footer {
  clear: both;
  background-color:#666666;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;
}

HTML

Code:

<!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>
<link rel="stylesheet" type="text/css" href="site.css" />
</head>

<body>
<div id="header">
  <div align="center">Header</div>
</div>

<div id="container">
  <div id="center" class="column">
    <div align="center">
      <p>Centre</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="left" class="column">
    <div align="center">
      <p>Left</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="right" class="column">
    <div align="center">
      <p>Right</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
</div>

<div id="footer">
  <div align="center">Footer</div>
</div>
</body>
</html>

And what it looks like uploaded (sorry about the bad colours, they wont stay that way.

)

And thanks joeyjojo again for the links, they were excellent.

Amp34 · 26 Dec 2006 at 22:49

Thanks joey but your example doesnt seen to work properly in IE7. The header gets covered over by the 3 regions when it is more than one line. Same with firefox. Is there any way round it? Or a way to fix my example in IE7?

Sorry to be a pain

Amp34 · 28 Dec 2006 at 00:00

Ok I have done some more faffing around with the template for my site but I still have a couple of problems.

http://www.games-system.co.uk/test/

The first is that the left section still doesn't show in IE7 and the second is again the left section doesn't join fluidly with the middle section in FF. This is using my original code as I still can't get the header on joeyjojos' code to be more than 1 line in either FF or IE7

CSS

Code:

body {
  min-width: 750px;
  max-width: 1000px;
  background-color:#CCCCCC;
}
#container {
  padding-left: 167px;
  padding-right: 150px;
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
  border-style: solid;
  border-width: 2px;
  border-color: #333333;
}
#left {
  width: 160px;
  right: 167px;
  margin-left: -100%;
  border-style: solid;
  border-width: 2px;
  border-right-width: 0px;
  border-color: #333333;
}
#right {
  width: 144px;
  margin-right: -150px;
  border-style: solid;
  border-width: 2px;
  border-left-width: 0px;
  border-color: #333333;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color:#333333;
  text-align:center;
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;
}

Any help would be greatly appreciated, hopefully once I have this sorted the rest should be easy.

Edit: I have sorted the second issue out but am still having problems with the IE7 issue. (changed the CSS code to show this)