Double Line spacing
Wednesday, December 12th, 2007span style=’line-height: 2em’; [surround content] /span
Archive for the 'CSS, DIV & SPAN' Category
My CSS 2.0
Tuesday, October 16th, 2007Here are some development notes on my approach for CSS 2.0simply nest containers…
build a master styles document per template
align a basic standard relative primary geometry master styles document
next build a content container for each
then also create a second tier of stylesheet(s) for each use case instanc
and to polish do the same specific styles that waterfall beyond the construct for each user
Construct Notes :
/*
CSS Document
Index Page Styles Dislaimer
*/
.copyStyleName
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: Silver;
background-color: Gold;
text-decoration: underline;
~or
#nameof_container
left curly bracket
position: absolute / relative ;
margin-left:auto;
margin-right:auto;
margin-top:0px;
top:***px;
left:***px;
width:***px;
height:***px;
z-index:*;
text-align: left / center ;
background-image:*********);
background-repeat:no-repeat;
line-height:**px;
padding:**px;
right close curly bracket
CSS 2.0
Friday, October 12th, 2007CSS 2.0 Table of Contents
- 1 About the CSS2 Specification
- 2 Introduction to CSS2
- 3 Conformance: Requirements and Recommendations
- 4 CSS2 syntax and basic data types
- 5 Selectors
- 6 Assigning property values, Cascading, and Inheritance
- 7 Media types
- 8 Box model
- 9 Visual formatting model
- 10 Visual formatting model details
- 11 Visual effects
- 12 Generated content, automatic numbering, and lists
- 13 Paged media
- 14 Colors and Backgrounds
- 15 Fonts
- 16 Text
- 17 Tables
- 18 User interface
- 19 Aural style sheets
- Appendix A. A sample style sheet for HTML 4.0
- Appendix B. Changes from CSS1
- Appendix C. Implementation and performance notes for fonts
- Appendix D. The grammar of CSS2
- Appendix E. References
- Appendix F. Property index
- Appendix G. Descriptor index
- Appendix H. Index
Takeaway notes from dedicated topic studies…
- CSS2 has more than 100 different properties
- declare an XML element is either:
{ display: block } or { display: inline } - Consider the visual Formatting model
- Sample of an XML processing instruction:
< ?XML:stylesheet type=”text/css” xhref=”bach.css” mce_href=”bach.css” ?> - When planning the Master Template(s) PLAN YOUR DOCUMENT TREE
- Consider how to consolidate assigning
property values, cascading and inheritance. - Identify Media Types:
-
@import url("loudvoice.css") aural; -
ALSO @media all, aural, braille, embossed, handheld, projection, tty, tv, screen, print { /* style sheet for print goes here */ } - For all media, the term canvas describes
“the space where the formatting structure is rendered.
this is marginalized by the targeted viewport. - After drafting your rough formatting,
EVALUATE YOUR ADDRESSING MODEL :
find ways to optimize and clean your code by using declarations from the selector syntax -
keyword: "string";
- A selector always goes together with a {}-block
- Is your user at a CRT? or hand held at arms length to read a font?
- Real rich measurement declaration examples are:
H1 { margin: 0.5in } /* inches */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points */ -
H4 { font-size: 1pc } /* picas */ -
URL + URN = URI
For example, suppose the following rule:
BODY { background: url("yellow") }is located in a style sheet designated by the URI:
http://www.myorg.org/style/basic.css
The background of the source document’s BODY will be tiled with whatever image is described by the resource designated by the URI
http://www.myorg.org/style/yellow
-
Puseudo class elements are really intriguing and add extra flare to your formatting: like :: or or A:focus:hover { background: white } - SPAN tags can help because they act like “Fictional” tags for yor formatting - thats why they work vs using P tags and the like
- !important declaration is also useful for orverriding..
- Box Model
- Remember to CONSTRAIN Anonymous boxes
- Plan the absolute, float and percentage on your build out
Padding Overview
Thursday, December 21st, 2006this page is a breakdown on padding a Div layer
I use div layers alot like I approach Group Collections or Panels in Window Application Development…
[ CSS padding link ]
SubStyles
Tuesday, January 24th, 2006You can affix a contextual/decendant styles by what “containing” a font style within a specific div tag you instantiate a font header style - you can have h1 display selector header tag in more than 1 way… great for hierarchical layouts!
in CSS all you have to do is add your independent style like so: #divtagname h3
CSS Hacks
Tuesday, December 6th, 2005After many a night wasted on a simple centering fix I found this little trick to be a jem. But recently working with firefox 1.5x this trick wasn’t working right. I always use a page container div tag and each content or menu section has its own div tag. In firefox 1.5x my page content was not positioning correctly.
Simple fix that might be helpful:
min-height: 580px;
_height: auto !important;
height: 580px;
Not exactly sure why this works but now firefox 1.5x and 1.0x work as well as IE. I havn’t tried this in any other browsers yet.
Being a Microsoft bigot I really love all of Microsoft’s products, but I do find IE a real pain. Especially its inconsistencies with CSS.
On a recent development project I needed to ensure that a < div > tag had a minimum height of 100px; but the min-height property of the style attribute on a < div > fails to work in IE. After a bit of work I found this solution. I’ve included the style attribute in the < div > tag but you’ll be keeping this in your stylesheet.
and for DIVs
< div >
< div style=”height:100px; float : right; width : 1px; z-index: -1;”> < /div>
< /div >
