A couple of CSS questions

About centred elements, and selecting preceding sibling

[DeathRay2K]

Hi, I have two questions.
First, I'm trying to centre an element horizontally, and keep it at the bottom. Right now, I have an element absolutely positioned at the bottom of the screen within an element relatively positioned in the horizontal centre. The problem is that if the contents of the inner element cause it to stretch, the left side stays aligned to where it would be given its original width, instead of staying centred. How can I get around this?

Secondly, I'm trying to select the adjacent sibling elements on either side of an element with the :hover pseudo-class. Currently, I can select the one following it, using the adjacent sibling combinator, but I can't figure out how to get the other adjacent sibling! How do I go about doing this?

Thanks!

[edited by: DeathRay2K at 1:47 am (utc) on Oct. 24, 2008]

[tangor]

Usually a post of the css styles and the HTML code makes it possible to see what you are doing, and how we might help. Do recall TOS for the forum and generalize urls to example.com, etc...

[alt131]

DeathRay2K,

The problem is that if the contents of the inner element cause it to stretch, the left side stays aligned to where it would be given its original width, instead of staying centred. How can I get around this?

As tangor has said, some code would help as it would indicate how you are centering the absolutely positioned element horizontally. Without that, one technique available is to set

left:50%

and a negative

margin-left:

that is 1/2 the elements total width.

[DeathRay2K]

Alright, here's the relevant html:

<div id="outer">
<div id="container">
<a href="#" class="icon" id="mycomputer"></a>
<a href="#" class="icon" id="email"></a>
<a href="#" class="icon" id="internet"></a>
<a href="#" class="icon" id="bin"></a>
</div>
</div>

And CSS:

#outer
{
height: 58px;
min-width: 320px;
width: 320px;
margin-left: auto;
margin-right: auto;
vertical-align: bottom;
}
#container
{
position: absolute;
bottom: 24px;
height: 48px;
padding: 5px 5px;
border: 2px solid rgba(225, 225, 225, 0.6);
background-color: rgba(200, 200, 200 0.6);
background-image: -webkit-gradient(linear, left top, left bottom,
 from(rgba(225, 225, 225, 0.6)), to(rgba(180, 180, 180, 0.6)));
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-o-border-radius: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.icon
{
position: relative;
display: block;
width: 48px;
height: 48px;
bottom: 0px;
float: left;
margin-left: auto;
margin-right: auto;
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-transition-property: width, height, bottom;
-webkit-transition-duration: .5s, .5s, .5s;
}
.icon:hover
{
position: relative;
width: 80px;
height: 80px;
bottom: 32px;
}
.icon:hover + .icon
{
position: relative;
width: 64px;
height: 64px;
bottom: 16px;
}
#mycomputer{background-image: url(icoMyComputer.png);}
#bin{background-image: url(icoBin.png);}
#internet{background-image: url(icoInternet.png);}
#email{background-image: url(icoEmail.png);}

I'm testing it in a WebKit nightly, because it's the only browser that currently supports all of the CSS3 features I am using. As you can see, it roughly imitates the dock on a Mac.
The problem with using something like the left and margin-left hack is that the width may change, so the margin-left would need to change with it.

[alt131]

I'm trying to centre an element horizontally, and keep it at the bottom. ... an element absolutely positioned at the bottom of the screen within an element relatively positioned in the horizontal centre. The problem is that if the contents of the inner element cause it to stretch, the left side stays aligned to where it would be given its original width, instead of staying centred.

I have only been able to look at this with winSafari and ff3, so not sure how much this will help, but it might suggest something usable. On the provided code:

• div#outer was positioned at page top, with the "dashboard" (div#container) absolutely positioned at page bottom +24px
  
• div#outer was centred, div#container was not.
  
• div#container expanded both left and right in WinSafari, but only expanded right in ff.
  
• div#container moved from bottom 24px to bottom 32px on hover in winSafari, but not in ff
  

That was the reverse of your description - which had a non-expanding centred container, rather than a non-centred expanding one. However, the following adjustments are one way to achieve both centering and :hover movement and expansion in winSafari and ff (and OP9, if anyone cares!)

Move the styles for div#container to #div outer
#outer {
position: absolute;
left:0;
right:0;
margin:0 auto; /*left,right,margin look convoluted, but centre */
bottom: 24px;
width:20%; /*a percentage to allows for expansion */
height: 48px;
padding: 5px 5px;
border: 2px solid rgba(225, 225, 225, 0.6);
background-color: rgba(200, 200, 200 0.6);
background-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(225, 225, 225, 0.6)), to(rgba(180, 180, 180, 0.6)));
border-radius: 16px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
-o-border-radius: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
/*-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); */
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

That leaves #container as a container to centre the .icon's within div#outer.
#container {
width:96%; /*shrink wrap the icons*/
margin:auto; /*centre*/
border:1px solid red; /*for testing */
}

To expand the dashboard while remaining centred, change the width on hover
#outer:hover {
width:25%;
bottom:32px; /*required to achieve upwards movement in ff */
}

Keep the icons centred as much as possible
#container:hover {
width:90%;
}

.icon {
position: relative;
display: block;
width: 48px;
height: 48px;
float: left;
/*bottom: 0px; seemed redundant */
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-transition-property: width, height, bottom;
-webkit-transition-duration: .5s, .5s, .5s;
}

While this achieved the centering/expansion/movement, it had the disadvantage of leaving screen artifacts in winSafari. The only way to remove those was to remove

webkit-box-shadow:

which is why it is commented out. Remove the comments to view. Note the artifacts are much worse with

bottom:32px

applied to

#outer:hover 

- required for ff, but remove it and there is an improvement in winSafari.

What I was really looking for was a way of centreing and "shrink-wrapping" div#outer around div#container, but none of the usual techniques seemed to achieve both plus allow for expansion.
As you can see, a mouse hover in the padding area expands div#container without activating an icon, but that seemed a feasible trade-off given the original was always off-centered.

I spent some time re-drawing the borders on hover and mouse-out to overcome the screen artifacts issue, but although unable to get it quite right, it might be a possible avenue.

Hopefully something in this provides food for thought.