Re: [css-d] How to place shadow templates in the middle of the page

Duncan Hill Tue, 20 Jul 2010 01:57:19 -0700

On Tue, 20 Jul 2010 08:44:13 +0100, Kersten Broich <[email protected]>  
wrote:


> Hi David,
>
> first of all: thanks for your quick reply.
>
> If I got you right, you adjust the width of the mid div to the picture
> size. This of course works but there's a disadvantage because I want to
> display the pic in the middle of the page *regardless* of the pictures
> width.
>
> If I insert another picture with the same div class "mid" (changed it
> from id to class) it's not in the middle anymore.
>
<big-snip>
Sorry I haven't time to put this onto a server right now ...

Note: there is an extra div to enable the positioning of the image.  
(div.extra)
If you reinstate David's red marker border you will get a small horizontal  
scroll, but as it is a useful guide I left it available to switch on.

(code tags are only to try and prevent display in the email)

Duncan
<code>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>

<html>
<head>
   <title>:: lakers ::</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html,body{
   background:#fff;
   color:#000;
   margin:0;
}

.mid{
/*border : 1px solid red;*/
   margin:20px auto 0 auto;
   overflow:hidden;
   float:left;
   width:100%;
}

.extra{
   float:left;
   left:50%;
   position:relative;
}

.shadow{
   float:left;
   background-color:#777;
   padding:1px;
   border:1px solid #999;
   margin:0;
}

.shadow2{
   background:#bbb;
   padding:1px;
   border:1px solid #ddd;
   margin:0.7em 1em;
   float:left;
   position:relative;
   right:50%;
}

* html.shadow2{
   margin:0.7em 0.5em;
}/*hack for IE/6.0*/

.shadow img{
   border:0 solid #666;
   margin:0;
   display:block;
   position:relative;
   top:-3px;
   left:-3px;
}
</style>
</head>

<body>
   <div class="mid">
     <div class="extra">
       <div class="shadow2">
         <div class="shadow">
           <img src="http://phpscripts.bodtree.com/lakers1.jpg";  
alt="LAKERS">
         </div>
       </div>
     </div>
   </div>

   <div class="mid">
     <div class="extra">
       <div class="shadow2">
         <div class="shadow">
           <img src="http://phpscripts.bodtree.com/mississippi.jpg";  
alt="LAKERS">
         </div>
       </div>
     </div>
   </div>
</body>
</html>

</code>
______________________________________________________________________
css-discuss [[email protected]]
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/

Re: [css-d] How to place shadow templates in the middle of the page

Reply via email to