Archive for the ‘css’ Category

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

Tags: css, css display, css visibility, display vs visibility
Posted in css, dom, html | Comments

css: word wrap

Friday, May 22nd, 2009 by dreamluverz

Sample of word wrap or break word in css

word-wrap:break-word

Tags: css word wrap, word break, word break css, word wrap
Posted in css, html | Comments

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.

(more…)

Tags: js menu, menu js less, multi level menu
Posted in css, dom, javascript | Comments

ascii code on css

Wednesday, May 13th, 2009 by dreamluverz

sample: applying ascii code on css

Â li:before {
Â Â  content: "\00BB \0020";
}

Tags: apply ascii on css, ascii code, css and ascii, sample of ascii code on css
Posted in css | Comments

css and email: how to do it

Friday, January 16th, 2009 by dreamluverz

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

Tags: css, css and email, email
Posted in css, html | Comments

css visibility property: display vs visibility

Saturday, January 10th, 2009 by dreamluverz