Need help with exhibit list layout

twistless / 2012-01-12 00:04:17   

I'm working with the Columner theme template. I've been able to change the type, color, and placement of the sections through the CSS, but I'm having trouble with the exhibit list.

Once 'Work' is clicked, I also want the exhibit list to appear (not until then). Once they appear I want them to show up along the left side of the page down below the sections. As you can see, right now they are also jamming together and wrapping. As much as I have done a slew of trial and error, I can't seem to affect this (especially the wrapping). Can anyone help out? Is there a way to allot more space for these without effecting column width? Thanks!

http://twistless.net/indextest/

G470 / 2012-01-12 06:59:01   

Hi,

first step is to remove the width of 70px:

#menu ul {
float: left;
width: 70px;
height: 100%;
list-style-type: none;
overflow: hidden;
margin: 32px 10px 0px 0px;
padding: 0px 0px 20px 0px;
}

then add a line-height to the list:

#menu ul li {
font-family: GothamHTF-BoldCondensed, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 18pt;
width: auto;
margin: 0px 0px 2px 0px;
line-height: 30px;
}

for list toggle function, search the forum for "expanding menu" ;)

twistless / 2012-01-12 12:14:02   

Thanks so much for responding! This helped, but added some new problems. Without the column width, my exhibits are allowed to run out fully. But now they are shifting the other columns over. Is there a way to tell the columns to ignore? I'm going to investigate the expanding menu, since this will likely affect what is going on as well.

Again, thanks so much.

http://twistless.net/indextest/

twistless / 2012-01-12 12:43:21   

Ok, so I've gotten the expanding menu to work, and still need to work on how that is expanding, but... I'm not sure why that section title is shifted down just slightly, and not sure how to fix it either. This happened when I did the above fix, not when I added the expanding menu. Thanks again!! Making progress.

G470 / 2012-01-13 02:39:47   

... don´t know if this is what you mean but Work got it´s own css class cause it´s a section title. About and Contact are just ordinary links without a class so they are styled different.

twistless / 2012-01-15 20:33:15   

Ok! Thanks so much thus far. I'm making such progress (with absolutely no coding knowledge whatsoever). I've pushed through font hosting, a horizonal expanding menu, color, placement, etc.

http://twistless.net/indextest/

But as you can see, I'm running into problems with the section title "Work" not aligning correctly. Try as I might, I can't get it to sit right. It would seem to me that it is being pushed down by another title's margin? What leads me to believe this is that when I click "work" and the other menu titles slide down, "work" slides up into position correctly.

There are some other wonky things going on while the expanding menu is opening (other menu titles shifting, then returning to position). Any idea on what is going on here? I've tried just about everything I can think of.

It's also a bit unfortunate that I can't affect the exhibit titles without affecting the other section titles (it would be nice if they could be thin (not bold), but I'll take what I can get!

Will be really happy to share the coding for how this all worked once I get it squared. I realize that my "built with indexhibit" is not showing up, and I'm not sure why right now, but I will rectify that by the time this goes live!

twistless / 2012-01-15 20:57:47   

Well, now somewhat working, but slightly wonky in that the titles still shift down, then return to their correct spot, but at least placement is right at beginning and end. Still, if anyone has any ideas on how to stop this transitional shift, I'd appreciate it. Thanks!!

http://twistless.net/indextest/

G470 / 2012-01-16 03:41:05   

Maybe this will fix the problem:

#menu ul a:link {
text-decoration: none;
color: white;
white-space: nowrap;
}

twistless / 2012-01-16 15:48:10   

Yes! This totally worked! Thank you so much.

It's coming together slowly. But I'm realizing I've run into a problem that is a website breaking issue... when I open up the work section, then click on one of the exhibits, I can't use to cursor to click any of the information in the exhibit.

Somehow, the "work" menu section is stacking itself on top of the whole page and I am unable to select anything below it (can't select text, push buttons, click links, etc.).

Is there a way to make it transparent? Or reorder so the exhibits are clickable? Or that you can click through that menu?

Thanks so much!!

twistless / 2012-01-16 18:47:15   

Perhaps the z-index might change this? I can't figure out which one would apply to the exhibits though?

twistless / 2012-01-16 19:27:37   

Ok, so apparently I can change the order through the z-index. But once I put the exhibits at the top of the stack order, I can no longer click on the menu. Ugh. Why must the exhibits take up the entire page and not allow for anything to be accessed below them (or vice versa when the menu is at the top of the stack)?

Thanks!!

http://twistless.net/indextest/

This thread has been closed, thank you.