Category Archives: css

css: display vs visibility

Leave a reply

Tip: Even invisible elements takes up space on the page. Use the “display” property to create invisible elements that do not take up space.

Definition

The visibility property sets if an element should be visible or invisible.

Inherited: No

Tip: Even invisible elements takes up space on the page. Use the “display” property to create invisible elements that do not take up space.

JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.visibility=”hidden”

In our HTML DOM tutorial you can find more details about the visibility property.

In our HTML DOM tutorial you can also find a full Style Object Reference.

Example

p
{
visibility: hidden
}

Possible Values

Value Description
visible The element is visible
hidden The element is invisible
collapse When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as “hidden”

source:http://www.w3schools.com/CSS/pr_class_visibility.asp





css: word wrap

Leave a reply

Sample of word wrap or break word in css

word-wrap:break-word





multi level menu js less

Leave a reply

Meet the markup

To start, we should use the best method for defining a navigation menu — a list. For this example, we will work on a simple HTML unordered list. {Line wraps are marked ». –Ed.}

<ul>
  <li>Sunfishes
    <ul>
      <li><a href="">Blackbanded»
        sunfish</a></li>
      <li><a href="">Shadow bass</a></li>
      <li><a href="">Ozark bass</a></li>
      <li><a href="">White crappie</a></li>
		</ul>
	</li>

  <li>Grunts
    <ul>
      <li><a href="">Smallmouth grunt
        </a></li>
      <li><a href="">Burrito</a></li>
      <li><a href="">Pigfish</a></li>
    </ul>
  </li>

  <li>Remoras
    <ul>
      <li><a href="">Whalesucker</a></li>
      <li><a href="">Marlinsucker</a></li>
      <li><a href="">Ceylonese remora</a></li>
      <li><a href="">Spearfish remora</a></li>
      <li><a href="">Slender suckerfish</a></li>
    </ul>
  </li>
</ul>

Quite straightforward really — nice and neat HTML that, as a result, is highly accessible. But now we want to transform this into a dynamic list — the first level of list items will make up a horizontal menu bar from which the second level lists will drop down.

Continue reading →

css and email: how to do it

Leave a reply

I’ve been having problem applying css on email. I almost wanted to sleep but bumping on these articles awoke my senses.

You will find tips and guidelines on these urls so please read them for their explanations on how to code html css driven for your emails:

http://warpspire.com/tipsresources/web-production/css-email-the-dirty-little-secret/
http://reachcustomersonline.com/2004/11/11/09.27.00/
http://www.webreference.com/programming/css_html

Bottom line just remember these things I got it from the webreference.com

Do …

  • Use inline style declarations for the most important styles.
  • Declare styles in a style tag when they’re not absolutely necessary.
  • Use table tags for multi-column layouts and floating elements.
  • Test your email in multiple standalone and Web-based email clients.

Don’t …

  • Use external stylesheets.
  • Use floating div tags for multi-column layouts.
  • Expect CSS background images to show up in most email clients.
  • Rely on images showing up, especially background images.

Now, I can sleep :P