basic image-control #2

controlling overflow in a fluid-width environment...

chaotic test page
#18
13.jul.2006
rev: 14.jul.2006

text-align:left|center|right and negative margins

text-align: left
text-align: center
text-align: right

fine-tuning demo – text-align:center and margin-variations – image is 141px wide

-40px/-100px
-70px/-70px
-100px/-40px
.container {
float: left; 
width: 30%;
margin: 10px -2px 10px 2.5%;
background: #edb;
border: solid 1px #000;
display: inline;
position: relative;
}

.container div {
margin: 5px;
height: 140px;
display: block;
background: #eee;
overflow: hidden;
position: relative 
/* IE-win must have this */; 
}

.img-left{
text-align: left;
}

#independent .img-left img {
margin: 0 -140px 0 0;
}

.img-center {
text-align: center;
}

#independent .img-center img {
margin: 0 -70px;
}

.img-right {
text-align: right;
}

#independent .img-right img {
margin: 0 0 0 -140px;
}

* html #independent .img-right img {
display: block 
/* fix the IE-win whitespace bug */; 
}


/* offset from center */

#independent2 .img-left {
text-align: center;
}

#independent2 .img-left img {
margin: 0 -100px 0 -40px;
}

#independent2 .img-center {
text-align: center;
}

#independent2 .img-center img {
margin: 0 -70px;
}

#independent2 .img-right {
text-align: center;
}

#independent2 .img-right img {
margin: 0 -40px 0 -100px;
}

Notes:

IE/win can't handle negative margin totals that are larger than the element-size itself.

IE/Mac can only handle 'text-align: center', with variations.

[14.jul.2006]: revised caption-control and improved vertical fluidity of this test.

tested browsers:

Opera:
win2K: 9.00 - ok
Mac OS-X: 7.54 - ok
Moz:
win2K: 1.4, 1.7.2 - ok
FF:
win2K: 1.5.0.4 - ok
Mac OS-X: 1.0 - ok
Safari:
Mac OS-X: 1.2.4 - ok
IE:
win2K: 6.0 - ok
Mac OS-X: 5.2 - no good

go to test-menu