PHWinfo - Afficher un message - Re: Is it possible to keep centered an AP div intoanother div?

10/04/2008, 05h19

Hello,

How about using the AP div to just control the distance from the bottom?
Set the left position to 0 and make the width of the AP div the same as the
blocks div.
Remove the red background color so it is transparent.

Then, in that AP div insert a div with the width of 339px and the same
height as the AP div, 245px.
Give this div the red background color and a left and right margin of auto.
Put the image in this div.

Now this div will center in the AP div, so it's centered in the blocks div,
and the AP div will keep it 5% from the bottom.

Murray may offer a better solution, but it was fun to think about this one.

Here's the code:
http://tnsgraphics.com/ctrimg.htm

By the way, if the red background isn't part of your design and was to just
show the issue, then you actually don't even need the inner div. Just
give the image a left and right margin of auto:

http://tnsgraphics.com/ctrimgnoRED.htm

Take care,
Tim

"emil emil" <webforumsuser@macromedia.com> wrote in message
news:ftjm42$8kb$1@forums.macromedia.com...
> Thank you Murray, the content is fed from an XML file but I'm not
> including it
> since the problem can be seen without it. With the XML content it just
> becomes
> 4 blocks like the one currently in the code.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml"
> xmlns:spry="http://ns.adobe.com/spry">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>Untitled Document</title>
> <script src="SpryAssets/xpath.js" type="text/javascript"></script>
> <script src="SpryAssets/SpryData.js" type="text/javascript"></script>
> <script type="text/javascript">
> 
> </script>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="wrapper" spry:region="QqQqQq">
> <div spry:repeat="QqQqQq">
> <div class="blocks">
> <div>{name}</div>
> <div>{description}</div>
> <div>{size}</div>
> <div id="pictures"><img src="images/large/{image}" /></div>
> </div>
> </div>
> </div>
>
> </body>
> </html>
>

10/04/2008, 05h19	#2
TC2112 Messages: n/a Hébergeur:	Re: Is it possible to keep centered an AP div into another div? Hello, How about using the AP div to just control the distance from the bottom? Set the left position to 0 and make the width of the AP div the same as the blocks div. Remove the red background color so it is transparent. Then, in that AP div insert a div with the width of 339px and the same height as the AP div, 245px. Give this div the red background color and a left and right margin of auto. Put the image in this div. Now this div will center in the AP div, so it's centered in the blocks div, and the AP div will keep it 5% from the bottom. Murray may offer a better solution, but it was fun to think about this one. Here's the code: http://tnsgraphics.com/ctrimg.htm By the way, if the red background isn't part of your design and was to just show the issue, then you actually don't even need the inner div. Just give the image a left and right margin of auto: http://tnsgraphics.com/ctrimgnoRED.htm Take care, Tim "emil emil" <webforumsuser@macromedia.com> wrote in message news:ftjm42$8kb$1@forums.macromedia.com... > Thank you Murray, the content is fed from an XML file but I'm not > including it > since the problem can be seen without it. With the XML content it just > becomes > 4 blocks like the one currently in the code. > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml" > xmlns:spry="http://ns.adobe.com/spry"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Untitled Document</title> > <script src="SpryAssets/xpath.js" type="text/javascript"></script> > <script src="SpryAssets/SpryData.js" type="text/javascript"></script> > <script type="text/javascript"> > <!-- > var QqQqQq = new Spry.Data.XMLDataSet("plants_data.xml", "plants/plant"); > //--> > </script> > <style type="text/css"> > <!-- > .blocks { > float: left; > width: 22em; > margin-bottom: 2em; > background-color: #CCCCCC; > padding-left: 0.5em; > margin-top: 1em; > text-align: left; > margin-right: 2em; > height: 25em; > padding-right: 0.5em; > position: relative; > } > #wrapper .blocks #pictures { > text-align: center; > bottom: 5%; > position: absolute; > width: 339px; > left: 4%; > background-color: #FF0000; > height: 245px; > } > body { > margin-top: 0px; > } > #wrapper { > width: 54em; > margin-right: auto; > margin-left: auto; > } > --> > </style> > </head> > > <body> > <div id="wrapper" spry:region="QqQqQq"> > <div spry:repeat="QqQqQq"> > <div class="blocks"> > <div>{name}</div> > <div>{description}</div> > <div>{size}</div> > <div id="pictures"><img src="images/large/{image}" /></div> > </div> > </div> > </div> > > </body> > </html> >