Tabbed Panel - prevent page content being pushed down

What is the setting to prevent an open tab from pushing
content down that is below it. Rather, just have the tabbed content
be presented above the content on the page. In other words, have it
behave like a menu bar with drop down boxes.
Thanks for any replies.

You're going to have to tweak the CSS so that the
TabbedPanelsContent is absolutely positioned. Start by adding rules
like this *after* the tabbed panels CSS, and tweak it from there to
suit your needs:
.TabbedPanelsContentGroup {
position: relative;
.TabbedPanelsContent {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
--== Kin ==--

Similar Messages

Content being pushed down the page

I have a two column site that I am working on and the content on the right side is being pushed way down the page when it is published. Has anyone had this happen? you can see what I am talking about at Home
Thanks for any assistance!

It is lined up now because I was messing with it last night. I have scripts and custom HTML Widgets that go down the left column that I removed when I add them back it pushes the content on the right below when published. I will put a screen shot in this post tonight when I have a chance.
Thanks for the help!

Div's being pushed down in Safari

Hi guys,
I've built a website for a client. For some unknown reason the footer content gets pushed down on the friends page in Safari and IE - all of the other pages are fine though.
Here's a link to the site
Can anyone see why this could be happening - in FF everything is fine though.
Thank you!
SM

On Win 7, Safari, IE9 and Firefox, all looks the same. I am not seeing anything different.
Jim

Tabbed Panels displaying all content in first panel

I'm trying to add a tabbed panels widget to my site but when it displays in browsers, the content from all of the tabs displays as a list in the first tab, and clicking the rest of the tabs does nothing. I just put the out-of-the-box widget onto my site and that won't work either. W3 validating only came up with one error, being: (Line 104, Column 42: there is no attribute "tabindex" <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>)
The page I thew the widget on to test it is http://www.herbsmithrx.com/test.asp
What am I missing?

You are missing the javascript constructor script, which should have been inserted on your page below your widget when you inserted the tabbed panels:
Somehow, the script is appearing above your widget in your page. Place this code BELOW your tabbed panels widget on your page:
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
That should fix it right up.
Beth

Problem with defaul tabbed panel with page refresh

Hi,
I have a problem with my spry tabbed panels. The default tab
is set to be the 1st tab, when I move to 2nd tab and navigate
through the content, as the page refreshes, and before it is fully
loaded it shows the content of the first tab for about 20 seconds
or so....then the page finally goes to the desired content on the
2nd tab....
How can I make it so this does not happen and it looks like a
smooth transition as I navigate through my pages?
Thanks,
Brandan98

U add extra classNames to the tabs and specify the styles on
the new classes
example:
<div class="TabbedPanels style1_panels" id="tp1">
<ul class="TabbedPanelsTabGroup style1_group">
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup
style1_contentgroup">
<div class="TabbedPanelsContent style1_content">Tab 1
Content</div>
<div class="TabbedPanelsContent style1_content">Tab 2
Content</div>
<div class="TabbedPanelsContent style1_content">Tab 3
Content</div>
<div class="TabbedPanelsContent style1_content">Tab 4
Content</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2
</script>
style1 beein the extra class ;)
U can also.. specify other classnames in the constructor read
more about this here:
http://labs.adobe.com/technologies/spry/articles/data_api/apis/tabbed_panels.html#options

Where clause one query not being pushed down

I am having a problem where I cannot get a certain "optional" parameter to be pushed down to a query. The parameter gets applied in memory after the result set is returned but not pushed down to the DB. The function is as follows:
declare function getFoo($key as xs:string, $optinalInput as xs:string*) as element(b:bar)*
for $foo in f:getFoo()
where $key = $foo/key
where not(exists($optinalInput)) or $foo/optional = $optinalInput<- does not get pushed down to the query
return $foo
If I make optinalInput an xs:string instead of xs:string * and the optional parameter will get pushed to the query. The problem is for this optional parameter I could get anywhere from 0-50 in the sequence. Seems like when the parameter is a sequence it doesn't get applied to the query. Is there any way around this?

Mike,
I understand the difference between * and ? and I was one of the people working on the "string-length not getting pushed" problem so I am very familiar with it. I tried you solution that you mentioned below and it still did not push the where clause to the query. I know I could achieve this with an ad-hoc query but I wanted to do a pure xquery implementation of this component because of the benefits it could have when interacting with other components in our ODSI project...such as SQL joining and potentially pushing additional where clause down from components that call this component. The only way I did get this to kind of work is to do this:
return
for $o in $optinalInput
for $foo in f:getFoo()
where $key = $foo/key
where $o = $foo/optional
return
$foo
for $count in 1
where not(exists($optinalInput))
for $foo in f:getFoo()
where $key = $foo/key
return
$foo
By putting the optional parameter into a FOR statement above the table call it guarantees that at least one will exists and that's why the optional parameter gets pushed properly to the DB with a parameterized query. The problem with this is that even though a parameterized query gets pushed it will call the SQL statement multiple times!...not good.
Another solution that was suggested to me would be to create the number of sequences for each item in the sequence and treat each item as it's own. For example if you know that the schema limits the sequence from 0..50 then you could make 50 items and 50 where clauses....probably not an optimal solution either but it would achieve properly pushing the where clause tot he DB.
For now I am satisfied with this optional parameter not being pushed to the DB because the performance was still good but it would be nice if there was a maintainable pure xquery solution to this problem.
Thanks for the help it's always appreciated!
Mike

Center content area pushed down in IE - DW three column liquid header/footer template

Here's the page I'm working on.
Safari, Chrome, and of course FF all display the top of the three content areas div's flush to the bottom of the div above (.thrColLiqHdr #navBar) Good old IE8 displaced the center div maybe 10 px lower than the left/right divs. I can move down the left/right div's, but that's sort of a hack and it looks weird if I use a left/right border in the center div.
The left div is> .thrColLiqHdr #sidebarLeft
Center div is> thrColLiqHdr #mainContent
The right div is> .thrColLiqHdr #sidebarRight
I guess IE continues to be a big PITA ...
=-John=-

I guess IE continues to be a big PITA ...
That's what Conditional Comments are for.
In your page you have this Conditional Statement for IE. Try adjusting or removing the padding-top and see if that helps.

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Tabbed Panels beneath the Content

If you want the tabs below the content instead of on top or
on the left for whatever reason here is how I've done it.
First of all, switch the tab and content DIVs in your html
file. So <ul class="TabbedPanelsTabGroup">XXXX</div> is
beneath <div
class="TabbedPanelsContentGroup">XXXX</div>.
Next open the .js file and find find
Spry.Widget.TabbedPanels.prototype.getTabGroup = function().
Replace the function body to:
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Now find
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup =
function(). Replace the function body to:
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
NOTE: you've basically just swapped the functions.
That should be it. You now might need to edit the .css file
to alter the borders so that the tabs appear correctly.

Good idea, I hope Adobe will consider it.

Fierfox prevents pages from being redirected how do I stop it?

every time I click on a link from my gmail account, firefox prevents that page to open. I have to click on the allow button on the top right. I find this inconvenient and am not used to it either.

You can turn off the redirect/reload page warning:
*''Options > Advanced > General >'' '''''un-check''''' "Warn me when websites try to redirect or reload the page"
'''If this reply solves your problem, please click "Solved It" next to this reply when <u>signed-in</u> to the forum.'''

Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver

I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LEAP 2 GROW</title>
<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<style type="text/css">

</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
    <h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
    </h1>
    <ul id="MenuBar2" class="MenuBarHorizontal">
      <li><a href="volunteer.html">VOLUNTEER</a> </li>
      <li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
      <li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
    </ul>
</div>
<div id="sidebar1">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
        <ul>
          <li><a href="mission.html">mission/overview</a></li>
          <li><a href="ourteam.html">OUR team</a></li>
        </ul>
      </li>
      <li><a href="problem.html">THE PROBLEM</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
        <ul>
          <li><a href="solution.overview.html">overview</a></li>
          <li><a href="solution.structure.html">structure</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
        <ul>
          <li><a href="parentcollege.html">parent college</a></li>
          <li><a href="mentor.html">MENTOR program</a></li>
          <li><a href="farming.html">urban farming</a></li>
          <li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
        <ul>
          <li><a href="location.fulton.html">fulton county ga</a></li>
          <li><a href="location.haiti.html">haiti</a></li>
          <li><a href="location.tribe.html">native american tribe</a></li>
        </ul>
      </li>
      <li><a href="news.html">NEWS|RESOURCES</a></li>
      <li><a href="contact.html">CONTACT US</a></li>
      <li><a href="#">DONATE</a></li>
    </ul>
</div>
<div class="style3" id="mainContent">
    <div align="left" class="style4">
      <p class="style5">MENTOR PROGRAM</p>
      <div id="TabbedPanels2" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
          <li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
          <li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
          <li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
          <li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <blockquote>
              <p><em>“Those who have the ability, have the responsibility”</em></p>
              <p><u>Avenue of attention:</u> <strong>                        MENTOR PROGRAM</strong> <br />
                Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
              <p>Two levels of involvement: </p>
              <ol>
                <li>High School Academic Mentors</li>
                <li>Community-Leader Mentors</li>
              </ol>
              <p><u>Program title:</u>                         <strong>Talent 2 Kids</strong> </p>
              <p><u>Why Program Important</u><strong>:</strong> </p>
              <ol>
              <ul>
                <li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
                <li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
                <li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
              </ul>
            </blockquote>
          </div>
          <div class="TabbedPanelsContent">Content 2</div>
          <div class="TabbedPanelsContent">Content 3</div>
          <div class="TabbedPanelsContent">Content 4</div>
          <div class="TabbedPanelsContent">Content 5</div>
          <div class="TabbedPanelsContent">Content 6</div>
        </div>
      </div>
      <p> </p>
    </div>
    <p> </p>
    <p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
      <tr>
        <td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
        <td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
        <td><div align="center"><a href="farming.html">urban farming</a></div></td>
        <td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
      </tr>
    </table>
    <p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Multi page recordset output from ASP page on Spry Tabbed Panel Widget

I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=two class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>

I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=one class="TabbedPanelsContent">Content 1</div>
    <div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Need help linking spry tabbed panel from external page

Could use some help. I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck. When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable. This is a key feature I need in a new site being developed.

I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck.
Have you tried http://foundationphp.com/tutorials/spry_url_utils.php ?
When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable.
Depending on what the code looks like, it can do all sorts of things.
Please be reminded that the best way for us to help you is by you supplying a link to your site with a one sentence description of the problem.
Gramps

Spry Tabbed Panels overwritting Flash drop down menu in IE

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve tried adding “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry Tabbed Panels overwritting Flash drop down menu in IE but display fine in Firefox

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve add “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry tabbed panels, opening a tabbed panel, problem with IE

i've have made a site, with tabbed panels,
all the pages are made of a template;
everythings works fine; in Firefox and Opera,
but only in IE when i open a tabbed panel from a menubar, the contents is opened behind my header location;
i've used spry 1.6.1 and spryUtils to open the tabbed panel.
because there no other posibilty to open a tabbed panel from my other page.
i've tested the site on CSS and all, and i've don't get any errors.
this site is only on our intranet, and DVD;
so is not a online site
i' dont have anything modified in the java script.
just changed some minor adjustments to the CSS of the tabbed panels
The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
and all other functions work normal.
i'm only a beginner at this
CSS
body,html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
body{
    color: #000;
    background-attachment: fixed;
    background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 95%;
#img2 {
    height: 2cm;
    width: 2cm;
    border:0;
#img {
    margin-right: 10px;
    height: 3cm;
    width: 3cm;
    border:0;
TD{
    font-family: Arial;
    font-size: 8pt;
    line-height: normal;
    vertical-align: top;
    text-align: left;
#header-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#header-container {
    height: 120px;
    background-repeat: repeat-x;
    background-position: left bottom;
#header {
    width: 1040px;
    margin: 0 auto;
    position: relative;
#header-content{
    width: 1040px;
    position: relative;
    background-image: url(../afbeeldingen/Sitepictures/background.jpg);
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
#header ul li {
    float: left;
    margin-right: 2px;
#container {
    width: 1040px;
    padding-top: 120px;
    padding-bottom:50px;
    background-color: #FFF;
    margin-bottom: 0px;
    left: auto;
    right: auto;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    height: auto;
    min-height:100%;
#container a:link {
    color: #00C;
    text-decoration: none;
#container a:visited {
    color: #F8495A;
    text-decoration: none;
#container a:hover {
    color: #00C;
    text-decoration: underline;
#container a:active {
    color: #00B004;
    text-decoration: none;
#kolommaker
    width:1040px;
    background-color: #CEECAE;
    height: 100%;
    float: left;
#boven {
    width: 1040px;
    position: static;
    height: 180px;
    background-color: #FFF;
#sitecontent {
    width: 1040px;
    background-color: #FFF;
    height: 100%;
#TabbedPanels1 {
    width: 1040px;
    position: static;
    background-color: #FFF;
    height: 100%;
    float: left;
.links, .rechts, .midden {
    height:100%;
    display: inline-table;
    background-color: #FFF;
.links{
    float: left;
    width: 330px;
    font-size: 12px;
    padding-top: 5px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.rechts{
    padding-top: 5px;
    float: right;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
.midden{
    padding-top: 5px;
    width: 330px;
    text-align: left;
    font-size: 12px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
#footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
#footer-container {
    height: 50px;
    background-image: url(../images/footer-bg.png);
    background-repeat: repeat-x;
    background-position: left bottom;
#footer {
    width: 1040px;
    margin: 0 auto;
    position: relative;
    background: #FFF;
#contentfooter {
    width: 1040px;
    margin-top: 0;
    margin-right: auto;
    position:relative;
    margin-bottom: 0;
    margin-left: auto;
    height:50px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #F00;
    text-align: center;
.leftfooter {
    float: left;
.rightfooter {
    float: left;
#iframe {
        height: 600px;
        min-height: 600px; }
.result_title a:link {
    color: #00C;
    text-decoration: none;
.result_title a:visited {
    color: #F8495A;
    text-decoration: none;
.result_title a:hover {
    color: #00C;
    text-decoration: underline;
.result_title a:active {
    color: #00B004;
    text-decoration: none;
.description { font-size: 100%; color: #008000; }
.docs {border:0;}
.pdf {border:0;}
.images {border:0;}
.excell {border:0;}
.exe {border:0;}
.clock {
    text-align: center;
    background: #FFF;
    border: 1px solid #CCC;
    height: 20px;
    width: 175px;
    font-size: 12px;
.clearfix {
    content:".";
    width:100%;
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
/* Hides from IE-mac \*/
.clearfix {height: 1%;} /* for IE/Mac */
CSS IE hacks
html{
    overflow: hidden;
body{
    overflow: auto;
#header-wrap, #footer-wrap {
    position: absolute;
#header-container, #footer-container,{
margin-right: 16px;
#ie6-container-wrap {
    position: absolute;
    width: 100%;
    height:100%;
    overflow:auto;
#TabbedPanels1 {
    position: absolute;
.TabbedPanels {
    position: absolute;
#boven {
    padding-top: 100px;
#container {
    padding-top: 60px;
    height :100%;
#sitecontent {
    height: 100%;
#footer-wrap {
    bottom: -1px;
#header img, #footer img
display: block;
Template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Naamloos document</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
                <li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="../Sites/login.html">Online map</a></li>
                        <li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="../Sites/Aldi.html">Aldi</a></li>
            <li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="../Sites/Bonita.html">Bonita</a></li>
            <li><a href="../Sites/Carrefour.html">Carrefour</a></li>
            <li><a href="../Sites/C&A.html">C & A</a></li>
            <li><a href="../Sites/Decathlon.html">Decathlon</a></li>
            <li><a href="../Sites/Delhaize.html">Delhaize</a></li>
            <li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="../Sites/Ikea.html">Ikea</a></li>
            <li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
            <li><a href="../Sites/Lidl.html">Lidl</a></li>
            <li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="../Sites/Scapino.html">Scapino</a></li>
            <li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
     <div id="boven">test<br />
       <br />
     </div>
     <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
        <li class="TabbedPanelsTab" tabindex="0">Tools</li>
        <li class="TabbedPanelsTab" tabindex="0">Pc's</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
        <li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
        <li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
        <li class="TabbedPanelsTab" tabindex="0">EN andere</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven
            <p>Hier wordt de inhoud voor id midden weergegeven</p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links">Hier wordt de inhoud voor id left weergegeven</div>
          <div class="rechts">Hier wordt de inhoud voor id right weergegeven</div>
          <div class="midden">Hier wordt de inhoud voor id midden weergegeven</div>
        </div>
      </div>
      <div class="clearfix:after"> </div>
</div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
PAGE where i open the tabbed panels
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Third Party</title>



<link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/stuHover.js" type="text/javascript"></script>
<script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
<script type="text/javascript" src="../Scripts/paswoord.js"></script>

</head>
<body>

<div id="header-wrap">
    <div id="header-container">
        <div id="header">
                <div id="header-content">
                <table width="890" border="0" cellspacing="1">
      <tr>
        <td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
        <td width="680">
     <span class="preload1"></span>
    <span class="preload2"></span>
        <ul id="nav">
            <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                <ul class="sub">
                <li><b>Alg. Procedure</b></li>
                <li><a href="#nogo3" class="fly">Car Policy</a>
                    <ul>
                        <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                        <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                    </ul>
                </li>
                <li><a href="#nogo7" class="fly">Gsm Policy</a>
                    <ul>
                        <li><a href="#nogo8">Gsm Policy NL</a></li>
                        <li><a href="#nogo9">Gsm Policy FR</a></li>
                    </ul>
                </li>
                <li><b>Diversen</b></li>
                <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                <li><a href="Verlof-Recup.html">Verlof</a></li>
                <li><a href="Verlof-Recup.html">Recup</a></li>
        </ul>
            </li>
            <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                <ul class="sub">
                    <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                    <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                    <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                    <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                    <li><a href="#nogo7" class="fly">Onkostennota</a>
                    <ul>
                        <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                        <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                    </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Online Tools</a>
                    <ul>
                        <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                        <li><a href="login.html">Online map</a></li>
                        <li><a href="Fujitsu.html">Fujitsu Portal</a></li>
                    </ul>
                </li>
                     <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                    <ul>
                        <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                        <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                    </ul>
                    </li>
        </ul>
    </li>
    <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
        <ul class="sub">
            <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
            <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
            <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
        <ul class="sub">
            <li><a href="Aldi.html">Aldi</a></li>
            <li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
            <li><a href="Bonita.html">Bonita</a></li>
            <li><a href="Carrefour.html">Carrefour</a></li>
            <li><a href="C&A.html">C & A</a></li>
            <li><a href="Decathlon.html">Decathlon</a></li>
            <li><a href="Delhaize.html">Delhaize</a></li>
            <li><a href="Ici Paris XL.html">Ici Paris</a></li>
            <li><a href="Ikea.html">Ikea</a></li>
            <li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
            <li><a href="Kruidvat.html">Kruidvat</a></li>
            <li><a href="Lidl.html">Lidl</a></li>
            <li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
            <li><a href="Mediamarkt.html">Mediamarkt</a></li>
            <li><a href="Scapino.html">Scapino</a></li>
            <li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
            <li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
        </ul>
    </li>
    <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
        <ul class="sub">
            <li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
            <li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
            <li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
            <li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
            <li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
            <li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
        </ul>
    </li>
    <li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
    <li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
</ul>
        </td>
      </tr>
    </table>
<table width="1038" border="0" cellspacing="1">
<tr>
    <td><form method="get" action="../indexer/search.html">
<input type="text" name="zoom_query" size="30" />
<input type="submit" value="Search" />
</form></td>
    <td> </td>
    <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
</script></div>
</td>
</tr>
</table>
         </div>
        </div>
    </div>
</div>

<div id="ie6-container-wrap" >
<div id="container">
        
<div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
        <li class="TabbedPanelsTab" tabindex="0">Scales</li>
        <li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
        <li class="TabbedPanelsTab" tabindex="0">HP</li>
        <li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
        <li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
        <li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
           <div class="links"></div>
          <div class="rechts"></div>
         <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
           <div class="rechts"></div>
          <div class="midden"></div>
        </div>
       <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
          <div class="links"></div>
          <div class="rechts"></div>
          <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
        <div class="TabbedPanelsContent">
         <div class="links"></div>
         <div class="rechts"></div>
        <div class="midden"></div>
        </div>
      </div>
       <div class="clearfix:after"> </div>
    </div>

    </div>
    <div class="clearfix:after"> </div>
</div>

<div id="footer-wrap">
    <div id="footer-container">
        <div id="footer">
         <div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
       <div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
        </div>
    </div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
TABBED PANELS CSS
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: static;
    float: left;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: static;
    top: 1px;
    float: left;
    font: bold 0.7em sans-serif;
    background-color: #FF0033;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    margin-top: 0px;
    margin-right: 1px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 4px;
    padding-right: 5px;
    padding-bottom: 4px;
    padding-left: 5px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #75A7D0;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    border-bottom: 2px solid #EEE;
    color: #FFF;
    background-color: #000;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: black;
    text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    float: left;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    padding: 4px;
    height: 100%;
    width: 1032px;
    float: left;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
    background-color: #FFF;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #CCC;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;

added also the css for the menubar
pro_dropdown_3.css
.preload1 {
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
.preload2 {
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
#nav {
    padding:0;
    margin:0;
    list-style:none;
    height:38px;
    position:relative;
    z-index:500;
    font-family:arial, verdana, sans-serif;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: repeat-x;
#nav li.top {
    display:block;
    float:left;
    width: auto;
#nav li a.top_link {
    display:block;
    float:left;
    height:35px;
    line-height:33px;
    color:#ccc;
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    cursor:pointer;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    width: 85px;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 2px;
#nav li a.top_link span {
    float:left;
    display:block;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
    background-repeat: no-repeat;
    background-position: right top;
    width: 70px;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
#nav li a.top_link span.down {
    float:left;
    display:block;
    padding:0 10px 0 12px;
    height:35px;
    background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link {
    color:#fff;
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
#nav li:hover a.top_link span {
    background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
    background-repeat: no-repeat;
    background-position: right top;
#nav li:hover a.top_link span.down {
    padding-bottom:3px;
    background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
    background-repeat: no-repeat;
    background-position: right top;
/* Default list styling */
#nav li:hover {position:relative; z-index:200;}
#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
    color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
    color:#fff;
    border-color:#fff;
    background-color: #3f96a9;
    background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
    color:#000;
    border-color:#50b5d0;
    background-color: #50b5d0;
    background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
    background-repeat: no-repeat;
    background-position: 80px 6px;

Tabbed Panel - prevent page content being pushed down

Similar Messages

Maybe you are looking for