|
Subject:
|
shorting CSS styles
|
|
Posted By:
|
crmpicco
|
Post Date:
|
2/14/2006 5:42:29 AM
|
.demodiv{width: 750px; height: 100px; position: absolute; left: 100px; bottom: 0px; background-color: <%=minirules%>; z-index: 10; border-color:#000000; border:1}
I read an article recently about shorting CSS styles.
Is there any way to shorten this one above?
Thanks,
Picco
www.crmpicco.co.uk
|
|
Reply By:
|
Kong
|
Reply Date:
|
2/14/2006 6:54:00 AM
|
The CSS shorthand properties are Font, Background, Margin, Padding, Border and List-Style.
The best you could do in the above example would be:
background: #fff;
border: 1px solid #000;
http://www.w3.org/TR/REC-CSS2/about.html#shorthand
|
|
Reply By:
|
crmpicco
|
Reply Date:
|
2/14/2006 7:28:45 AM
|
what would that replace?
www.crmpicco.co.uk
|
|
Reply By:
|
crmpicco
|
Reply Date:
|
2/14/2006 7:53:37 AM
|
.demodiv{width:730px;height:100px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv0{width:730px;height:100px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv2_R{width:730px;height:119px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv2_M{width:730px;height:140px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv3{width:730px;height:185px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv4{width:730px;height:200px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv5{width:730px;height:135px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv6{width:730px;height:130px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.myIframe{width:730px;height:100px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe0{width:730px;height:100px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe2_R{width:730px;height:119px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe2_M{width:730px;height:140px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe3{width:730px;height:185px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe4{width:730px;height:200px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe5{width:730px;height:135px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe6{width:730px;height:130px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
I was also looking at a way to bring this code down in size. Alot of it is repeated, but the height must change. CSS Rookie speaking here :-)
www.crmpicco.co.uk
|
|
Reply By:
|
Kong
|
Reply Date:
|
2/14/2006 8:09:19 AM
|
You have two options in this example.
1. You can group selectors of common styles and then define them again on an individual basis:
.style1, .style2, .style3 {
height:100px;position:absolute;bottom:0px;
}
.style1 {width:10px;)
.style2 {width:20px}
.style3 {width:30px;}
2. You could have a base style and then refer to the base style and the indivdual style in your markup:
CSS
===
.baseStyle {
height:100px;position:absolute;bottom:0px;
}
.style1 {width:10px;)
.style2 {width:20px}
.style3 {width:30px;}
Markup
======
<div class="baseStyle style1">
|
|
Reply By:
|
crmpicco
|
Reply Date:
|
2/14/2006 8:17:45 AM
|
thanks Kong, superb!
heres my code now:
<style type="text/css">
<!--
.demodiv,.demodiv0,.demodiv2_R,.demodiv2_M,.demodiv3,.demodiv4,.demodiv5,.demodiv6{width:730px;height:100px;position:absolute;bottom:0px;left:3%;background-color:<%=minirules%>;z-index:10;border-color:<%=headFntCol%>;border:1}
.demodiv2_R {height: 119px;}
.demodiv2_M {height:140px;}
.demodiv3 {height:185px;}
.demodiv4 {height:200px;}
.demodiv5 {height:135px;}
.demodiv6 {height:130px;}
.myIframe,.myIframe0,.myIframe2_R,.myIframe2_M,.myIframe3,.myIframe4,.myIframe5,.myIframe6{width:730px;height:100px;position:absolute;bottom:0px;left:3%;filter:"progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";z-index:9;border-color:<%=headFntCol%>;border:1}
.myIframe2_R{height:119px;}
.myIframe2_M{height:140px;}
.myIframe3{height:185px;}
.myIframe4{height:200px;}
.myIframe5{height:135px;}
.myIframe6{height:130px;}
-->
</style>
www.crmpicco.co.uk
|
|
Reply By:
|
crmpicco
|
Reply Date:
|
2/20/2006 10:33:08 AM
|
#button3 {WIDTH:20;Height:20;border: 1 solid <%=headFntCol%>;background-color: #cccccc;font-weight:bold}
#button1,#button2 {WIDTH:20;Height:20;border: 0 solid <%=headFntCol%>;background-color: <%=headerCol%>}
#month {WIDTH:65;Height:20;background-color: <%=tableRowHeader%>}
#year {width: 57; height: 23; background-color: <%=tableRowHeader%>}
.calendar_divsmall{width:180;top:70;left:0;visibility:hidden}
.main_table{border:1; bordercolor="#000000" height="660px" width="700px" cellpadding="0"}
This is a set of CSS styles that i have now, are there any ways to bring down the size of them? Or any shortcuts?
Thanks in Advance.
Picco
www.crmpicco.co.uk
|
|
Reply By:
|
richard.york
|
Reply Date:
|
2/20/2006 11:12:00 AM
|
> This is a set of CSS styles that i have now, are there any ways to bring down the size of them? Or any shortcuts?
You have loads of errors in there. First, let's reformat for the sake of readability. Don't expect help if you can't be bothered to post legible code.
I'm highlighting all the errors in red.
#button3 {
WIDTH: 20;
Height: 20;
border: 1 solid <%=headFntCol%>;
background-color: #cccccc;
font-weight: bold
}
#button1, #button2 {
WIDTH: 20;
Height: 20;
border: 0 solid <%=headFntCol%>;
background-color: <%=headerCol%>
}
#month {
WIDTH: 65;
Height: 20;
background-color: <%=tableRowHeader%>
}
#year {
width: 57;
height: 23;
background-color: <%=tableRowHeader%>
}
calendar_divsmall {
width: 180;
top: 70;
left: 0;
visibility: hidden
}
main_table {
border: 1;
bordercolor="#000000"
height="660px"
width="700px"
cellpadding="0"
}
Let's look at the errors. First any measurement (excluding zero length measurements, and certain properties such as line-height) must have a unit of measurement. Explorer allows unitless measurements against the specifications, but these will not work in any other browser.
So, WIDTH: 20;, should be width: 20px;, I type everything in lowercase for consistency, but that's really a matter of personal preference.
Same with: border: 1 solid <%=headFntCol%>;, it should be border: 1px solid <%=headFntCol%>;
Here's one that can be shortened:
background-color: #cccccc; can be reduced to background: #ccc;.
calendar_divsmall and main_table won't do anything at all. I assume these are class or id names. If so you must prepend the appropriate syntax to make the rule complete, a dot for a class name or a hash for an id name.
Finally, this is completely invalid CSS:
border: 1;
bordercolor="#000000"
height="660px"
width="700px"
cellpadding="0"
border: 1;, isn't the same as the HTML attribute border="1", so this probably isn't what you're going for. You probably want
table {
border: 1px solid #000;
}
td {
border: 1px solid #000;
}
This gives you the same as border="1".
CSS properties cannot be written like HTML attributes, it is always the property name, followed by a colon, followed by the value, followed by a semi-colon. No equals, and most of the time, no quotes.
So height="660px" must be height: 660px;
And then there are no CSS properties with the names "bordercolor" or "cellpadding". There are border-color, border-spacing, and border-collapse.
There also exists software to validate your style sheets:
http://jigsaw.w3.org/css-validator/
HTH!
Regards,
Rich
--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
|
|
Reply By:
|
crmpicco
|
Reply Date:
|
2/20/2006 11:22:19 AM
|
yeah, that really did help Richard. sorry, i hadnt finished coding the last two styles. shouldnt have posted them
But really interesting info, thanks. i've sorted out the mistakes now...
www.crmpicco.co.uk
|
