having created my first div layout template......

[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??

[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

[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

[RonnyK]

It is showing what?

{Not So Boring Northern Ireland} is not a tag, is it? You are calling this as the title....

Ronny

[buntrosgali]

sorry hadnt added link

[buntrosgali]

anyone got any advice?

[Nullig]

Remove the:

style="

from all of the divs in your Stylesheet.

Nullig

[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.

[Nullig]

Set the div#Breadcrumbs

left:54px;

and add a new entry

* html div#Breadcrumbs {
left: 0px;
}

this will be seen by IE.

Nullig

[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;
}

[Dr.CSS]

First thing I would do is remove all the position:absolute calls and see if it falls in line...

[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.