Tag Archives: CSS

Thoughts on CSS width:calc()


When I dig through all the CSS3 toys, I ask myself several questions:

How can I use it?

What need does it fill?

How can I work around it for browsers that don’t support it?

I am having trouble with justifying using width:calc()! It is not that it is not needed; IE6 needs it badly; And, coding for other browsers to include non-standards IE6 needs it. But IE6 does not support it!

So when IE6 leaves the picture we have a standard compliant browsers. In a standard compliant world we have padding-left:fixed value and width:100% and absolute:position to overlay content from another divide onto the padding-left space. It works and with or without width:calc() I use two divides and a wrapper, which is the parent document or a parent divide. In other words I only need width:calc() on the browser where overlays do not work to standards and does not support the property as a fix.

To design for IE6 I need <table width=”100%”><td></td><td width=”fixed?”></td></table> something that should make even a hobbyist say, “No! don’t do it!”

I like the property though. I just can not honestly see where I need it. For Javascript makes it possible to change one value instead of two — which can lead to smoother animations — But for attractive animations many properties need to be changed at the same time anyway.

Specifically IE6 has a problem with hiding other content on a <div style=”position:absolute; top:0px;width:100px; float:right”> This should fill a 100 pixel area on the right part of the screen – it does but it blocks the content on the left part of the screen. z-index can correct it when used only with IE6 as IE6 implementation is different and breaks other browsers.

Advertisements

Layering html with absolute positions in fluid html


Absolute positioning style=”position:absolute” provides a method to overlay html content. This allows for richer layouts and animations. Absolute positioned content appears above the content (by default – controlled by z-index) and additional content after the position absolute appears as if it were a background or as if the absolute positioned content were not taking any space.

Absolute positioning requires advanced CSS knowledge. One must know the difference between a style=”display:block” and style=”display:inline”. If a block element is used the content under the absolute content will be blocked. This is the most common error – if you see a link that you can not click on, it is a fairly safe bet that the coder made this error … z-index can and should be used on those background links to bring them above the “position absolute” content. Any number of layers can be created and work if one uses the z-index style correctly. Each layer can be independently animated.

Most tutorials on absolute positioning point out that the style=”top:” and style=”left:” control the location of the content and it is based on the document parent or the top left location of the browser window. They fail to point out that if a style=”position:relative” is used in a block element that the absolute content location will be based on that parent instead.

The trick to using absolute positions in a fluid html layout is to place the content into a relative positioned parent block. This same method applies to centered 960 pixel layouts – because the left margin is no longer left:0px. See an example at http://sdfreelance.vistapanel.net/ with the icons on the right collapsing sidebar with in inside the 960 pixel layout.

CSS gradients vs images and vs SVG


CSS gradients work in IE based browsers, Webkit (chrome, Apple eg Safarie, Ipod, Iphone), and Mozilla (Firefox) … however they do require different style tags. (see below).

When compared to images: CSS gradients give a little bit of performance increase. An image used for a background gradient is normally very small around 5,000 bytes. Unless there are over 10 gradients being used these images are not going to make much of an impact. These images are downloaded using the same connection that downloaded the HTML so we are only talking about bandwidth savings when the pages are designed correctly.

Animation is a game changer. With jQuery these divides can be animated and the background color itself can be changed / animated.

HTML5 SVG blows away jQuery in its ability to animate graphics … giving CSS gradients a short window of opportunity. SVG is a graphics language with more years in the making than jQuery.

Here is an example of the CSS markup for gradients

.mygradient {
background: -webkit-gradient(linear, left top, left bottom, from(#008), to(#fff));
background: -moz-linear-gradient(top, #008, #fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF);

-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000080, endColorstr=#FFFFFF)”;

}

What does it mean to have advanced knowledge of CSS


Marketing people seem to throw around the words advanced, guru, expert without any apparent consideration for what those words mean.

Let me give some definitions:

  • Beginner: is somebody who is able to do some things with CSS.
  • Knowledgeable: is somebody who is familiar on the majority of CSS commands and what they do. The should be able to guess what this does but may have not used it.

<style> a.special:hover + * {background:url(new.jpg);}</style>

I’ll give a hint –  It is documented under adjacent sibling selectors

  • Advanced:  Somebody who would not be able to tell you what he does not know about CSS because he understands every piece of it he has seen, and he has seen the material on CSS from all major browsers and standards.
  • Guru: Wisdom is not knowledge.  Wisdom is the application of knowledge. A guru not only knows all things — he knows he knows all things.

Being a guru means there is nothing left to learn. His search for new knowledge in his field is in vain. Nice people ask questions but there are no questions he can not answer … if a guru wants to learn something it needs to be something new.

Cross browser CSS3 hover on non-anchor tags


All browsers but Internet Explorer handle hover on tags other than the anchor tag; the anchor tag is most often used for links. By using CSS hover one can make for example a drop down menu, by causing elements to appear when the mouse is placed over them; Without, using javascript.

The solution to Internet Explorer lack of hover support comes from a method to extend the functionality of the browser with behavior files.

Peterned created csshover3.htc specifically to allow CSS3 hover to be used today with all browsers. It is used by adding the following to a html page inside a style tag.

body { behavior: url("csshover3.htc"); }

csshover3.htc must be loaded onto the host. … Peterned has directions. An example CSS only menu is also shown. … the behavior program then looks at the CSS of the page and enables hover to work on any style class that is using it.

CSS rounded corners in all browsers


IE does not support CSS3 rounded corners at this moment. However IE does have a method of extending their support for different styles which can be included in the style sheet. These IE style extensions are called behaviors.

On Google code site exists border-radius.htc when this file is uploaded to a site. It can be called using:

<style>
.rounded-corners {
behavior: url(border-radius.htc);
}
</style>

The complete solution would then become …

<style>
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
</style>
<!–[if IE]><link rel=”stylesheet” href=”ie.css” type=”text/css” /><![endif]–>

Note: if the behavior: url address is not absolute it is relative from the browser html page not the css page.

Pure CSS transparent image rollover for layered themes


Each div or block element ‘background’ style provides a single layer for graphic design, accessible through the style sheets of the page and site.

<style type=”text/css”>
.topimage {

background: url(sky.jpg);

height:116px;

width:960px

}

</style>

Links can also be treated as blocks and a background image can be used – I am just using a plain white button in this example. 960 is the width of the header. 120 width for the menu buttons provides exactly 8 menu buttons – It also lines up the content below for a 960 page layout.

a.menu {

background: url(white.jpg);
display:block;
width: 100px;
height: 27px;
padding:2px 0px 0px 20px;
float:left;
font-size: 20px

}

There is no need for javascript events on a hover because hover is already exposed.

a.menu:hover {

text-decoration: underline;
color: white;
background: url(t-gray.png);

}

t-gray.png or transparent gray is nothing but one color png file which is nearly transparent and a little darker to increase the contrast level so the text does not bleed into – say in this example a cloud. Nothing prevents a more artistic button.

I digress, To add animations like http://www.mint.com/ we are talking about adding a jQuery event.

Now that the hard part is taken care of the html here is simple.

<div class=”topimage”>

<a href=”#”  class=”menu”>Home</a>
<a href=”#”  class=”menu” >Products</a>
<a href=”#”  class=”menu”>Support</a>
<span class=”menu”></span>

<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>

</div>

Most people who know how to blog already know how to create links. In a drupal environment the CSS and div would normally be part of the theme. So the person who wanted to change the header menu only needs to know that it is made with 8 class=”menu” elements – and this needs to be included on the cheat sheet for updating the site.

https://wsmithdesign.wordpress.com/2010/07/05/thoughts-for-a-good-layered-drupal-theme-design/

To wrap this for a drupal theme that allows somebody to change the header background without using CSS files or ftp.

<div class=”topimage”>

<!– block goes here for top image as a <img src=”companyheader.jpg”> no coding required for an affiliate or office admin to customize the image –>

<div style=”position:absolute; top:0px; left:0px”>

<a href=”#” class=”menu”>Home</a>
<a href=”#” class=”menu” >Products</a>
<a href=”#” class=”menu”>Support</a>
<span class=”menu”></span>

<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>
<span class=”menu”></span>

</div>

</div>

Using DIV wrappers with jQuery for rapid animation design.


Imagine a scrolling image the image scrolls to the right – a focal point and then Links and text appear using an animation at a synchronized time. Likely you are thinking flash as a video has no links (until html5 is mainstream) and if this was not an already created effect from an existing library would take a few hours to program all of the movements of all of the elements. Continue reading →

Outside the box on html forms


With CSS html forms are no longer limited to white boxes. There is no need for a box at all. The border of an input field can be set to zero and the background can be set to transparent.

<div style=”background: url(HTML/myform.jpg)”>

<input type=”text” style=”border:0; background: url(HTML/transparent-white.png); color:red”>

</div>

Whatever the imagination can come up with as a place to enter text can be used.

Outside the box on drupal blocks


When the basic structure of drupal is presented; Theme (columns and basic content location), pages and stories (a basic content type which may be promoted to the front page), Blocks (a basic building element which may be placed in any of the locations created by the theme), Modules (PHP code which are either or both (display, program function, program and display).  Some may  see this structure as a set of rules – like say Controller, Module, View.

None of these descriptions are hard rules – blocks for example by default can contain HTML with style property, (and PHP can be enabled). If one wanted to replace the page header and logo … without touching the theme … one only needs to write out the HTML they would like to use and place it in a <div> tag with a style of position:absolute; top:0px; left:0px; width:100% … done a new header on selected pages without any need to modify the theme or create special conditions in the php code.

To see an example look at my San Diego Drupal site