Sidebar horizontal instead of vertical?


Author Message
Craig

Posted: 6/21/2011
Quote message 

Hi Everyone, is it possible to make a sidebar of blocks go horizontal across the top or bottom of the page instead of down one side?

Kind of like the bottom of this page -

http://www.freestyletrainingcenter.com/

Thanks!

Craig
 
Nick

Posted: 6/22/2011
Quote message 

These are NOT sidebars.
 
Paul

Posted: 6/22/2011
Quote message 

Hi Craig,

Those are DIV sections across the bottom and as far as I can see Blocks go Vertical only.

You could probably emulate "Horizontal Blocks" by using a table within the Article Tab - altho the artisteer tables leave a lot of code within the page HTML. However you would need that table on every page!

Probably not much help to you,

Cheers
Paul
 
Craig

Posted: 6/22/2011
Quote message 

Thanks, I can do the CSS by hand in dreamweaver I suppose but I wanted to make artisteer do it because I like being able to manipulate everything from within the interface..

Craig
 
Mark C

Posted: 6/22/2011
Quote message 

You can download some of the free templates and they have this kind of approach in them. Then you can just copy and paste the code from the files that are generated, and it'll save you some time (though it will not be a sidebar going horizontally).


 
Clippy

Posted: 6/23/2011
Quote message 

Whoa whoa whoa whoa... WordPress sidebars have no "horizontal" or "vertical" - they are displayed any way your CSS tells it to display.

Horizontal sidebars most certainly can exist, and there's no need for tables!

(Granted, they should have called them Widgetized Areas officially, but whatever.)

Just
1. make your widgets,

2. place them in the whichever top or bottom widget area you prefer (or anywhere else, really),

3. load the page in your browser,

4. and view the source to get the IDs of each widget. Look for
<div-id=
to find them.

They'll be formatted like "text-3" or "tag_cloud-4".

Next, add the following to your style.css file (remembering to use your actual widget IDs):

#text-3
{
float: left;
width: 25%;
}

#text-4
{
float: left;
width: 25%;
}

#tag_cloud-4
{
float: left;
width: 50%;
}

You can add any other specific styling rules you'd like, as well. If it overflows, simply lower the percentages (sandboxing this in Firebug makes the process a snap). You can use pixel values, as well. You can even specify height if it tickles your fancy.

It's possible that you don't want to do this with widgets, and that's fine. It is definitely possible, though.
 
Clippy

Posted: 6/23/2011
Quote message 

BTW, it's possible you're trying to do this in HTML mode, but since you'd linked to a WordPress theme, I may have erroneously assumed you're making a WP theme.

In any case, the principle is exactly the same - except you'll assign your own div IDs (personally I'd go with classes) - so it may be even easier.
 
Nick

Posted: 6/24/2011
Quote message 

Use the 4 footer Widgets. I'm not even a Wordpress user...
 
Clippy

Posted: 6/24/2011
Quote message 

Quote Nick:

Use the 4 footer Widgets. I'm not even a Wordpress user...

...Or use the CSS floats as intended - and place the widgets ANYWHERE on any page, instead of relying on the pre-fab widgets and using conditional statements to prevent them from displaying on all the other pages........
 
Craig

Posted: 7/1/2011
Quote message 

Thanks Guys, not sure how it got WP in it I AM trying to do it in HTML mode so it might be easier. I'll give that info a try!

Craig