Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

CSS: Create List Style Color Different Than List Text

Wednesday, February 24th, 2010

I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

^?View Code CSS

.certsBlock ul {
        color:#1AB7EA;
}
.certsBlock ul  li {
        list-style:square;
        margin-bottom:5px;
}

Then I add an additional element inside the list-item (the text) and change it’s color:

^?View Code CSS

.certsBlock ul  li p {
        color:#fff; /*white*/
        margin:0;
}

Now I create my Unordered List:

^?View Code HTML

<div class="certsBlock">
        <ul>
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>
        </ul>
</div>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

Categories: CSS
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

CSS: Create List Style Color Different Than List Text

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll