CODEWITHSUNDEEP
csshtmlbackground-imagecss-position
meridius
meridius

Reputation: 1587

center and position elements in CSS

I'm stuck with my HTML/CSS code where I need to horizontally center two divs (A, B) with background images in one absolutely positioned div (C).

Bering in mind that:

Here is my fiddle where I managed to position the (A) div inside the (C) http://jsfiddle.net/meridius/DGexR/ But no matter what I do, I can't accomplish the rest.

EDIT:
Here is how it should look like enter image description here

Code preview:
For working example (with background images) please see above mentioned fiddle.

HTML

<div class="desk">
    <div class="figure">        
        <div class="type sprites-sachy sprite-WKing"></div>
        <div class="special sprites-sachy sprite-halo"></div>
    </div>
</div>

CSS

.desk { /* this class must not be touched */
    position: absolute; 
    top: 129px; 
    left: 202px;    
    border: 1px solid #FF0000; 
    width: 65px;    
    height: 65px;
    padding: 0;
    float: left;
}
.figure {
    bottom: 0;
    left: 50%;
    position: absolute;
}
.type {
    margin-left:-50%;
    z-index:2;
}
.special {
    border: 1px solid #008000;
    z-index:1;
  /*   display:none; uncomment this to see .figurka centered how it is supposed to */
}

NOTE:
I'd like to avoid this question being closed as too localized, so let me state first that I believe that I'm not the only one having problems positioning (and centering) elements in CSS.

Upvotes: 0

Views: 135

Answers (3)

Olaf Dietsche
Olaf Dietsche

Reputation: 74098

When you use display: none or position: absolute, .special is taken out of the flow and .type is centered properly.

To center .special horizontally as well, you can use a technique from CSS-TRICKS: Centering Percentage Width/Height Elements: move it to the top and half the width to the left 

.special {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
}

The only item left is moving .special behind .type with z-index: -1.

See full JSFiddle

Since you know that the width of .sprite-halo is 78px, you can always use pixel values, of course 

.special {
    position: absolute;
    top: 0;
    left: -39px;
}

See also @Bipin Kumar Pal's answer.

JSFiddle

Upvotes: 1

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

.sprite-halo{ background-position: 0 -1700px; width: 78px; height: 12px; background-color:darkgreen; position:absolute; top:0; left:-40px; z-index:-5;}

please use this code. My side working.

Upvotes: 0

meavo
meavo

Reputation: 1042

So you got this structure:

<div class="desk">
    <div class="figure">
        <div class="type"></div>
        <div class="special"></div>
    </div>
</div>

Make sure .desk is absolute or relative positioned (which you did). Please note that a float won't do anything. For now I suppose .type is 200px h/200px w and .special is 150px h/150px w.

.desk { position: absolute; .. }
.desk .figure { position: absolute; width: 200px; height: 200px; bottom: 0; left: 50%; margin-left: -100px; }
.desk .type { position: absolute; z-index: 2; margin-left: -100px; left: 50%; top: 0; }
.desk .special { position: absolute; z-index: 1; margin-left: -75px; left: 50%; top: 0; }

That's it.

Upvotes: 0

Related Questions