deniskoo blog - C#, HTML, XHTML, CSS, Javascript, Project Management

Showing posts with label CSS. Show all posts

Saturday, December 19, 2009

JQuery Lightbox - PrettyPhoto

Stumbled across one of the best, in my humble opinion, JQuery Lightbox that provides a cool lightbox effect while displaying your galleries and movie clips as well.
Worth checking it out:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Merry Christmas all, and a Happy New Year 2010!

Tuesday, July 21, 2009

Designing a web page - how to set up your template with HTML and CSS

Getting web projects might sound like a long and hard journey, coding your way through HTML and CSS (including Javascript, Flash, etc) while trying to keep an optimal standard for XHTML Strict 1.0 and CSS 2.1.

However, this is not as complicated as it seems. My personal approach to design a webpage for clients is to follow a set of simple guidelines, that can help in planning and achieving the desired results.

1)
Draw/Sketch your index.html page (main page). You should know where you are going to place the main sections of your page. No coding at this stage is involved.
e.g. Conceptualise your webpage by sections and categories. You might want a head section (logo, website title), the links section (underneath the head or at the left-hand side of the page), a content section and a footer for your copyrighting and disclaimer texts or a sitemap of your website.

2) Create your HTML and CSS page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Tutorial - Getting Started!</title>
    <link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>

</body>
</html>

Note that for this tutorial, the doctype is Transitional. If you feel confident in your web coding skills, go for Strict. Do not forget to validate your HTML and CSS pages if you want to abide by the futureproof standards of the W3C!

3)
Next stop: transfer those sections into HTML code. Piece of cake if you want my opinion. To maintain a consistent page and to separate content and presentation (and for a neat code!), use divs. NO TABLES PLEASE!
Why so you might ask? Well, if you need to re-organise your sections (e.g. you want your links section to be on the left-hand side of the webpage instead of the top section, you just have to change the CSS (discussed below), without changing the HTML page. This will help you achieve a tidy and efficient code, and it takes a few seconds to do it).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Tutorial - Getting Started!</title>
    <link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body>
<div id="wrapper">
    <div id="top">
    <h1>Getting Started!</h1></div>
    <div id="links"></div>
    <div id="main"></div>
    <div id="bottom"></div>
</div><!-- end wrapper -->

</body>
</html>

Note:
I like my page to be centered. Have you noticed that a website looks kinda amateurish and poorly designed when the page is glued to the left? I am sure you don't want that.

4) Now, the interesting part: CSS!
I usually use a body width of 850px that will contain the whole page. Why? Because you have to think about users with low screen resolution. I would recommend 800-850px for the page width (screen excluding borders), but you can change the width depending on your requirements. To achieve this and to contain all the contents in a 850px-wide div, I use the 'wrapper' section.


#wrapper
{
    width:850px;
    margin:0 auto;
}

#top
{
    width:850px;
    position:relative;
    float:left;
}

#links
{
    width:200px;
    position:relative;
    float:left;
}

#main
{
    width:650px;
    position:relative;
    float:left;
}

#bottom
{
    width:850px;
    position:relative;
    float:left;
}

5) You might also want to specify the font types to be used and the sizes. It is recommended to place your text styles into your 'body' section in the CSS so that everything that you enclose within your body or content section reflects the type changes.


body
{
    background-color:black;
    font-family:helvetica;
    color:#ffffff;
    font-size:14px;
}

/***** Text Formatting *****/
h1
{
    font-size:20px;
}

h2
{
    font-size:18px;
}

Here, it takes less than 20 minutes to do this. This will provide for the structure of your website and everything can be modified from there (width, font, section/div arrangements). Now all you need is to use your creativity and design skills to make your website attractive! The use of pictures for the background, sections and so on is highly recommended!

Sunday, June 21, 2009

Nomadic Hands - Volunteer Required for a Website

Hi guys

I just bumped into this webdesign ad and wanted to share it with you.

The person needs a complete re-design for her website, and it would help you enhance your HTML/CSS skills if you apply for this job.

I have donated a template, but she might want to do changes on it.

The website to be changed is

http://nomadichands.com

Please let me know if you are interested :)

Thursday, April 2, 2009

Assignment due next week - Shanti's Travel Agency

I have uploaded my assignment on my website. It's nothing exceptional, pretty plain but straight to the point. Some plain javascript validations on the form.

http://denisk.webs.com/creative.html

Pages are XHTML & CSS1.2 compliant. What do you think?

Wednesday, April 1, 2009

Javascript Homework

Here are my homework answers. Anyone managed to find the exact age, without using if-else structures using the Month values?

Question 1,2,3,4


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
       <title></title>
   </head>
   <body>
   <script type="text/javascript">
       document.write("<h1>Question 1</h1>");
       document.write("Result of 0xab00 + 0xcd = ");
       document.write(0xab00 + 0xcd + "<br />");
       document.write("Result of 0xff - 0123 = ");
       document.write(0xff - 0123 + "<br  />");
     
       document.write("<br /><br />");    /* Some Space */
     
       document.write("<h1>Question 2</h1>");
       document.write("Result of -4.321 + 55.  = ");
       document.write(-4.321 + 55. + "<br/>");
       document.write("Result of 12e2 - 1e-2 = ");
       document.write(12e2 - 1e-2 + "<br/>");
       document.write("Result of .5  -  4e-4 = ");
       document.write(.5  -  4e-4  + "<br/>");
     
       document.write("<br /><br />");    /* Some Space */
     
       document.write("<h1>Question 3</h1>");
       document.write("Result of true * 5 + false * 7  = ");
       document.write(true * 5 + false * 7  + "<br/>");
     
       document.write("<br /><br />");    /* Some Space */
       document.write("<h1>Question 4 - Create a face</h1>");
     
       document.write("<pre>    \"\"\"\"\"\"\"<br />  
\"\"\"\"\"\"\"\"\"<br />  --\"\"\" \"\"\"--<br />  <
<.> <.> ><br />      / \\<br />   
\\-----/<br />     --\"--<br /></pre>");

       document.write("<br /><br />");    /* Some Space */


   </script>
   </body>
</html>

Question 5


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     
       <title></title>
   </head>
   <body>
   <p>
   Use pop-up boxes to get a name, date of birth (date, month, and year in separate boxes) and
display the name, date of birth, and age on a table.
   </p>
   <script type="text/javascript">
       var name = prompt("Enter name ");
       var date = prompt("Enter birth date ");
       var month = prompt("Enter birth month ");
       var year = prompt("Enter birth year ");
     
       var todate = new Date();
       var elapsedYear= todate.getYear();
       var currentYear= parseInt(elapsedYear) + 1900;
       var age = currentYear - year;
     
       document.write( "<table style=\"border:solid 2px\"'><tr><td>Name<
/td><td>DOB</td><td>Age</td><tr><td>"+ name +
"</td> <td>" + date+"/"+month+ "/" + year +"</td> <td>" + age +
"</td></tr></table>");
 
   </script>
   </body>
</html>

Wednesday, March 25, 2009

Using CSS to create navigation buttons/bar/dropdowns

As per Misa's request, the link below shows how you can use CSS to create navigation buttons and dropdowns. I found this site to be very educational and very rich in terms of content and creativity.

http://www.cssplay.co.uk/

Have Your Say!

If you are copying-pasting, the file organisation is as follows:

.myHTML.html
.mysay.css
/images/bg.png
/images/textbg.gif

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="yoursay.css" />
<title>Have your Say!</title>
</head>
<body>
  <div id="wrapper">
      <div id="formcontrols">
          <form action="" method="post">
          Name
          <br/>
          <input type="text" name="myname" size="30" id="eachcontrol" />
          <br/><br/>
          Email
          <br/>
          <input type="text" name="myemail" size="30" id="eachcontrol" />
          <br/><br/>
       
          http://
          <br/>
          <input type="text" name="myhttp" size="30" id="eachcontrol" />
          <br/><br/>


          Comments
          <br/>
          <textarea name="myComments" rows="2" cols="23" id="eachcontrol" >
          </textarea>
          <br/><br/>
       
          <input type="button" name="preview" value="PREVIEW" class=
"previewbtn"/>
          <br/><br/>
       
          Remember details?<br/>
          <input type="checkbox" name="chkremember" />
          <br/><br/>
          </form>
      </div>
      <div id="myColumn">
          <h3>HAVE YOUR SAY</h3>
          <div id="content">
              <p>Feel free top publish your thoughts but please be judicious
when communicating I am.</p>
              <p>Gravatars are enabled. Go get yourself one.</p>
              <p>All the cool kids use Textile.</p>
              <p>Email address is required but will not be posted or
distributed.</p>
          </div>
      </div>
  </div>
</body>

</html>

CSS

body
{
 font-family:Verdana;
 font-size:16px;
 color:#ffffff;
 margin:0 auto;

}

h3{
 width:350px;
 border-width: 0px 0px 3px 0px;
 border-style:dashed;
 font-size:30px;
 padding:12px;
 text-align:center;
 background-color:orange;
 margin:10px 0px 10px 0px;
 padding:2px 2px 5px 2px;
}

#wrapper
{
 margin:50px;
 float:left;
 background-image:url('images/bg.png');
 background-repeat:repeat;
 width:700px;
}

#formcontrols
{
 width:280px;
 float:left;
 padding:10px;
}

#myColumn{
 width:380px;
 float:left;

}

#content{
 margin-left:30px;
 width:300px;
 float:left;
}

#eachcontrol
{
 background-image:url('images/textbg.gif');
 background-repeat:repeat;
}

.previewbtn
{
 border:3px solid;
 border-color: #ffffff #000000 #000000 #ffffff;
 color:#ffffff;
 background-image:url('images/bg.png');
 background-repeat:repeat;
 padding:7px 20px 7px 20px;
}

Friday, March 20, 2009

CSS - My two cents' worth

CSS Basics

1) How to use CSS?
You can use CSS in 3 ways:

Using inline CSS means that you use your styling elements within the tags in the HTML. You will use the <style> tag to do so.
e.g.
<body style="background-color:blue; font-weight:bold">
Using internal CSS means that you define all your styling elements for each tag you are using in the <head> section.
e.g.

<style type="text/css">

</style>
External Style Sheets: using a file with extension .CSS that will contain all the styling elements that you would normally put in the head section. This improves readability of your code and helps achieving separation of content from form/design.

2) How to use external CSS?

<head>
<link type=”text/css” rel=”stylesheet” href=”mystyle.css”>
</head>

3) How to use Classes?
Say for example, you want all your paragraphs <p> to be black, except for one paragraph that would be red.
The solution is to use a class, that will be applied for only this particular paragraph.
e.g.

p.warning {color: red;}
…
<p class="warning">This is red. </p>

Note: You can also create classes that will apply to any tag (generic classes).
e.g.
.mycolor{color: red;}

<p class=”mycolor”>A red body text.</p>

<h1 class=”mycolor”>A red headline.</h1>

4) What are IDs? What is the difference between IDs and Classes?
The ID selectors and generic classes are very similar, except for the fact the an ID is supposed to be used only once.
e.g.

#myID{color:green;font-size:10px}

<p id="myID">my green paragraph</p>

5) What if I want one paragraph to be in red, and one sentence of that paragraph in bold?
Well, we could use the <bold> tag which will contain the sentence, but it is not XHTML compliant and the bold tag is deprecated.
The solution is to use the <span> tag.
e.g.

.myBold{font-weight:bold}

<p>This paragraph has the browser default formatting, but <span class="myBold"> this sentence is bold, without making any change to the paragraph selector.</span> This sentence is back to browser default formatting for a paragraph tag. </p>

Using DIVs

Divs tags are used to separate contents in blocks, or more specifically, divides sections in the html file (content).

When you have your contents divided in a number of divs, you can apply whatever fancy styles to your divs for formatting, presentation, design etc (CSS).

Below are the CSS tag styles (tested and optimised on IE 7 only, but works fine in Firefox/Safari)
Just add it in an external css file, and link to it in your html using the <link> tag in the <head> section.

Note: I added a Header (H3) in the HTML file for HTML and CSS in the boxes to the right, so that the whole line is gray.

html{
font-family:"Times New Roman";
color:black;
margin: 0 auto; /* Centred Page */
width:800px;
margin-left:100px;
font-size:14px;
}
#heading{
font-size:20px;
font-weight:bold;
margin:10px 0px 0px 0px;
}

#navigation,#footer{
color:orange;
text-transform:uppercase;
font-weight:bold;
margin:0px 10px 0px 0px;
}

#content{
width:790px;
}

#text{
float:left;
width:500px;
}

#summary{
float:left;
width:250px;
}

#html,#css{
width:300px;
border:thin;
border-style:solid;
border-color:gray;
margin: 0px 20px 10px 20px;
}

h3{
background:gray;
font-size:14px;
color:white;
}

.cssgraybackground{
background:gray;
}
a{
color:orange;
}
ul{
margin-left:0px;
margin-top:30px;
margin-bottom:30px;
margin-right:10px;
}

li{
list-style-type:none;
display:inline;
border-style:solid;
border-color:white gray white white;
border-width:2px;
margin: 0px 0px 0px 0px;
}

Thursday, March 19, 2009

Hello World!

Hello there Cert IV Students (IT Programming)!

I've just set up this blog today 19 March 2009 [23 38] so that we can relax in our own comfort at home with a cup of coffee and discuss about anything related to our TAFE course (Cert IV IT Programming), or anything really...

Topics might include

Classwork related(C#, HTML, XHTML, CSS, and even how to create a blog or how to use diigo)
Homework - Let's discuss the possible solutions to any particular problem and the different algorithms or ways to tackle them (one problem --> many solutions)
Websites worth mentioning
the weather, good plans, outings etc

and are non-exhaustive.

I will also post weekly solutions to the classes, so check the website regularly, or add it to your CSS feed on diigo, or click FOLLOW ME link on the right hand side of this page.

As from today, I will update the solutions on the blog. If you have any questions, please do ask. Do not be shy. Everyone can give their own views on this blog. You are ENCOURAGED to do so.

Let's make this place an extra knowledge hub that will complement our classes!

deniskoo blog - C#, HTML, XHTML, CSS, Javascript, Project Management - WEB 2.0