Page 1 of 1
having created my first div layout template......
Posted: Mon Aug 04, 2008 11:30 am
by buntrosgali
in dreamweaver, i have taken the code from dreamweaver and pasted in as a new template.
it is showing now here
My 1st created divs 
now at the moment the different div's styling is also in the template shown here
test div site
i now wanted to remove the styling from the template and put these details in a stylesheet and link the template to it. However it doesnt seem to work when i do this.
here is the css stylesheet i have created to go with them template
/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}
div#master {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
width: 990px;
left: 0px;
top: 0px;
}
div#content {
style="position:absolute;
left:54px;
top:188px;
width:728px;
height:454px;
z-index:2;
background-color: #FFFF00;
layer-background-color: #FFFF00;
border: 1px none #000000;
visibility: visible;
}
div#Layer1 {
style="position:absolute;
width:174px;
height:438px;
z-index:1;
background-color: #339999;
layer-background-color: #339999;
border: 1px none #000000;
}
div#header {
style="position:absolute;
left:52px;
top:14px;
width:729px;
height:142px;
z-index:3;
background-color: #FF0000;
layer-background-color: #FF0000;
border: 1px none #000000;
visibility: visible;
}
div#sponsor {
style="position:absolute;
left:790px;
top:14px;
width:140px;
height:627px;
z-index:4;
background-color: #666666;
layer-background-color: #666666;
border: 1px none #000000;
visibility: visible;
}
div#Breadcrumbs {
style="position:absolute;
left:52px;
top:161px;
width:730px;
height:20px;
z-index:5;
background-color: #999999;
layer-background-color: #999999;
border: 1px none #000000;
visibility: visible;
}
/* END TEXT */
but now im stuck, i thought all i had to do was make the template like this
test div site
but when i do that and create the stylesheet it doesnt work!!!! any advice??
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 11:49 am
by RonnyK
Make sure that :
a)
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
is called in the template.
b) the stylesheet is attached to the template, using the CSS-icon behind the template in the Layout -> Templates list.
Ronny
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 11:58 am
by buntrosgali
ok ive changed the template to this
{* Change lang="en" to the language of your site *}
{sitename} - {Not So Boring Northern Ireland}
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}
its the template minimal already in the cms package.
now i have it linked the stylesheet but it is not showing properly its showing this
link
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 12:02 pm
by RonnyK
It is showing what?
{Not So Boring Northern Ireland} is not a tag, is it? You are calling this as the title....
Ronny
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 12:06 pm
by buntrosgali
sorry hadnt added link
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 4:35 pm
by buntrosgali
anyone got any advice?
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 6:08 pm
by Nullig
Remove the:
style="
from all of the divs in your Stylesheet.
Nullig
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 9:46 pm
by buntrosgali
cool!
that has worked
cheers
ok now 1 last thing my breadcrumbs div is perfect inline in ie but in firefox its out by 54px
the code in the stylesheet for this div is
div#Breadcrumbs {
position:absolute;
left:0px;
top:161px;
width:730px;
height:20px;
z-index:5;
background-color: #999999;
layer-background-color: #999999;
border: 1px none #000000;
visibility: visible;
if i change the left t0 54px then in firefox it is perfectly inline but in explorer it is 54px out of line!! agh browsers!!! lol any suggestions how to keep them both the same?
i cant understand why this div is acting different to the other divs as they are all inside the master div which is telling it to position center and inline.
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 9:54 pm
by Nullig
Set the div#Breadcrumbs
left:54px;
and add a new entry
* html div#Breadcrumbs {
left: 0px;
}
this will be seen by IE.
Nullig
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 10:29 pm
by buntrosgali
have done that
but its still knocking it out of alignment in ie
heres the code now
div#Breadcrumbs {
position:absolute;
left:54px;
top:161px;
width:730px;
height:20px;
z-index:5;
background-color: #999999;
layer-background-color: #999999;
border: 1px none #000000;
visibility: visible;
}
* html div#Breadcrumbs {
left: 0px;
}
Re: having created my first div layout template......
Posted: Mon Aug 04, 2008 11:21 pm
by Dr.CSS
First thing I would do is remove all the position:absolute calls and see if it falls in line...
Re: having created my first div layout template......
Posted: Tue Aug 05, 2008 9:08 am
by buntrosgali
have done that mark but it had moved the breadcrumbs up to the top of the page and its still not inline in firefox.