It all started with block level and inline level elements. Unfortunately, this should be the first HTML class for anyone, but due to obvious reasons and since many of students want to quickly start coding HTML, it is often skipped.
You see, HTML is divided into two types of elements, block and inline level. Although there are quiet a few characteristics to each, one of the fundamental differences is that Block level include a built-in line break while the inline level doesn’t.
a <p> for example, is a block level element, with the unique exemption than <p> can’t nest another <p>.
Now, it all starts to make sense, you know discovered why <div>,<br />, <p>, <h1>, etc. once closed, the next element starts automatically on a new line.
Since I said earlier improper nesting affects CSS and the Doctype, lets see why.
Every time you follow best practices and declare a Doctype to each one of your pages, you, without knowing, are setting a rule that will affect the CSS where it will force it to review the nesting of all your tags. Yes, believe it or not, some rare cases of why CSS rules can’t be applied are directly link to improper nesting of tags.
<div> as a block level element allows <p> to be nested inside but even the number of nesting within can in some cases be affected.
I hope this clears some of your confusion regarding proper nesting.
]]>Unfortunately, one key component for any page nowadays is the use of Tabs, which is not a Widget that can easily be dragged and drop on today’s version of Axure.
Here is a simple way to create the popular tab behavior, which unfortunately, is nowhere to be found when you search the Axure site.
1. Drag a Dynamic Panel from the Widgets panel.
2. Right-click the dynamic panel and select Edit Dynamic Panel > Manage Panel States
3. Add as many States as tabs you’ll need.
4. Select State1 and click Edit State
The trick here is to use the same elements in each state and use the buttons for decoration instead of functionality. In other words, in order to get the look and feel of tabs, each State has to have the same content, except for the body of the tag itself, of course.
This approach will allow you to customize the look and feel of each button on each State thus you simulate the tab been selected and changing color.
In order to wrap this up, you simply need to add an Image Map widget to the top of the Dynamic Panel so you can create the click events (i.e. Image Map1 > State1, Image Map2 > State2, etc etc etc)
That’s all! now, wasn’t that easy?
]]>Conditional Statements give you the control you need to select and load an given stylesheet depending merely on the browser the user is using or an specific version of it.
Although some sites say that Conditional Statements are only meant to work with IE, today Opera and Firefox reads them too.
Here is a quick example of how they work:
<!--[if IE]>
IE will do something here
<![endif]–>
Conditional Statements belong in the Head of each HTML document. Normally below meta data but before the closing Head tag (’</head>’)
<HTML>
<head>
<title>Some name here </title>
<!-- [start condition]>
<link rel=”stylesheet” type=”text/css” href=”"ilename.css” media=”all” />
<![end condition]–>
</head>
Here is where it gets tricky. Some sites, such as quirksmode.org (which I use all the time!) describe this approach as a simple call to a version such as 5.5 or 7.0 when in really, this will not work. Even Microsoft posted an article which explains the lack of IE to identify a version while using Conditional Statements.
So it can’t be done? wait, it can. Simply add 4 decimals to your condition in order to get it to work.
<!--[if IE 5.5000]>
Only if IE is version 5.5 you will see what you put in here
<![endif]–>
Wondering how we can check if the browser is Opera or Firefox? well, is simple too.
<![if !IE]>
IE will do something here
<![endif]>
NOTE: Notice that the begging and the end of the condition is a little different, so don’t just copy and paste. When checking if the browser is not IE, is important you omit the dashes.
]]>