I have a lot of small layers on my page (70 of them!). They are only small, but as you can imagine, setting the bg colours and text properties for each layer takes up a chunk of code and time. They appear in the same place on the page.
Is it possible to use CSS to style and position all the layers?
i'm not very good at css but i tried ...
<style type = text/css>
DIV {
background-color = #CEC8E3
left: 50px
top: 50 px
width: 100px
height: 20 px
}
..and it didn't quite work. Also if this is possible, there needs to be a heading at the top of each layer, centered, in a larger size of the same font.
any help is greatly appreciated.(untested code)
<style type = "text/css"> <!--
.hello {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {text-align:center;
font-size:1.4em;
}
--></style>
where you have your layer tag use
<div class="hello"><h4>title</h4>layer</div>If you only use the divs for layers you can just use
<style type = "text/css"> <!--
DIV {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {text-align:center;
font-size:1.4em;
}
--></style>
where you have your layer tag use
<div><h4>title</h4>layer</div>i managed to get the STYLE to edit the div tags in a similar way to your second example. However, it changes ALL the divs on the page, whereas i only need it to style the 70 small layers. Is there anyway to reference these, maybe by their Z index? or would it work by adapting your first example ie:
<style type = "text/css"> <!--
.1, .2, .3, .4 --->70 {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {text-align:center;
font-size:1.4em;
}
--></style>
<div class="1"><h4>title</h4>layer1</div>
<div class="2"><h4>title</h4>layer2</div>
<div class="3"><h4>title</h4>layer3</div>
--->
<div class="70"><h4>title</h4>layer70</div>
something similar to this?
Thanks for your timeYou can use the same class for multiple <div>'s...So, something like this...
<style type = "text/css"><!--
.smalllayer {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {
text-align:center;
font-size:1.4em;
}
--></style>
<div class="smalllayer"><h4>title</h4>layer1</div>
<div class="smalllayer"><h4>title</h4>layer2</div>
<div class="smalllayer"><h4>title</h4>layer3</div>
...
<div class="smalllayer"><h4>title</h4>layer70</div>
ristuartThat method is great and works superb. I've just one l'il problem left.
I'm using dreamweaver, and when using this method, it removes the layer from the layers box. Is there a way to keep the layers in the layer box and still use the above method?You could try giving each <div> a unique ID...
Is it possible to use CSS to style and position all the layers?
i'm not very good at css but i tried ...
<style type = text/css>
DIV {
background-color = #CEC8E3
left: 50px
top: 50 px
width: 100px
height: 20 px
}
..and it didn't quite work. Also if this is possible, there needs to be a heading at the top of each layer, centered, in a larger size of the same font.
any help is greatly appreciated.(untested code)
<style type = "text/css"> <!--
.hello {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {text-align:center;
font-size:1.4em;
}
--></style>
where you have your layer tag use
<div class="hello"><h4>title</h4>layer</div>If you only use the divs for layers you can just use
<style type = "text/css"> <!--
DIV {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {text-align:center;
font-size:1.4em;
}
--></style>
where you have your layer tag use
<div><h4>title</h4>layer</div>i managed to get the STYLE to edit the div tags in a similar way to your second example. However, it changes ALL the divs on the page, whereas i only need it to style the 70 small layers. Is there anyway to reference these, maybe by their Z index? or would it work by adapting your first example ie:
<style type = "text/css"> <!--
.1, .2, .3, .4 --->70 {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {text-align:center;
font-size:1.4em;
}
--></style>
<div class="1"><h4>title</h4>layer1</div>
<div class="2"><h4>title</h4>layer2</div>
<div class="3"><h4>title</h4>layer3</div>
--->
<div class="70"><h4>title</h4>layer70</div>
something similar to this?
Thanks for your timeYou can use the same class for multiple <div>'s...So, something like this...
<style type = "text/css"><!--
.smalllayer {
background-color: #CEC8E3;
position:absolute;
left: 50px;
top: 50 px;
width: 100px;
height: 20 px;
}
H4 {
text-align:center;
font-size:1.4em;
}
--></style>
<div class="smalllayer"><h4>title</h4>layer1</div>
<div class="smalllayer"><h4>title</h4>layer2</div>
<div class="smalllayer"><h4>title</h4>layer3</div>
...
<div class="smalllayer"><h4>title</h4>layer70</div>
ristuartThat method is great and works superb. I've just one l'il problem left.
I'm using dreamweaver, and when using this method, it removes the layer from the layers box. Is there a way to keep the layers in the layer box and still use the above method?You could try giving each <div> a unique ID...