Help with dreamweaver templates

Amp34

Amp34

Amp34

Caporegime
Joined
25 Jul 2005
Posts
28,851
Location
Canada
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):

untitledee7.jpg


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 :)
 
sorry was posting in wrong bit,
but on this topic try using CSS much better than dreamwevers rubbish positioning,
yes CSS is a bit harder to learn but it gives you total control and you will know what is in your code not like the crap dreamweaver adds
 
Last edited:
hargi said:
sorry was posting in wrong bit,
but on this topic try using CSS much better than dreamwevers rubbish positioning,
yes CSS is a bit harder to learn but it gives you total control and you will know what is in your code not like the crap dreamweaver adds
Click to expand...

i used to work with a guy who didn't care. it was 'company policy' (it wasn't, he was just too lazy to learn CSS) to use dreamweaver templates and javascript to change styles. ugh.

but yeah, CSS will give you complete control over what you see in each browser (apart from IE6...it's just luck of the draw there :p) joey posted some good links. give them a read - easy to learn, difficult to master
 
yeah i mean i was one that belived in dreamweaver at uni and that and never saw the point of CSS, but once i used it i havent gone back to dreamweaver.
Like Sic says its easy enough to know what you wanna do will CSS but it takes a bit more knowledge to get it right,
but you get a nice feeling when it works and you know its all down to you not the program. well i do anyways
 
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 said:
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? :)
Click to expand...
I'd love to. Just look at hargi's thread for the amount of work I'll do :cool: :D
 
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. :p
 
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. :p )

And thanks joeyjojo again for the links, they were excellent. :)
 
If you want it to be less fluid, more static, a simpler design would be:
Code: 
<body>
<div id="container">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
</body>
Code: 
* {
padding:0;
margin:0;
}
#container {
width:700px;
position:relative;
}
#header {
background-color:#999999;
height:20px;
}
#left {
position:absolute;
top:20px;
left:0;
width:200px;
background-color:pink;
}
#middle {
margin:0 200px;
}
#right {
background-color:green;
width:200px;
position:absolute;
top:20px;
right:0;
}
#footer {
background-color:#999999;
}

Otherwise, nice work :)

Edit: oh no, I missed 1337 post count :eek: Damn!
 
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
 
Last edited:
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. :p

Edit: I have sorted the second issue out but am still having problems with the IE7 issue. (changed the CSS code to show this) :)
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom