CODEWITHSUNDEEP
htmlcss
Tom Gullen
Tom Gullen

Reputation: 61775

Better way of writing this CSS so there is not so much repetition of code?

Just wondering if there is a better way to write this CSS? It repeats quite a lot, this is a simple example, does it have to be this way?

<style type="text/css">
    div#leftBlock
    {
        position:absolute;      
        z-index: 1;
    }
    div#rightBlock
    {
        position:absolute;
        z-index: 1;
    }
    div#centerBlock
    {
        position:absolute;
        z-index: 2;
    }
    div#animateblock
    {
        position:absolute;
        z-index: 3;
    }
</style>

...

<div id="leftBlock" onclick="leftClick()"></div>
<div id="rightBlock" onclick="rightClick()"></div>
<div id="centerBlock"  onclick="centerClick()"></div>
<div id="animateBlock"></div>

Upvotes: 1

Views: 223

Answers (5)

ScottS
ScottS

Reputation: 72281

This perhaps:

#leftBlock, #rightBlock
{
    position:absolute;      
    z-index: 1;
}
#centerBlock
{
    position:absolute;
    z-index: 2;
}
#animateblock
{
    position:absolute;
    z-index: 3;
}

Edit added this: the most minimalist way would be to code the html like so (drop the ids):

<div class="layout" onclick="leftClick()"></div>
<div class="layout" onclick="rightClick()"></div>
<div class="layout centerBlock" onclick="centerClick()"></div>
<div class="layout animated" ></div>

and the css like so:

.layout {position: absolute; z-index: 1;}
.centerBlock {z-index: 2;}
.animated {z-index: 3;}

But that depends on your needs, as you may need the ids for something else.

Upvotes: 4

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

    div 
    { 
        position:absolute;       
    } 
div#leftBlock, div#rightBlock 
    { 
        z-index: 1; 
    } 
 div#centerBlock   
    {   
         z-index: 2;   
    }   
 div#animateblock 
    { 
        z-index: 3; 
    }

EDIT: just using id's

#leftBlock, #rightBlock, #centerBlock, #animateblock  
{
  position:absolute;
}
#leftBlock, #rightBlock  
{  
   z-index: 1;  
}  
#centerBlock    
{    
   z-index: 2;    
}    
#animateblock  
{  
   z-index: 3;  
}

Upvotes: 0

lucideer
lucideer

Reputation: 3882

Most of the above methods are great (except for the ones that apply style-related class-names) - if you wanted to shorten your HTML a little more (rather than applying both an ID and a class to each <div/>, you could also do:

<div class="something"> </div>
<div class="something"> </div>
<div class="something somename"> </div>
<div class="something somethingrelevant"> </div>
.something{ position:absolute; z-index:1; }
.somename{ z-index:2; }
.somethingrelevant{ z-index:3; }

(the class-names I've added are odd looking because I don't know what these <div/>s you have contain - its recommended that you always use class-names that relate to your content, not to your styles)

Upvotes: 1

Ian Storm Taylor
Ian Storm Taylor

Reputation: 8710

Use a generic block class to apply the positioning, combine the left and right block declarations, and there is no need to say "div" each time when you have unique IDs on each element. (In fact it not only is it not needed, but it will make your CSS slower.)

CSS:

.block { position:absolute; }
#leftBlock, #rightBlock { z-index: 1; }
#centerBlock { z-index: 2; }
#animateblock { z-index: 3; }

And HTML:

<div id="leftBlock" class="block" onclick="leftClick()"></div>
<div id="rightBlock" class="block" onclick="rightClick()"></div>
<div id="centerBlock"  class="block" onclick="centerClick()"></div>
<div id="animateBlock"class="block"></div>

Upvotes: 0

theycallmemorty
theycallmemorty

Reputation: 12962

Use CSS classes. For example: 

.pa { position:absolute; }

div#leftBlock
{   
    z-index: 1;
}
div#rightBlock
{
    z-index: 1;
}
div#centerBlock
{
    z-index: 2;
}
div#animateblock
{
    z-index: 3;
}

Then your html will be

<div id="leftBlock" class="pa" onclick="leftClick()"></div>
<div id="rightBlock" class="pa" onclick="rightClick()"></div>
<div id="centerBlock"  class="pa" onclick="centerClick()"></div>
<div id="animateBlock"class="pa" ></div>

Upvotes: 3

Related Questions