HTML & CSS
I was wondering... I would like the accordion on http://www.openeye-design.com/beta/ to be expanded at all times showing the first div (panel) called "Bannere" on load and when not hovering. When hovering to another panel, obviously this needs to be expanded
Problem is... I can´t figure out how to. Can anyone assist me here?
Just give that first div a class and find the CSS rule that makes it show. I believe you show it v ia display:block. Give that inner <div> of banner, a class of like.."show" and make that have display:block. Sorry gotta run to work.
That´s what I thought, but didn´t do the trick... Off course this had to be complicated
Ah sorry, I should have mentioned specifcity issue, along with allowing the <li> to increase in width to not cut off the image :). Add this CSS in. Change classes as you see fit.
.horizontalaccordion > ul li.active
.horizontalaccordion > ul li div.active /*body in there to give it slightly higher specificity*/
The first part widens the <li> to allow more width in. The second makes the image show instead of a white space that would otherwise be there.
Now update your HTML
<div class="active"><img src="/beta/images/toppbanner.jpg"/></div>
I used the same class="active" twice, though I differentiated it in the CSS using an element before the .active. I'd recommend changing the c lass to something different (whatever you want) :). That should get it working.
thanks, but that just pushes the other divs out of proportions cause the floating layout to go nuts. Maybe I was a little unclear. I want the other panels and <li> to be pushed left when hovering, covering the 1. panel ("bannere"). Can this be achieved?
I must have misunderstood. I still don't see what you want. The website now as I'm viewing it, has the image showing directly (without a hover needed). This is what I assume you wanted. With what you want, if you hover, you want hte image to extend out to hte left instead?
I can't really picture what you want besides what your website is displaying right now.
I think I know what you mean.
Something like this? (Although I don't like that site's design in general :/ )
I had an idea to do something like that from pure CSS. It was like an accordion, just on hover...nevermind. It would take too long to explain and I don't think that I even know how to explain.
Take a look at their source (w/out copying, ofc). The line you want is around line 2638 of their only stylesheet.
TehYoyo... Thats pretty much what I was thinking. Thanks for the link. I´ll see if I could recreate that in some way
No problem. Always happy to help.
This topic is now closed. New replies are no longer allowed.