css

CSS Text effects for MSIE

Here are some cool css text effects for microsoft internet explorer. You can use them with images too.

Web2 Style CSS Dynamic Menu with Arrows and Background-Images


Just another drop-down menu with web2 style background-images and arrows. We use two background images for < li > elements and two transparent background images(right positioned arrows with different directions) for < a > element. You can optimize background images as reducing width to 1 pixel. I dint use a smaller version, because we need to see images clearly. See demo of css menu.

CSS code of this page:

  

Why tableless design, DIV vs. TABLE

Everybody says avoid tables when you are creating design elements like layouts, themes, pages... Why?

Because:

  • Main
    (X)HTML says; tables are for tabular data not for website-layout
  • Speed
    Tables have much design code than content, divs are faster for download. Save bandwidth!
  • Usability
    Tables let confusing while creating layout(You have to remember which TR or TD ends in which template file)
  • Debug

DropDown / Rollover Menu with pure CSS / HTML

CSS Menu without JavaScript, Pure-CSS, Hidden, Mouseover-EffectThis is another CSS Menu with changed direction. Many website visitors are online with javascript-disabled clients(because of filters, access rules etc). And you want use a nice rollover multi-level menu on your homepage. CSS ist the perfect solution for this. All modern browsers like Mozilla Firefox, Microsoft Internet Explorer, Opera, Google Chrome, Apple Safari support css.

Pure CSS Mouseover Menu without Javascript

CSS Menu without JavaScript, Pure-CSS, Hidden, Mouseover-EffectMany internet users are online with javascript-disabled clients(because of security or performance reasons). And you want use a nice mouseover multi-level menu on your homepage. CSS ist the perfect solution for this. All modern browsers like Mozilla Firefox, Microsoft Internet Explorer, Opera, Google Chrome, Apple Safari support css.

CSS hierarchy and inline style sheets

I have a problem with inline stylesheets. I like to use inline style sheets instead of using css code in head section of an html page or an external .css file.

Example:


But I have a problem when I want it to ffect just a part of subelement and not other paralell elements. Example 2:

    • ...

I want to my third-level "ul" have border but second-level not. I can do it with css code like this:

div ul { border: none; }
div ul li ul { border: 1px solid red; }

Premium Web Templates

Hi @ll,

I need very often professionals website templates. Sometimes a standalone design but sometimes themes for CMS like software like Drupal, Joomla, Wordpress, phpBB, Phorum, Magento etc.

I have already tried to find using Google but most sites I found seem unserious.

Table colspan rowspan with DIVs

I want to use DIVs and CSS for my layouts etc. I need some table like areas sometimes. I know that I can create a grid table like element with "display: table", than "display: table-row", than "display: table-cell".

But how can I create a table with colspan and rowspan with CSS and DIVs? Without DIV floating and fixed with / height...

Preload images with JavaScript or CSS

I have a small website with two background images for top menu. When I bring mouse first time over a menu element it takes 2-3 seconds that second background image loaded (style link:hover background: url(secondimg.png)). For this short time user see nothing, of course it is annoying. To escape this situation I want to preload all images inklusive background images for menu elements, links, divs etc. Is there a very easy and short javascript or css trick? Thanks for any help!

Enable vertical scrollbars in Firefox permanently with CSS2

Sometimes we build websites with both long and short pages. Some of them dont need scrollbars and browsers dont display scrollbars as default. But if you have centered container Firefox change tha x-place(margin to left) depends on scrollbars. It looks like design/position problem. To prevent this we need permanent enabled scrollbars but not horizontally. We can enable xy scrollbars with "body { overflow: scroll; }". There is no property for just y in css2. In css3 there are properties like overflow-y, overflow-x etc. Use following code to fix it:

 html { height: 101%; } 
Syndicate content

CafeWebmaster.com(CW) is a free online community for webdevelopers and beginners. Anybody can share their code, articles, tips, tutorials, code-examples or other webdesign related material on the site. Newbies can submit their questions and reply to existing questions. CW does not guarantee or warrant reliability of code, data and information published on the site. Use the site on your own risk. The site takes no responsibility of direct or indirect loss or any kind of harm to its users. The site also doesn't take responsibility of infected files or source code with any kind of infection or viruses, worms, spywares, malwares, trojan horses. CW reserves the right to edit, move, or delete any of content for any reason.