Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old February 14th, 2006, 06:42 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default shorting CSS styles

Code:
.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
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
Reply With Quote
  #2 (permalink)  
Old February 14th, 2006, 07:54 AM
Registered User
 
Join Date: Feb 2006
Location: London, London, United Kingdom.
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 With Quote
  #3 (permalink)  
Old February 14th, 2006, 08:28 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

what would that replace?

www.crmpicco.co.uk
Reply With Quote
  #4 (permalink)  
Old February 14th, 2006, 08:53 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

Code:
.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 With Quote
  #5 (permalink)  
Old February 14th, 2006, 09:09 AM
Registered User
 
Join Date: Feb 2006
Location: London, London, United Kingdom.
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 With Quote
  #6 (permalink)  
Old February 14th, 2006, 09:17 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

thanks Kong, superb!
heres my code now:
Code:
<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 With Quote
  #7 (permalink)  
Old February 20th, 2006, 11:33 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

Code:
#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 With Quote
  #8 (permalink)  
Old February 20th, 2006, 12:12 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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

Code:
#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 With Quote
  #9 (permalink)  
Old February 20th, 2006, 12:22 PM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
trouble changing css styles with javascript donrafeal7 Javascript 4 October 23rd, 2006 11:30 AM
db-driven css styles? lancer ASP.NET 2.0 Basics 1 July 16th, 2006 11:51 PM
Styles.CSS in ASP.NET rajen CSS Cascading Style Sheets 2 July 22nd, 2005 04:54 PM
Css styles in mx Adam H-W Dreamweaver (all versions) 4 December 19th, 2003 01:25 PM



All times are GMT -4. The time now is 01:56 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.