Web BorG: css

Showing posts with label css. Show all posts

4/07/2008

The quick way to preload images

If you use background images for hover effects with CSS (for example links hover effects) in IE you don't get a nice effect, because the "mouseover" image is always loading, creating a "gap". So it's good to have the "mouseover" images preloaded. There are numerous of ways to preload images, but usually what I'm doing is loading those images in a hidden layer. For example: if you have a css:

a.menu { background: transparent url('menu_off.gif') no-repeat left top }
a.menu:hover { background-image: url('menu_on.gif') }

you'll want to have the images menu_off.gif and menu_on.gif preloaded. The way I'm doing it is by adding to the top of my webpage right after the <body> tag the following code

This will put the two images loaded in a hidden layer and thus keeping them preloaded. And because this layer is right at the beginning of the page, you'll have the images preloaded first.

Oznake ponudnika Technorati: CSS,Design,Web Design

3/11/2008

Are you a web designer? Want to get sponsored?

I'm happy to announce that in our company we're making effort to contribute to open source and design community. We're looking to sponsor web designs that will be free to use.

If you are interested, you can find more information on Web Designers Sharing Point.

There are already some members in the community, the latest one is Andreas Viklund.

As the result there are already two templates available free to download:

1.Internet Studio

Download - Check sample

2. Small Corporation

Download - Check sample

There will be more to come. If you wish to participate and get sponsored, please visit the blog and contact Jose.

Oznake ponudnika Technorati: Web Design,free templates,css

10/07/2007

Great tools for web developers pt. 3

The third in the series of tools for web developers is for the ones that don't want or don't have the option to install any software or addons and just need a quick access to a tool for inspecting DOM

1. Mouseover DOM inspector v. 2 - MODIv2

This thing is pure JavaScript, DHTML and CSS so you really don't need anything else for inspecting a DOM of a certain page. All you need is to bookmark a link on the help homepage:

And then go to the page you want to inspect the DOM, and next just call the script from your favourites.

And you're already exploring the DOM.

It doesn't contain as many tools as the previously described toolbars, but it's a very good solution for quick start and instant DOM inspection.

Technorati tags: web development, web design, DOM, html, css, javascript

Great tools for web developers pt. 2

In my previous post I've presented a tool that I find very useful when debugging display, creating javascript related to HTML DOM, etc. The tool is intended for Internet Explorer. The FireFox users aren't deprived of such tools either. There are two tools available:

1. Web developer toolbar for Mozilla Firefox

It offers quite a wide array of tools for web developers, such as ruler, css validation, DOM explorer, etc.

It has a nice feature when exploring DOM - it displays all the parrent elements - so you can see how any element is nested.

A neat add-on to that feature would be to be able to pause the selection and view the nested DOM, since there are a lot of times too many nested elements and the text goes out of the screen.

2. Firebug

A good combination of both - ie and firefox dev toolbar, it has very good tools for debugging HTML, CSS and JavaScript. What I like about it is that you can select the elements and it automatically also selects the HTML. And to manipulate the HTML, JavaScript and CSS in real time is very easy.

What I like about it is that it is easy to use, it has ability to monitor, debug and execute JavaScript, it helps with visualising some of CSS properties, and its toolset is nicely organized and easy to use. On the image below you can see how easy is to manipulate HTML in real time.

The problem of displaying too many nested elements is solvet neatly with a simple solution: the elements are ordered in opposite sense - it displays nested elements from right to left - instead of html > body > ... div it displays div < ... < body < html.

These are some neat tools that may make your life easier. I recomend using them all together because you know what headaches the IE/FireFox display compatibility can cause :)

Technorati tags: web development, web design, css, firefox, javascript, html

10/04/2007

Great tools for web developers pt.1

Many times to refference or change the the element's properties in a DOM of a web page, I was just going crazy. Especially in SharePoint this can be difficult, because some elements are nested DEEP within other elements (table > div > div > div > ... > input).

You can help yourself a bit with javascript:alert() or by viewing code, but there are tools to make your life as a web developer much easier:

1. Internet Explorer developer toolbar

This tool is a super add-on to Internet Explorer, with which you can easily explore the dom elements and their properties simply by mouse over and click.

Some screen shots

It has lots of other neat features like visual display of class and id info, outlining certain elements, disabling styles, images, clearing temporary files, etc. I especially like the color picker and the ruler, enabling you to select colors or to measure width or height of anything directly on the screen!

Color picker

Ruler

3/24/2007

A good starting point for creating web designs

A w3c recommendation is that for website layouts and design layers should be used instead of tables. In lots of WYSIWYG HTML editors you don't get the built-in functionality to easily create layout with layers.

So I've found a very good starting place for creating a website. It's a set of "wireframes" from which to build your web page layout.

They're using XHTML and CSS.

Click here to visit the site and get the CSS templates.

1/28/2007

IE 6 can support transparent png

Even though the new IE doesn't have problems with semi-transparency in png images we would believe that we still have to be careful - a lot of people is still using Internet Explorer 6. In my previous posts I've already shown that one solution is to use additional CSS for ie6 and older.

I've found that with the help of a simple JavaScript fix also the old IE can display transparent pngs properly.

Read about how to enable transparent png-s in Internet Explorer 6 and older here.

We still need a separate CSS for other incompatibilities :)

Technorati tags: web design, css, compatibility, internet explorer, transparency

1/20/2007

Some good resources from Adobe

Probably you've noticed that the topic of the month for me is the cross-browser compatibility. So here's an additional resource from Adobe. Community based portal where you can get a lot of experience from others, facing certain problems with CSS. And it's well categorized also.

The site is called CSS Advisor. Already in my bookmarks. Thanks, Jose for the tip.

1/15/2007

CSS for different output (handhelds, print,...)

Thanks, Jose, for a good question. I've done some more digging and as a mater of fact we can make specific CSS according to the device the page is intended for. We can define CSS for different outputs, like handhelds, printing, screen, even projectors, etc. using the media type. Below's an example for first inserting the CSS for all output and then additionally adding the separate CSS for printing.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="printing.css" media="print">
</head>
<body>
...

Another method is in the CSS itself. Below is an example of writing specific styles for handheld devices and printing inside of the CSS file.

<style type="text/css">
@media = print, handheld {
    h1 { font-family: Arial; font-size: 0.8em; }
}

As seen in the example above, the Heading 1 is going to be with font Arial and size 0.8em.

Which options you have for output (most common used in bold):

all - for all media type devices
aural - for speech and sound synthesizers
braille - for braille tactile feedback devices
embossed - for paged braille printers
handheld - for small or handheld devices
print - for printers
projection - for projected presentations, like slides
screen - for computer screens
tty - for media using a fixed-pitch character grid, like teletypes and terminals
tv - for television-type devices

(source for above: W3Schools)

Even though there is a way to distinguish CSS for IE and other browsers, detecting them is a whole another story.

Technorati tags: css, compatibility, web design

1/14/2007

Having IE6 and IE7 at the same time

Continuing with the topic of my previous post. If you'd like to have compatible website you need to see it running in Internet Explorer 6 and Internet Explorer 7. This is tough though, because IE7 updates the IE6. If you don't want to have a separate computer just for IE6, click here to see how to have both IE-s running on the same computer.

I've installed the IE6 standalone and it works beautiful! Below is a screenshot from my start menu.

Technorati tags: compatibility, internet explorer, web design, ie7, ie6

1/13/2007

CSS compatibility IE6, IE7, Firefox and others

How cool! The new Internet Explorer 7 now supports semi-transparent PNGs. So web design got a bit easier. Or did it? According to w3schools web statistics there is still a BIG amount of users of IE6. So how to adapt that web site will use advanced features on browsers that support them?

You can use some CSS hacks. Here's what you can do:

If you want to distinguish CSS for Internet Explorer (IE) and other browsers (so CSS display problems occur in IE), create a separate CSS file (many web designers call it iehacks.css). Next in the website after linking your original CSS for all the browsers add the following code:

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="iehacks.css" />

<![endif]-->

And enter all the corrections for Internet Explorer in the iehacks.css file.

If you want to make specific css only for older versions of IE, then you have to use  instead of <!--[if IE]>.

Below is an example if you want to use semi-transparent .png as background in IE7, Firefox, Opera and others, but .jpg as background in IE6 and older. You can also use !important to seperate CSS for other browsers and IE.

HTML page:

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

<body>
<div class="watermark">....</div>...

styles.css

/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
    background-color: black;
    background-image: url('images/gradient.jpg');
    background-position: left top;
    background-repeat: repeat-x;
}   /* black background with gradient on top. */

div.watermark {
    background-image: url('images/watermark.png'); /* transparent */
    background-position: left top !important; /* for all but IE */
    background-position: right top; /* for IE */
    background-repeat: no-repeat;
}

iehacks.css

/* for IE6 and older */
div.watermark {
background-image: url('images/watermark.gif'); /* here is a transparent that will be displayed better in IE6 and older */
}

Ofcourse above is just an example using semi-transparent png for all browsers but IE6 and older. Like that you'll be able to make your website more compatible.

Technorati tags: web design, css, compatibility, internet explorer, firefox, opera, css hack, transparency, png, IE6, IE7

Web BorG

Important notice