If we fail to anticipate the unforeseen or expect the unexpected in a universe of infinite possibilities, we may find ourselves at the mercy of anyone or anything that cannot be programmed, categorized or easily referenced.

August 17, 2007

Horizontal Label Display:SOS!

I have always wanted a horizontal label display.

Whenever I tried to implement it something never seemed to work. Either the display was not exactly linear but zigzag or the labels blinked when i hovered on them. So for a while i gave up this dream. but now i got rid of the bugs and here is the updated , works-in all browsers (including IE) -horizontal label display.

It was only when I saw on a couple of blogs that Ramani had achieved this, the yesterday i saw Belajimez had a similar function but using LinkList.

I figured this was easier to blogopsy and what i have come up with you can see here in the different browsers. THE DISPLAY WORKS FINE IN ALL THESE BROWSERS

Iceweasel.....Firefox....Konqueror......Firefox.....and now IE too!

Here is what I did after the blogopsy:

<b:section class='header' id='header' maxwidgets='1 showaddelement='no'>

changed it to:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>


Move this

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

from under this section:

<b:section class='sidebar' id='sidebar' preferred='yes'>

To under this section:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

NOTE: You can change the function if you like to a linkList. Just replace all the Label1 with LinkList1 or Label# with any LinkList# if you have multipe linklists or labellists.

CSS body:

#Label1 h2 {display:none;}

#Label1 ul {
margin: 0px; padding: 0px; float: left; width: 98%;
font--family: Tahoma; font-size:13px; font-weight: bold; border-bottom: 1px solid #50575F;
background: black url(http://kundaistreet.googlepages.com/iddle.gif) center center repeat-x;
padding: 7px;

#Label1 li {
display: inline;
padding: 7px

#Label1 a:hover {
color: #FFFFFF !important;
background: transparent url(http://kundaistreet.googlepages.com/active.gif) center center repeat-x;outline:none;

Then paste this code (or your edited version) in the CSS body and save...

No comments yet