Re: [css-d] image layout question

[Thomas Pauly]

Matthew
I use a make-shift grid in CSS that I place images into. 
You have to specify a specific starting point in HTML using both a row class 
and a column class. 
        <li class="row1 colc"><img src.../></li>
If the image is larger than the grid box it will simply extend beyond the grid 
box so you have to take care specify the placement of all images so that you 
don't obscure something. (You can use transparency to create overlays: 
.transparent75 {filter:alpha(opacity=75); -moz-opacity:0.75; -khtml-opacity: 
0.75; opacity: 0.75;}.)

#mosaic {position:relative; height: 500px; width: 600px;}
#mosaic li {list-style: none; }
    .row1 {height: 100px; width: 100px; background-color: #6b4d2e;}
    .row2 {height: 100px; width: 100px; top: 100px; background-color: #fcf8c6;}
    .row3 {height: 100px; width: 100px; top: 200px; background-color: #c2aacf;}
    .row4 {height: 100px; width: 100px; top: 300px; background-color: #fcf8c6;;}
    .row5 {height: 100px; width: 100px; top: 400px; background-color: #6b4d2e;}
    .cola {position: absolute; }
    .colb {position: absolute; left: 100px;}
    .colc {position: absolute; left: 200px;}
    .cold {position: absolute; left: 300px;}
    .cole {position: absolute; left: 400px;}
    .colf {position: absolute; left: 500px;}


<!-- begin #mosaic div --><div id="mosaic">
                <ul>
                    <!--   Gingerbread Cake   -->
                    <li class="row1 cola photo"><img 
src="http://www.theablebaker.com/i/ck-ging-32-1579.png"; alt="Gingerbread Cake 
from The Able Baker" title="Gingerbread Cake from The Able Baker"/></li>
                    <!-- Brown Flowers Cake -->
                        <li class="row2 cold photo"><img 
src="http://www.theablebaker.com/i/ck-brnflwr-32-0674.png"; alt="Edible Fondant 
Flowers on Autumn Brown Cake from The Able Baker" title="Edible Fondant Flowers 
on Autumn Brown Cake"/></li>
                    <!-- Button-topped Cupcakes -->
                         <li class="row4 cola photo"><img 
src="http://www.theablebaker.com/i/cck-butt-32-0381.png"; alt="Cake with Flowers 
and Grass" title="Flowers and Grass" /></li>
                    <!-- Karate -->
                        <li class="row4 cold photo transparent25"><img 
src="http://www.theablebaker.com/i/ck-karate-32-0572.png"; alt="Karate Cake from 
The Able Baker" title="Karate Cake"/></li>
                </ul>
            </div><!-- end #mosaic div -->

http://www.tpauly.com/AB.css
http://www.tpauly.com/AB.html

Hope this helps.

Thomas Pauly
973.273.4702 | tho...@tpauly.com

> Message: 8
> Date: Tue, 28 Dec 2010 13:17:45 -0800
> From: "Matthew P. Johnson" <i...@ecoitsf.com>
> To: <css-d@lists.css-discuss.org>
> Subject: [css-d] image placement question
> Message-ID: <00d901cba6d4$ad27b7d0$077727...@ecoitsf.com>
> Content-Type: text/plain;     charset="us-ascii"
> 
> OK So I have figured out how to left align, now I am trying to figure out
> if there is a way to have the images start a second column when a fixed
> height is reached instead of continuing downward forever. 
> 
> http://www.ecoitsf.com/test/index.html
> 
> Matthew P. Johnson | Eco I.T.

______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/