PDA

View Full Version : How can I simplify this?



957
Apr 8th, 2010, 04:29 PM
a { cursor: crosshair; display: block; }
body { background-color: #7A5015; }
a:link { color: #000000; }
a:visited { color: #191816; }
div:hover { border-color: #B38103; }
table { border-style: groove; border-width: 5px; border-color: #1A1A1A; background: #000000; }
a:hover { color: #B38103; }
form { text-align: center; }
div { overflow: scroll; height: 120px; width: 120px; }

<!--TOGGLE-->
div.panel1,h4.flip1 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel1 { display:none; }

div.panel2,h4.flip2 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel2 { display:none; }

div.panel3,h4.flip3 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel3 { display:none; }

div.panel4,h4.flip4 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel4 { display:none; }

div.panel5,h4.flip5 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel5 { display:none; }

div.panel6,h4.flip6 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel6 { display:none; }

div.panel7,h4.flip7 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel7 { display:none; }

div.panel8,h4.flip8 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel8 { display:none; }

div.panel9,h4.flip9 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel9 { display:none; }

div.panel10,h4.flip10 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel10 { display:none; }

div.panel11,h4.flip11 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel11 { display:none; }

div.panel12,h4.flip12 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel12 { display:none; }

div.panel13,h4.flip13 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel13 { display:none; }

div.panel14,h4.flip14 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel14 { display:none; }

div.panel15,h4.flip15 { width:120px; margin:0px; padding:5px; background: #7A5015; text-align:center; border:groove 3px #1A1A1A; }
div.panel15 { display:none; }
<!--STOP TOGGLE-->

abduraooft
Apr 8th, 2010, 05:28 PM
You may learn the trick from http://www.htmldog.com/guides/cssintermediate/grouping/

PS: Please edit your post and add
][/COLOR] tags around the code. Thanks.

VIPStephan
Apr 8th, 2010, 05:48 PM
You could assign a general class to each panel (like, uhm let me think – “panel”, for example) and then write one CSS rule only that applies to all these panels.

Example:


<div class="panel" id="panel1"></div>
<div class="panel" id="panel2"></div>
<div class="panel" id="panel3"></div>



.panel {width: 50px;} /* applies to all elements with that class */
#panel3 {with: 100px;} /* overrides former style */


Also, you can apply more than one class to an element if you prefer:


<div class="panel p1"></div>
<div class="panel p2"></div>
<div class="panel p3"></div>



.panel {color: red;}
.p1 {color: green;}

957
Apr 8th, 2010, 08:21 PM
thanks vip