CSS Lists

I have been developing a new page lately. And because I am a beginner in the field, I use Paddings and Margins to seperate list.
Until I encounter the <ul> and <li> tags. I felt noob. I mean, seriously? How could I make an easy job hard? With the use of these tags, lists and menus are easily separated.

The <ul> tag defines an unordered list. While the <li> tag consists of lists in bullet type.

List Style Position

Determines whether the bullet is located inside the list’s containing box or outside.

<ul style=”lsit-style-position:outside;”>
  <li>Water</li>
  <li>Coffee</li>
</ul>

<ul sty;e=”lsit-style-position:inside;”>
  <li>frapuccino </li>
  <li>espresso</li>
</ul>

And here is how it will appear:

*Water
*Coffee
   *frapuccino
   *espresso

What if I want my list to look like a menu?

We must identify each attribute and indicate the type of list we want on our stylesheet.

In example:

<div id=”menu”>
  <ul>
   <li><a href=”about.html”>ABOUT MY PAGE</a></li>
   <li><a href=”presentation.html”>PRESENTATION</a></li>
   <li><a href=”downloads.html”>DOWNLOADS</a></li>
   <li><a href=”terms.html”>TERMS OF USE</a></li>
   <li><a href=”contact.html”>CONTACT ME</a></li>
  </ul>
</div>

Now, you may define the attributes on your stylesheet.

#menu {
  float: left;
  height: 40px;
  width: 950px;
}
#menu ul{
  margin:0;
  padding:0;
  padding-top:8px;
  margin-left: 20px;
}
#menu li{
  display:inline;
  padding-left: 40px;
  padding-right: 40px;
}

as you can see, we wrote INLINE at #menu li{} so as to make the list horizontal. Hence, the codes we have just written will appear as follow:

ABOUT MY PAGE  |  PRESENTATION  |  DOWNLOADS  |  TERMS OF USE  |  CONTACT ME

There are too much to learn and share but everything has its own end.

Remember that errors come from elements you often neglect and you think are unimportant

If you happen to have some questions, simply write a comment on this post or email me at himerej@gmail.com.

Thanks! :D

With the use of CSS

After having a short tutorial about CSS with Sir Rey last week, he gave me an assignment to see what I have learned. To tell the truth, I was excited and worried at the same time. Excited because I would be able to test my skills and a bit worried for I don’t know how it would end up. I mean, ’twas my first time to do a detailed page on my own. But nevertheless, I was able to finish the outline in 11 hours! Not bad for a first timer eh? 🙂

If you’re asking if I have encountered any problems, well I can say that I had some. And it’s funny because the lapse are too negligible.
So based on my experience, I will give you some DOs and DON’Ts to prevent errors on your page.

  • HTML

HyperText Markup Language elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It must start with the <HTML> tag and end with </HTML>. Within the HTML tag, there are 3 main tags that are needed to create a page. First would be the <HEAD> tag, followed by the <TITLE> that is written within the <HEAD></HEAD>tags. Last would be the <BODY> tag where the page is constructed. It is important for beginners to study HTML first before CSS, PHP and the like because they are all incorporated with HTML.

  • NESTING.

It is several different constructions and activities where information is organized in layers or objects contain other similar objects. So how important can this be? With nesting, you will be able to define each and every tag you make. And it will make troubleshooting easier because the informations are classified and it is easier to look at. In example:
<div id=”facebook”>
<a href=”http://www.facebook.com/murasakiHime&#8221; target=”_blank”>
<img src=”promote.jpg”>
</a>
</div>
in my example, <div> and </div> are aligned. same with <a> and </a> so it is easier to see the flow of your program and closing tags are not forgotten or replicated.

  • How CSS works

CSS, which stands for Cascading Style Sheet makes your program lighter. External Style sheets can save a lot of work because it is stored seperatedly as a CSS file and is linked on the HTML file to save space and make the program look a lot simple.It also enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

  • ID and Class

<div id=”twitter” class=”highlight”>
<a href=”http://www.twitter.com/himegamihime”&gt;
Follow Me
</a>
</div>
In this example, the id specifies a unique id for an element. If you want to give your id a certain attribute, you simply call it with # within your stylesheet. Hence, it would appear as #twitter.
next is the class. it specifies the classname for an element. Instead of putting a hash tag before the class, it should be a dot. In example: .highlight. To know more about id and class, I will state an example.

.highlight{cursor:pointer}
a{text-decoration: none; color:gray;}
a:hover {text-decoration: none; color:orange;}
#twitter{
font-size:13;
font-family:helvetica, sans serif;
font-weight:normal;
}

If you want to have different id with the same class, you should state the name of the id before the class so as to specify the name of the element in which you want to use the same class. For example, you have
<div id=”twitter” class=”highlight”>
<a href=”http://www.twitter.com/himegamihime”&gt;
Follow Me
</a>
</div>
<div id=”tumblr” class=”highlight”>
<a href=”http://www.tumblr.com/blog/murasakihime21″&gt;
Follow Me
</a>
</div>
<div id=”facebook” class=”highlight”>
<a href=”http://www.facebook.com/mursakiHime”&gt;
Follow Me
</a>
</div>
You are to specify each class. It should appear as:
^for the class:
.highlight{cursor:pointer}
#twitter a{text-decoration: none; color:gray;}
#twitter a:hover {text-decoration: none; color:orange;}

.highlight{cursor:pointer}
#tumblr a{text-decoration: none; color:gray;}
#tumblr a:hover {text-decoration: none; color:orange;}

.highlight{cursor:pointer}
#facebook a{text-decoration: none; color:gray;}
#facebook a:hover {text-decoration: none; color:orange;}

^for the id:
#twitter{
font-size:13;
font-family:helvetica, sans serif;
font-weight:normal;
}
#tumblr{
font-size:15;
font-family:times new roman, sans serif;
font-weight:bold;
}
#twitter{
font-size:10;
font-family:arial, calibri;
font-weight:normal;
}

There are too much to learn and share but everything has its own end.

Remember that errors come from elements you often neglect and you think are unimportant like colon, semicolon, period, space, and in some languages, capitalization.

If you happen to have some questions, simply write a comment on this post or email me at himerej@gmail.com.
Thanks! 😀

Specifies a unique id for an element