My work place tasked me with trying to be as purist as possible with HTML and CSS for an interface their web application. Without any formal web development background, I have always been one of those who intermingle the code and have presentation within the HTML.
I think it came out pretty well. I separated design from content in addition to separating the dynamics. Mind you, I even separated out all the server talk and taught myself some XML/XSL in the process. After all that I learnt Ajax, without realising it.
One little nugget from all this is creating a pure CSS rollover button for the menu, without Javascript. There's alot of websites that help out in this, but they are not "pure" as they involve you including the image in the HTML and to perform some shifting with the image. Hell no to that.
My way leaves out the usual ul tag and dives straight into the anchor (a) tag as it should be:
a href="links.htm" id="linksButton" title="Links">
Embedded within the anchor is a blank image, which can be a 1-pixel transparent GIF. The image size but be set due to browsers behaving differently.
img src="assets/buttons/blank.gif" weight="45" height="45" title="Links" />
That's fine enough, but the magic is the assigned id for each anchor which must, obviously, be unique. The id is used within the CSS. First for the initial UP state:
#linksButton img {
background-image:url('./buttons/linksBtn_up.gif');
background-repeat:no-repeat;
width:45px;
height:45px;
}
Here I set the desired image icon as the background image and ensuring that it does not repeat, for safety measures. Due to browser quirks you need to set the size of the image tag here as well.
The rollover is set using the same id:
#linksButton:hover img {
background-image:url('./buttons/linkBtn_down.gif');
}
And that's it. You will have a pure CSS rollover, without any manky HTML and Javascript. This is also accessible in case you want to fulfill the WAI Triple-A Compliant guidelines by the W3C.
Beacuse it's easy, I am now a fan of puritan coding of HTML and CSS. Spread the love.
I think it came out pretty well. I separated design from content in addition to separating the dynamics. Mind you, I even separated out all the server talk and taught myself some XML/XSL in the process. After all that I learnt Ajax, without realising it.
One little nugget from all this is creating a pure CSS rollover button for the menu, without Javascript. There's alot of websites that help out in this, but they are not "pure" as they involve you including the image in the HTML and to perform some shifting with the image. Hell no to that.
My way leaves out the usual ul tag and dives straight into the anchor (a) tag as it should be:
a href="links.htm" id="linksButton" title="Links">
Embedded within the anchor is a blank image, which can be a 1-pixel transparent GIF. The image size but be set due to browsers behaving differently.
img src="assets/buttons/blank.gif" weight="45" height="45" title="Links" />
That's fine enough, but the magic is the assigned id for each anchor which must, obviously, be unique. The id is used within the CSS. First for the initial UP state:
#linksButton img {
background-image:url('./buttons/linksBtn_up.gif');
background-repeat:no-repeat;
width:45px;
height:45px;
}
Here I set the desired image icon as the background image and ensuring that it does not repeat, for safety measures. Due to browser quirks you need to set the size of the image tag here as well.
The rollover is set using the same id:
#linksButton:hover img {
background-image:url('./buttons/linkBtn_down.gif');
}
And that's it. You will have a pure CSS rollover, without any manky HTML and Javascript. This is also accessible in case you want to fulfill the WAI Triple-A Compliant guidelines by the W3C.
Beacuse it's easy, I am now a fan of puritan coding of HTML and CSS. Spread the love.
Comments