[Solved] Positioning and z-index

[GreatPotato]

Hello everyone

I’ve been experimenting with a new layout (just a prototype at the moment) but I’m getting a bit stuck…

My page can be seen here: http://bytecast.org/theme-test.htm

What I want to happen is when a box is hover’d or focus’d for it to expand to show the remainder of the content. I have it kind of working except for making the boxes overlap when opened.

When adding "position: absolute" the boxes just pile over each other and I can’t think of a way to stop this from happening?

I don’t want to use javascript if possible…

Regards,
GreatPotato

[christianchoice]

When you set them to

Code:

position:absolute

you need to also assign their positionings

Code:

top,left,bottom,right

.

The first column, first row box will be top:0,left:0; The second column, first row box will be top:0;left:{width of first column, first row box + space in between}; and so on and so forth.

[noahgelman]

You should be able to do it just like a navigation and drop down. Put the nine boxes into an un ordered list, float them left, and then do it exactly like a nav dropdown.

[GreatPotato]

@christianchoice

Sorry I should have explained better. That won’t be possible because these will be powered by either Tumblr or WordPress and will be posts, so assigning these attributes will be impossible without JavaScript or similar…

@noahgelman

Good thinking, I didn’t think of that. I’ll give it a try…

[GreatPotato]

I don’t think this is going to be possible without javascript.

[christianchoice]

Not if you know their exact widths and heights. If those never change, then you can use CSS selectors (n+1),etc to apply the attributes to sets of numbers. Though you would still need to use some Javascript for those selectors to work in all browsers.

[gzabrisk]

I haven’t tested this is all browsers, but it worked in Firefox for me. It’s all CSS like you were looking for:

Code:

ul#content li {
list-style:none;
float:left;
height:250px;
margin:10px;
position:relative;
width:300px;
}
div.box {
height: 200px;
background-color: rgba(255, 255, 255, 1);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 1px 3px rgba(28, 28, 28, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(28, 28, 28, 0.5);
-webkit-box-shadow: 0px 1px 3px rgba(28, 28, 28, 0.5);
padding: 25px 25px 25px 25px;
overflow: hidden;
}
ul#content li:hover {
z-index:100;
}
ul#content li:hover div.box {
box-shadow: 0px 1px 5px rgba(28, 28, 28, 1);
-moz-box-shadow: 0px 1px 5px rgba(28, 28, 28, 1);
-webkit-box-shadow: 0px 1px 5px rgba(28, 28, 28, 1);
height: auto;
overflow: auto;
}

Hopefully that can move you step forwards towards you goal.

[christianchoice]

@gzabrisk

Very nice solution, sir!

[GreatPotato]

Ah that’s brilliant! Thanks a lot!

[Author]

Posts