Results 1 to 21 of 21

Thread: CSS Hints and Snippets thread!

  1. #1
    Join Date
    May 2005
    Posts
    447

    Default CSS Hints and Snippets thread!

    With permission from Dragonfree, post up good CSS snippets here! Seeing as I don't know CSS, So I can't say any coding, sorry.
    Anyways, just post up CSS things here!
    http://www.december.com/html/spec/color.html
    This site have all the hex values in.
    Last edited by -:Buro-kun Tsubasa:-; 11th February 2006 at 9:21 AM.

  2. #2
    Join Date
    Jan 2004
    Location
    Iceland
    Posts
    4,749

    Default

    Most people use Javascript to do things like affiliate bars with text links that make a button appear above the list when you hover over them, but the fact is that you can do this elegantly with pure CSS.

    For each link, put either both text and an image or, if you want something other than an image to appear on hover, you can wrap it all in a span. Like this:

    Code:
    <a href="blah">Link text <img src="button" alt=""></a>
    Find the containing element for the links you want this effect to apply to - we can just say it's a div called hoverlinks or something - and in your stylesheet, give it a top padding of exactly the height of your link buttons. If the containing element does not already have a position (such as absolute), also give it position:relative. The relevant CSS for the containing element could be something like this:

    Code:
    #hoverlinks {
    position:relative;
    padding-top:31px;
    }
    Now, the magic lies here: using the :hover pseudo-class, you can change much more than just the properties of the link text itself! You can, in fact, make the image disappear completely when normal, and reappear wherever you want it to when the link is hovered over...

    Code:
    #hoverlinks a img {
    height:0;
    width:0;
    }
    Code:
    #hoverlinks a:hover img {
    height:31px;
    width:88px;
    position:absolute;
    top:0;
    left:0;
    }
    Ta-da, magic done. You can also use display:none for the normal and display:inline for the hover, but that will cause the image not to be loaded in some browsers until you actually hover over it, so if you want the image to appear immediately as the user hovers over the link, stick with the height and width. You can, of course, use a similar method with a span.

    Another hint: People also often use Javascript to allow the user to hover over a menu link or the horizontal space beside it, and that would change the background color of a whole box around the link and allow the user to click anywhere within that space in order to activate the link. Well, you can do that with pure CSS, too. Imagining we want to do this with the same menu, we can do it like this:

    Code:
    #hoverlinks a {
    display:block;
    }
    Then you can put padding and whatever else you like on it - even borders if you feel like it. Just make sure that if you have any line breaks in the HTML between the links, you remove them, and if you have the links in list items, give the list items display:inline, like so:

    Code:
    #hoverlinks li {
    display:inline;
    }
    Otherwise the code will mess up in Internet Explorer. With this, however, both effects should work perfectly in all modern browsers.

    A live example of both of these effects can be found here. Just view the source to see the exact CSS used.
    Last edited by Dragonfree; 11th February 2006 at 2:34 PM.

    Chapter 63: Recovery
    The story of an ordinary boy on an impossible quest in a world that isn't as black and white as he always thought it was.
    (rough draft of the remaining chapters finished for NaNoWriMo; to be edited and posted)

    Morphic
    (completed, plus silly extras)
    A few scientists get drunk and start fiddling with gene splicing. Ten years later, they're taking care of eight half-Pokémon kids, each freakier than the next, while a religious fanatic plots to murder them all.

    Lengthy fanfiction reviewing guide / A more condensed version
    Read and I will be very happy for a large number of reasons.

  3. #3
    ZeroMantis Guest

    Default

    A lot of people have a ton of problems positioning with the DIV tag. Usually, they're main problem is getting a DIV table exactly at the center of the page. First:

    Code:
    <style type="text/css">
    	.divclass{
    	padding:0px;
    	position:absolute;
    	left:50%;
    	top:125px;
    	width:200px;
    	height:200px;
    	margin-left:-100px;
    	background-color:#565656;
    	}
    </style>
    This DIV will be exactly in the middle of the page, 125 pixels away from the top of the page. Usually, people think just putting "left:50%;" would work. Setting it to 50% positions the left side of the div to be at the 50% line. The "margin-left:-100px;" fixes this. You can do this with any size DIV, just remember:

    Code:
    margin-left:-(Half of the width)px;
    An example would be a DIV with a 600 pixel width. It's margin-left tag has to be -300 to position it at the center.

    If you play around with the "z-index" tag(tells the browser what layer the div is), you can create a webpage entirely of DIV's and no tables, which is a very common trend nowadays.

  4. #4
    Join Date
    Nov 2006
    Posts
    0

    Default

    Rollover Effects Without Javascript:

    Let's say you have a table composed of images that act as links and you want to have that nifty roll-over effect where the image changes when the mouse hovers over the image, but you don't want to mess with javascript. I played around with opacity filters with CSS and I figured this should work. I've tested this both in IE and FF and work fine.

    Its basically like creating two layers. When the image-link isn't being hovered, the second layer (image) shows on top of the first layer (the background). When you hover over the image, the second layer's opacity is set to "0" which makes it invisible, exposing the background image which would act as the hover image.

    Here's what the HTML would be for a table with one image:

    Code:
    <table>
    <tr>
    <td class="cssrollover" background="yourbackground.gif">
    <a href="http://yourlink.com/">
    <img src="yourimage.gif">
    </a>
    </td>
    </tr>
    </table>
    This is a basic table consisting of one row and one column, therefore there's one box. You can always add more boxes as long as each <td> tag is given the class of "cssrollover" so that it can be triggered.

    I used different options to make sure the opacity change would show up on most browsers, though I've only tested this on IE and FF because I don't have access to other browsers. If anyone can clarify this, I would be grateful.

    Before I do the CSS, let me explain how to use the filters properly. The things in bold you do not change.

    filter:alpha(opacity=value);
    This one's easy, the "value" is basically the opacity percentage. 0 would be invisible, while 100 would be showing it completely. That means if you used a value of 50, it would be half transparent.

    -moz-opacity:value;
    opacity:value;
    -khtml-opacity:value;
    These three work a little differently. The "value" works as a decimal. Once again, a value of 0 would make it invisble. But this time, a value of 1 will make it 100% visible. To make it half-visible, use the value 0.5. It's basically like taking the percentage, and then converting it into its equal decimal form. (ex: 23% would be 0.23)

    The CSS would go something like:

    Code:
    .cssrollover a img {
    	filter:alpha(opacity=100); 
    	-moz-opacity:1; 
    	opacity:1; 
    	-khtml-opacity:1;
    }
    .cssrollover a:hover img {
    	filter:alpha(opacity=0); 
    	-moz-opacity:0; 
    	opacity:0; 
    	-khtml-opacity:0;
    }
    This code basically says:

    If the image isn't being hovered on, it is 100% visible.
    If the image is being hovered on, it is 0% visible.


    So some of you might still be asking how this works as a rollover. Well, if "yourimage.gif" is invisible, it exposes "yourbackground.gif" which is the rollover-image.

    Now now, I know you can easily replace this with a "display:none;" (Though you'd have to set width and heighth values in your table first) or "visibility:hidden", and you are more than able to. It should work exactly the same. The reason I used opacity filters is to show that you can also make the image half-visible if you want to add a graphical effect. If you'd rather go on the display or visibilty route (I prefer visibility because even if the image is invisible, it is still loaded into your browser, unlike the display tag), then use this:

    Code:
    .cssrollover a img {
    	visibility:visible;
    }
    .cssrollover a:hover img {
    	visibility:hidden;
    }
    A lot less work huh?

  5. #5
    Join Date
    May 2006
    Location
    New York, USA
    Posts
    87

    Thumbs up Protip

    Hi guys! I'm just popping in...I'm a web designer with a fairly good knowledge of CSS2, XHTML, and JavaScript. Here are some tips I've picked up over the years:

    • Use CSS. It's that simple. CSS is the new standard in design, and with modern browsers supporting CSS2, you can accomplish almost anything you want as far as design goes, and the pseduo classes (warning: IE does not like these!) can generally accomplish most things that people use to have to use JavaScript for.

    • Learn modern standards. One of the things that bugs me the most about newbies to the field of web design is that they are learning from outdated online resources--instead of learning XHTML, they are learning HTML4, and with that, comes tags that now can be completely replaced with CSS. XHTML and CSS are the way of the future--it's very simple. Your page should look like a big mess of <div>'s (and possibly <table>'s, although you should try to avoid these unless your design is complicated enough to need them). Give each of your <div>'s one id tag and potentially a class name, then put all your styling in an external CSS file. This makes your pages neater, it reduces the amount of time you have to spend styling them (you can group things with CSS; I'm not going to teach beginners how to use it, but you should be able to figure these things out on your own), and as an added bonus, web browsers cache external CSS files, so you have less code in your HTML and your CSS is cached--reducing your server load and speeding up page load times for your users.

    • Don't use JavaScript unless you have to. CSS2 can take care of most beginner's JavaScript needs, and much more elegantly too. However, if you do need to script some things, I recommend using a library like jQuery.

    • Don't use inline CSS, use CSS classes. Define your bolded text in your external CSS file as .bold { font-weight: bold; }, or something similar, then when you want something bolded, use class="bold".

    • XHTML. It's the proper way to code. You can learn all about it here, including its differences from HTML4 and its benefits.

    • Get comfortable with a server-side scripting language. While this is unrelated to web design in general, your websites simply won't be of much use if you're using only static HTML. Pick a server-side language that looks good for your needs and learn its inner-workings, especially using OOP (object-oriented-programming) standards. While I personally recommend ASP.net, it can only run on one type of server (Windows; they are usually more expensive, as well), and has a steep learning curve for those who are not familiar with OOP, or one of the .NET scripting languages (VB, C#, C++, and more). A better option for you might be PHP. While I personally hate it, PHP is widley-supported, is open-source, and allows for some OOP if you know how to work your way around it.

    • Misc. Tips:

      • Center-aligning block elements. This is a major problem for a lot of beginning web designers, as CSS's text-align only aligns elements like <span> and <img>. If you want to align a block element (<p>, <div>, <table>, etc) simply put
        Code:
        div { margin: 0 auto; }
        in your CSS. This is supported by IE7 and all standards-compliant browsers (the good ones; Firefox/Netscape/Rip-offs (Flock), Opera, Safari, etc). For IE6, you'll have to use a hack to get it to work.
      • Using IE-Friendly code. Internet Explorer is the worst browser ever invented. It's a complete abomination and a serious pain in the *** to anyone who follows modern standards when they are coding. Luckily, Microsoft gave us something that will let you put IE-specific code in your pages:
        Code:
        <!--[if IE]>
        Special instructions for IE.
        <![endif]-->
        You can also use something like:
        Code:
        <!--[if IE lte 6]>
        Special instructions for IE 6 and lower.
        <![endif]-->
        
        Note that:
        lte is <=
        lt is <
        gt is >
        gte is >=
        So, for that aforementioned IE-align hack, you would simply use
        Code:
        <!--[if IE lte 6]><center><![endif]-->
        <div style="text-align:right;">Some text that won't be centered, but the div itself will</div>
        <!--[if IE lte 6]></center><![endif]-->


    Possibly more later. Depends on my mood, and the community response to my tips.


    Web Designer; Administrator of Wintendo (The Nintendo Gaming Site)

  6. #6
    Join Date
    Sep 2007
    Posts
    0

    Question Confused!

    Quote Originally Posted by Dragonfree View Post
    Code:
    #hoverlinks {
    position:relative;
    padding-top:31px;
    }
    Code:
    #hoverlinks a img {
    height:0;
    width:0;
    }
    Code:
    #hoverlinks a:hover img {
    height:31px;
    width:88px;
    position:absolute;
    top:0;
    left:0;
    }
    Code:
    #hoverlinks a {
    display:block;
    }
    Code:
    #hoverlinks li {
    display:inline;
    }
    I hope this isn't spamming.

    I don't understand how to use any of these! I am fairly new to this, but still, how do I make them work???
    <---Click Mamoswine to visit my forums!

  7. #7
    Join Date
    Oct 2006
    Location
    Land Down Under
    Posts
    303

    Default

    IN your HTML file, between the <head> and </head> tags put:
    Code:
    <style type="text/css">
    <!--CSS goes here -->
    </style>
    It is better to do external stylesheets, but I can't be bothered to explain that

    BP

  8. #8
    Join Date
    Nov 2006
    Location
    New Zealand
    Posts
    18

    Default

    I'll pick up where blueparukia left off, then, with external stylesheets, because they are better, for the simple reason you don't have to edit every page should you want to edit your style.

    Create a file named anything.css

    Then, put any of the CSS code within the file you just created.

    Finally, in the <head> of all the pages you want this style displayed in, put

    HTML Code:
    <link rel="stylesheet" type="text/css" href="anything.css" />
    Make sure anything.css is in the same directory as the files you want to display the style in.
    PM me to rate your website (including message boards) privately.

  9. #9
    Join Date
    Dec 2007
    Posts
    167

    Default

    The best tip I would give is to always use the XHTML STRICT DOCTYPE:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Put that at the beginning of every HTML file, and all browsers will display things the same (mostly anyway; IE has a few bugs).

    kevind23 has some good tips. One thing I'd add to that is that you should always use the correct HTML tags. For example, I've seen people use stuff like:
    Code:
    <span class="heading">title</span>
    but there are special tags for headings: h1, h2, h3 ...etc. Use these then you can style them how you like, eg with this CSS:
    Code:
    h1 {
    font-size: 16pt;
    color: lightblue;
    text-align: center;
    }
    ^that makes it 16pt font size, light blue in colour and centered. It's also bold by default.

    And to add to what Crepuscular said, the best way to link to external files is to use absolute links, rather than relative links, eg:
    Code:
    <link rel="stylesheet" type="text/css" href="/anything.css" />
    Only slightly different, but if you look closely you'll see there is a slash at the front of anything.css. This says to look in the root of the site, eg domain.com/anything.css. If you move the HTML file to a different folder you don't lose the link (but you will if you move the CSS file, of course). You can also have folders in there so you can do something like:
    Code:
    <img src="/images/pic.gif" />
    which looks in the images folder for pic.gif

  10. #10
    Join Date
    Oct 2006
    Location
    Land Down Under
    Posts
    303

    Default

    Quote Originally Posted by RichUncleSkeleton View Post
    The best tip I would give is to always use the XHTML STRICT DOCTYPE:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Meh, it is not always possible to use it for cetain situations, such as when CSS centering doesn't work, and you need to use <center> tags, or throw <br /> between a div, if you don't like padding for some reason. Generally I start with an xHTML Transitional DOCTYPE, and then validate it. If it validates, I'll make it Strict, and clean it up a bit so it validates as strict too.

    However, if you are used to HTML 4, you can always use the HTML 4.01 strict doctype, which still has SHORTTAG yes, and you can use caps etc...
    you can make well coded layouts without faux xHTML.

    but there are special tags for headings: h1, h2, h3 ...etc. Use these then you can style them how you like with CSS
    If you know how to optimize them for search engines thats great. For starters, using a <h2> at the top of your page without any <h1> often doesn't allow spiders to comb your site the best they can. Heading tags should always go in the correct order, and that coupled with a clean, valid page (preferably with a strict doctype), can help spiders index your page much better.

    And to add to what Crepuscular said, the best way to link to external files is to use absolute links, rather than relative links, eg:
    Code:
    <link rel="stylesheet" type="text/css"  href="/anything.css" />
    Everyone always forgets the bloody media tag. That should look like this:

    Code:
    <link rel="stylesheet" type="text/css"  href="/anything.css" media="screen,projection,handheld />
    Means that will not be applied when printing a page or when CSS is off. It is better to use a different print stylesheet for that.

    If for some strange reason, you want it to be the same, use media="all", though I don't recommend it.

    And it is good practice to name your stylesheets after the media they are shown on, e.g screen.css, print.css.

    Formatiing your CSS should never be
    Code:
    selector{property:value}
    but
    Code:
    selector
    {
    property:value;
    }

  11. #11
    Join Date
    Nov 2006
    Location
    New Zealand
    Posts
    18

    Default

    Well, it doesn't have to be like that - it's a matter of what the developers find easier to work with and edit. Personally, I format like

    Code:
    selector {
    	property:value
    }
    All of them function, though.
    PM me to rate your website (including message boards) privately.

  12. #12
    Join Date
    Oct 2006
    Location
    Land Down Under
    Posts
    303

    Default

    Yeah, your way is fine too. but for people who do it all on one line, makes it harder to maintain, much uglier etc.
    CSS (and HTML for that matter) should be easy to read,

    BP

  13. #13
    Join Date
    Dec 2007
    Posts
    167

    Default

    Quote Originally Posted by blueparukia View Post
    Meh, it is not always possible to use it for cetain situations, such as when CSS centering doesn't work, and you need to use <center> tags, or throw <br /> between a div, if you don't like padding for some reason. Generally I start with an xHTML Transitional DOCTYPE, and then validate it. If it validates, I'll make it Strict, and clean it up a bit so it validates as strict too.
    Well, your code doesn't have to be 100% valid for a page to display properly, since browsers always try to display something. [The only exception is if the server sends the page with an XML mime-type (too complicated for here, methinks, and virtually no servers do this), in which case, invalid code will just give an error message.]

    But you're right, a strict HTML doctype would be better (the XHTML one was the first I came across in my documents which is why I posted that):
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
    Another tip: some one mentioned using positioning in CSS for layouts - this should never be nesessary, you can accomplish what you want by 'floating' columns ( float: left; ) and setting a width, margins and padding. You should also remember that the width is only the width of the content, not including borders, margins or padding.

  14. #14
    Join Date
    Oct 2006
    Location
    Land Down Under
    Posts
    303

    Default

    You are right, pages don't have to be valid, but I am a complete semantics freak. If its not valid, it doesn't leave my Recycle Bin. Use the DocType you feel comfortable with.

    As for CSS position:absolute/fixed. That is never necessary (with the exception of footers on a fluid layout and drop down menus). Floats are not always necessary needed too, depending on the purposes, you can use display:inline, or play around with margins.

    Here is another tip:
    Use fluid fonts - by using the em property.
    Code:
    body
    {
    font: 1.2em #CCC;
    }
    is an example. Of course, never use fluid fonts on a fixed background, as it will break on larger screens.

    Cheers,

    BP

  15. #15
    Join Date
    Apr 2007
    Location
    Middletown, Delaware, USA
    Posts
    5

    Default

    Dragonfree, I tried your method, and it works great! But I'm having a slight problem. While I want the menu links to have that effect, I don't want my other content to have it.
    Look here and see: http://zyetendo.com/cssbeta.htm
    Most of the code is your's, just edited the colors.

    Play classic video games online at the Zyetendo Arcade. Registering to use it takes under a minute, and you get access to tons of classic games like Pacman, Donkey Kong, Zelda, etc.

  16. #16
    Join Date
    May 2008
    Posts
    2

    Default

    Quote Originally Posted by COOL_CORGI View Post
    Dragonfree, I tried your method, and it works great! But I'm having a slight problem. While I want the menu links to have that effect, I don't want my other content to have it.
    Look here and see: http://zyetendo.com/cssbeta.htm
    Most of the code is your's, just edited the colors.


    You would need to give it a class, its because your CSS makes all links currently defined as having those properties.


    So in your css, give the links (your main navigation) a class by doing this:

    Code:
    a.name:link{
    }
    And how you want all your other links to be, just do the the link code normally:
    Code:
    a:link{
    }

    So that in your html:

    Code:
    <a href="whateverlink.htm" class="name">hallo</a>
    And only that link will have the different properties you gave to that class.


    I'm so rubbish at explaining things so let me know if you didn't understand.

  17. #17
    Join Date
    May 2007
    Location
    ,
    Posts
    416

    Default

    I was wondering, is there a way to make things so that if, say, tag x is within tag y, the font style would be italic and text colour red. I remember seeing something like this a while ago, but I forgot how to do it. I believe it was something like this, but it doesn't work for me:
    HTML Code:
    b > a:link {
    font-style: italic;
    color: red;
    }
    So if a link was inside bold tags, it would be italic and red. But if the link wasn't inside bold tags, it would be normal. I think there is a way to do this, as I stated before, but I forget.

  18. #18
    Join Date
    Oct 2006
    Location
    Boulder, CO
    Posts
    146

    Default

    Make it so that website visitors are unable to highlight text:
    Code:
    <script language="JavaScript1.2">
    
    function disableselect(e){
    return false
    }
    
    function reEnable(){
    return true
    }
    
    //if IE4+
    document.onselectstart=new Function ("return false")
    
    //if NS6
    if (window.sidebar){
    document.onmousedown=disableselect
    document.onclick=reEnable
    }
    </script>
    Displays the viewer's IP address:
    Code:
    <?php
    $ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
    echo 'Your IP is: '.$ip; ?>
    Had to remove image because of SPPf sig rules. :c </3
    *Nom Nom Nom*

  19. #19
    Join Date
    Aug 2006
    Posts
    31

    Default

    Quote Originally Posted by blueparukia View Post
    Yeah, your way is fine too. but for people who do it all on one line, makes it harder to maintain, much uglier etc.
    CSS (and HTML for that matter) should be easy to read,

    BP
    Although multi-line CSS does make things easier to read most of the time (and it is what I use), one-line CSS is lighter and you do not have to scroll as much to see the rest of the CSS document. Just pointing that out. There is no "best way" of writing CSS. You should write CSS in the way you are most comfortable and familiar with. And most CSS editing programs can write/format in many ways.

  20. #20
    Join Date
    Dec 2007
    Posts
    167

    Default

    Quote Originally Posted by Sapphire Milotic View Post
    Make it so that website visitors are unable to highlight text
    Stupid, annoying and easily breakable. Jusst turn off Javascript, view source or even adblock the script.

    What about your visitors who want to copy some of your text for legitimate purposes? If you don't want people "stealing" your content, don't put it on the web in the first place. Simple as that.

  21. #21
    Join Date
    Nov 2008
    Location
    32768 tiles to the left.
    Posts
    128

    Default

    I'm not sure how much I can contribute, but...

    This goes for people who are, by any reason, forced to work around fixed-size layouts: Never forget how much room are you drawing.

    Sizes specified in CSS, for the "left", "top" and other attributes, do not take into consideration any property like margin or padding. This:
    Code:
    div.square {
      width: 200px;
      height: 200px;
      border: 2px solid silver;
      padding-bottom: 4px;
      }
    Is not a 200x200 square! Heck it's not evena square to bgin with... It's a 202x206 box. Basically, you have, from the outside to the inside: outline, border, margin, padding and content. The corresponding properties are outline-? (which I think only FF supports, most other browser support just outline), border-?, margin-?, padding-?.
    So to determine the real size of a container you must add the relevant tags. In the above example, since I use height 200, 2 extra pixels for border in all directions, and 4 extra pxs for padding, I have a grand total of 206px.

    Outline and Border are not considerer for positionning, but they still take part of the layout and filling procedure, so if you don't pay attention you'll find your design boxes wildly overlapping. I have seen too many basic fixed-container models fail because of this.

    Because no matter what the ladies say, size does matter: remember the difference between CSS measurement units!
    1px is one pixel in the client's screen, just that.

    1pt is defined by the client size's video card to be the equivalent to 1/72 inch, so the size of a pt varies according to the available monitor information. Since you can not always know how big a monitor is (the resolution does not translate to real-world measurement), absent from using "pt" measurements to achieve anything that has to do with scaling text.
    Also remember that if you don't define header (H1..H5) sizes, the browser will do it instead by using pt as a measurement. If I am not wrong, for example, Opera ships with default normal text size 12pt and default heading (H1) text size as 18pt, whereas Firefox ships with default normal text size 12pt and no default heading (H1) size.
    Use "pt" for printer-friendly stylesheets (a "print.css" file) or when you ant screen-independent measurements (to create a on-screen ruler, for example).

    1mm is 1mm. 1/1000th of a meter. It is defined by the client side's computer as described above. It has not much use.
    1in is defined to be one inch in the same way as above (thsi is, client-side).

    1em is the width-size of the letter "m" (hence the name) according to the parent block element (eg.: a DIV)'s font-size property.
    Similarly, 1ex is the height of a letter "x" (hence the name) according to the parent block-element.

    There's also "%", to achieve exact scaling with respect to a parent element. If you define this stylesheet:
    Code:
    body {
      font-size: 12pt;
      }
    
    h1 {
      font-size: 4em;
      }
    
    span.double-size {
      font-size: 200%;
      }
    , you are guaranteed to get double size in a SPAN class="double-size" with regards to the parent:
    Code:
    <body>
    <h1>Relative <span class="double-size">size</span> Demo</h1>
    
    <p>Hello, this is some <span class="double-size">large text</span> 
    I came up with for this demonstration.</p>
    </body>
    The SPAN inside the header is guaranteed to be 8em high, whereas the span inside the paragraph is guaranteed to be 24pt high, as long as you haven't defined a font-size for the <p> tag...

    As for em and ex... Making use of any of these two units is the key to success in scalable or fluid designs: they'll be two of your greatest friends. If you want to create a page whose font-size can be easily adapted live (by a Javascript button or something) for accesibility, try to always use em/ex as your primary font measure. Take into consideration that most browsers have an internal zoom in/out function, it may zoom differently according to the measurement you use.

    To finish, some last words: first: denounce IE, or at least IE6, as much as you can. Join a campaign like that of Savethedevelopers.org. Second: pay attention to CSS3 specs' evolution, but don't drool nor overwork yourself for them. Rounded corners may be a nifty thing, and text columns certainly help to the readability of long passages, but everyone is doing them so differently (or not doing them at all) that if you try to listen to people's complains you'll never cease overworking stuff, trying to modify the CSS and patching content (hint hint sin sin) to suit all droolers! CSS3 is still very far away (it's managed by a committee after all) so don't get your hopes high.
    Solovino's Sig
    Writing what the Pokémon canon lacks since Jun 2010!

    Fics» Sixth -- Playfield -- Cuasi Legendario (Spanish)

    Research» Nidoran! and other Pokémon for PEFE
    — — ★ — —
    Banner by Hydro_King

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •