How do I move the tabs below the blocks?

it can be done with css like:
(42 is the quicktab id)

#quicktabs-42.quicktabs_wrapper {
  width: 370px;
  height: 450px;
  border: red 1px solid;
  display: block;
}

#quicktabs-42 .quicktabs_tabs {
  margin-top: 430px;
  width: 370px;
}

#quicktabs-42 .quicktabs_main {
  clear: none;
}

#quicktabs-42 .quicktabs_tabpage {
  margin-top: -450px;
  width: 370px;
  height: 430px;
  display: block;
  overflow: auto;
}

A handbook page about this could be useful..

Which file are your required to put that in? I have put that in my last css file and I get nothing.

it could be in your theme css file (mostly style.css)

Thanks. Now I see how it works!

I used the same styles discussed above, tabs are showing at the bottom of the block.. but the tabs are not working when clicked. I am using three blocks with in quicktabs..Seems all are overlapping on one another. Also can we use images for tabs title?

Thanks

bottom tabs with a fixed height block are easily done with css. Variable height is not. The best solution would be a quicktabs.tpl, so that the html can be changed.

Hi all

Just to clarify, this doesn't actually move the tabs below. It only moves the tabs to a fixed position and forces the tab content to fit in a fixed space, therefore displaying the tabs below/

The problem is that I think it is unlikely that many people will have a fixed height tab content.

I've tried to change this in quicktabs.module but I have not succeeded yet. When moving the tabs code, they disappeared, and I could not figure out how this was working.

If anyone can give me some pointers here, I'll try again and post what I try, and how successful (or not) it is.

here is a solution that works for variable height.

.quicktabs_wrapper {
position: relative;
padding-bottom: 50px;
}

.quicktabs_tabs {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
}

I hope I will not visit any website with tabs below the content, where content height is not fixed.. Because if I have to click->scroll (or move up/down)->click to get to the next tab I will say something ugly.

For some reason, I couldn't get #1 to work. I don't know if it's how I've customized the CSS or what. I did find a solution that I haven't tested out in IE yet, but it uses a combination of negative margins and padding. It's another fixed height solution.

#quicktabs-spotlight {
	width: 100%;
	min-width: 960px;
        height: 349px;
/*	background-image: url("../images/spotlight_menu_bg.png");
	background-repeat: repeat-x;     /* Specific to my theme and may not be necessary for your theme */
	background-position: bottom; */ /* Places background of quicktabs menu */
	display: block;
}

#quicktabs-spotlight .quicktabs_tabs {
	width: 960px;
	height: 40px;
	padding-top: 309px;
	margin: 0 auto;
}

#quicktabs-spotlight .quicktabs_tabpage {
	margin: -309px auto 0 auto;
	width: 960px;
}

I hope I've contributed in a meaningful way! Please let me know if there any problems with the CSS. I'll edit this reply if I need to do some adjusting during my cross-browser compatibility testing. So far it's worked in Chrome 13 and FF 4.

Here is the full implementation of Quicktabs for a spotlight section, with the menu links on the bottom and using css sprites. I'm using Basic as my starter theme.

I still need to test this out in IE but it works with the current version of FF and Chrome. I hope this helpful for individuals wishing to accomplish something similar! This took me awhile to put all together so I thought I could provide the full set-up so you could see what is needed.

content-top.txt = CSS for content-top area

spotlight_qtblock_export.txt = Exported quicktabs block

spotlight_views_export.txt = Exported view of content for the spotlight area

theme_quicktabs_tabs.txt = Override theme_quicktabs_tabs; see http://drupal.org/node/625972#comment-4863710

page-front.txt = Adding <div id="content-inner"></div> to page-front.tpl.php
page-front.tpl.php is just a copy of page.tpl.php with the above added

spotlight.jpg = screenshot of content-top area and how it looks completed

I really hope this helps someone!!! Please let me know if you have any questions.

This looks very interesting. Not sure what to do with 'spotlight_qtblock_export.txt'. I don't see any way of importing into quicktabs (or blocks). Sorry if I'm being stupid.......

@mikeaja: When I was moving from development to production, I couldn't figure out what to do with block export as well. The help says "Place this code in your module's implementation of hook_quicktabs_default_quicktabs() to provide it as a default quicktab" but I looked and could not find. Oh well, a different issue for a different day.

I've uploaded a screenshot to this post of the quicktab block I created that will probably be more useful than the file 'spotlight_qtblock_export.txt'.

I've also included a zip file with this new screenshot and the files I attached in #13.

Just to give an update, I should have the D6 documentation up this weekend for review.

I just did this with a smidge of jQuery, which merely swaps the two div's (container and tabs).

double check the element identifiers but they should be ok

    
  Drupal.behaviors.adjustQuickTabs =  {
    attach: function(context, settings) {
    
    $('div#quicktabs-container-YOUR_CONTAINERNAME:parent').each(function () {
      $(this).insertBefore($(this).prev('.item-list'));
    });
    }
  };