HiTechEdge

Tag: css

  • Developing Your Site Within W3C and CSS Guide Lines

    Developing Your Site Within W3C and CSS Guide Lines

    Having been in the web development life cycle for many years, I have learned the reality of trying to stick to HTML/XHTML best coding practices, which include being as much W3C compliant as possible, but in the real world, not all web browsers are created equal, that we can only wish!

    It is still most beneficial as a programmer to follow a standard flow of key decision choices, that is to keep future modifications and improvements easier and leads to  quicker maintenance of your current website’s needs. It can also be easier for people new to your project or site to get acquainted with how its setup in both the front-end and back-end aspects of it.

    While being able to have a nice shiny W3C compliant badge, may be cool, it surely does not mean that your site is going to just simply look the exact same in the currently most used web browsers by your visitors, let alone any really older or non-common web browsers.

    In fact, having such a badge, and forgetting to check the compliance results from W3C’s online tools, may lead to a negative effect, where the visitor clicks on it, and because you didn’t confirm every page is complaint, one single html, xhtml or css level error will display a nasty non-compliance screen.

    That is something you want to avoid, as it makes your site seem as if it was poorly put together, which is most likely not the case at all. As you can see above, even big name sites, do not follow compliance, and may even have hundreds of erroneous reports from online compliance validation tools, while their website looks and functions without any issue.

    The best recommendations I have for people is to keep your code as clean and human readable as possible, along with attempting to follow standards as much as you can, and if you need to utilize some non standard, or non compliance code, its fine, go ahead.

    Truly, as long as your website fully functions properly for your audiences needs, you are actually ahead of the curve. A lot of sites still to this day have things that do not work in Firefox or Chrome, and only work properly in Internet Explorer, sometimes even specific older version of it.

    Another thing to consider is switching your document type, as typically I utilize XHTML with Transitional, meaning some “older” style HTML is allowed, such a table-specific items, this may allow what you were trying to accomplish and might put you that much closer to compliance validation.

    Also keep in mind to always cross browser test not just in each web browser, but also in many different (most commonly used/recent) versions, and on different computers, as things like font sizes and generic style sheet rules may surprise you on a certain combination of browser, version and operating system.

    Bonus Tip: Different sites will attract different user types, meaning even further potential browser support that you must maintain, you should utilize tools like Google Analytic’s to identify which browsers your visitors are using.

    If you have any questions or comments, feel free to reply. Thanks!

    Comments

  • Create A Rollover Button with CSS

    Create A Rollover Button with CSS

    In this tutorial I will run you through some very simple steps on creating a rollover button by using Photoshop, CSS, and HTML.

    In a previous tutorial I showed you how to create a social networking sticker icon, so I am going to use that in this tutorial.

    For this tutorial you will need photoshop or equivalent and also an html software such as Dreamweaver, which is what I will be using.

    The first step is to open up your image and save two images. The first image will be the sticker and the second image will be a sticker that has been peeled back.

    To make this easier here is the .psd file for this tutorial.

    Open up the .psd file and you will see layers in your palette.

    And this on your canvas:

    You can see the fold layer is showing on top of the sticker so you can hide that layer by clicking the little eye icon beside the layer in your palette window.

    As you can see there is still a layer showing that does not need to be for our first image so hide the layer underneath the group “twitter”

    After that you should have the first sticker image ready for saving. I am going to save my images as .png files so they can be transparent on any background color. To save an image as a .png file hide your background layer so there is no white background behind the sticker.

    Once you hide your background layer you should see little blocks behind the sticker:

    Now go to file>>save for web… or use the keyboard shortcut Alt+Shift+Ctrl+S

    When you use that featured it will open a window where you can choose what file type you want to save the image as.

    Go to the right side and in the drop down choose png-24 …

    Save all of these files in the same folder because this will make the tutorial easier later.

    So I will save mine as rollover1.png

    For the 2nd image unhide the two layers we previously hid and hide the other layers except for the “twitter” group.

    Now I will save this file as rollover2.png

    That is all we need to do in photoshop, now I will move on to my HTML editing software dreamweaver mx.

    I will hit ctrl+n in dreamweaver to start a new document and pick a basic page as html.

    Then I will go ahead and save my html file in the same folder as my images called rolloverbutton-tutorial.html

    One thing I really like about dreamweaver is how the screen is split into a design view and a code view. At the top is the code view and here is what it contains as default.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

<body> </body>

    Next between the “body” tags in my code view I am going to write “Twitter”…

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

<body> Twitter </body>

    I want the Twitter text to have a clickable link over it so in my html program I will highlight the text in design view

    Now in the properties of at the bottom of my window I will type in http://www.twitter.com

    Now you can see the link is clickable in the design view and also an “a href” tag was added around the text in the code view.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

<body> <a href="http://www.twitter.com">Twitter</a> </body>

    Next I will start creating the stylesheet needed for the rollover button. You can do an external stylesheet or one directly in the html. I will show you the one directly in the html since this is a beginner css tutorial.

    Under your </head> tag write <style type=”text/css”> and when you do that in dreamweaver a closing tag will automatically generate </style>

    After doing that I currently have this in my code now

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<style type="text/css">
</style>

<body> <a href="http://www.twitter.com">Twitter</a> </body>

    The coding for the rollover will be very simple. I want to add a div tag around the text so I can control it with CSS styles. So you need to decide what you want to call the div that will surround the “Twitter” text. I will call mine “rollovericons”.

    So above your twitter text write <div class=”rollovericons”> .. The class is telling the html which css style to use.

    Yet again dreamweaver will create a closing tag automatically and put it after the the div just made. So put the closing div under the twitter text a href tag.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<style type="text/css">
</style>

<body>
    <div class="rollovericons"> <a href="http://www.twitter.com">Twitter</a> </div>
</body>

    Now its time to define some styles to use in the html. In the next code view I will show you all the css I created for this document and explain it from there. I will put little comments in the actual code view.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<style type="text/css">
.rollovericons a#twitter{ /* This will be the main css that defines what the link on the Twitter text will do since it has an a href tag around it. the #twitter is an ID that will be placed in the a href tag */ display: block; /* this tells the a href link to display as an area so the image will show up correctly. */ width:193px; /* defniing the width of the icon image */ height:192px; /* defniing the height of the icon image */ background: url(rollover1.png) no-repeat; /* this tells the path to display for the image */ } .rollovericons a:hover#twitter{ /* this will define what happens to the a href link when when you roll over it with the mouse */ background: url(rollover2.png) no-repeat; /* this tells the path to display for the image */ } .rollovericons a span{ /* this will be another tag placed around the twitter text a href tag to make the font disapear */ display: none; }
</style>

<body>
<div class="rollovericons"> <a href="http://www.twitter.com">Twitter</a> </div>
</body>

    Here is what I will add to the twitter text, <a href=”http://www.twitter.com” id=”twitter” title=”Join Us On Twitter!”><span>Twitter</span></a>Now that you defined your CSS you just need to add a few things in the twitter text a href to get it to display the icon correctly.

    The id=”twitter” is the part of the css that has #twitter and the span added will make the font disapear. Also the title that says “Join Us On Twitter!” will pop up when highlighting over the button.

    Here is the final working code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Rollover Icon Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>
<style type="text/css">
.rollovericons a#twitter{ display: block; width:193px; height:192px; background: url(rollover1.png) no-repeat; } .rollovericons a:hover#twitter{ background: url(rollover2.png) no-repeat; } .rollovericons a span{ display: none; }
</style>

<body>
<div class="rollovericons"> <a href="http://www.twitter.com" id="twitter" title="Join Us On Twitter!"><span>Twitter</span></a> </div>
</body>

    Now if I preview my html I will see thisAs long as you save your html document and images in the same folder the images should show up fine.

    And if I roll my mouse over it this will happen

    Test the button out for yourself here

    I went an extra step to show you how you can make 3 types of social icons do the same thing and you can view the code to see the CSS involved.

    Check out the more complex version!

    Thanks for reading, I hope you learned something from this!