August 17, 2007

Horizontal Label Display:SOS!

I have always wanted a horizontal label display.

UPDATED:
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'>

Save.

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;
list-style:none;
padding: 7px
}

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

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

3 comments:

Milton Ramirez said...

Nice work! I wonder whether you can limit the number of labels used in the header. As you can see in our blog we have more than dozen of labels that will need to be shorten in order to work in the header. Any ideas?

diddy47 said...

I think its possible to limit the number labels on display.But am still researching on that...will propb have an answer in a few days

Milton Ramirez said...

Hey! Keep it up.