Re: Is it possible to keep centered an AP div intoanother div?

10/04/2008, 01h13

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, 04h19

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, 12h34

Personally, I think the whole approach is big trouble.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"TC2112" <nospam@nospam.com> wrote in message
news:ftk0va$jea$1@forums.macromedia.com...
> 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, 17h04

Thank you TC2112, your tip was excellent. And when using image instead of div,
text-align: center; of a parent div does the trick instead of auto margins.

[q]Originally posted by: Murray *ACE*
Personally, I think the whole approach is big trouble.[/q]

True, if I was doing it for a real project. But it was just a hypothetical
layout exercise for the sake of it while I was studding spry repeat region. For
a real project with such layout it is more practical to use fixed pixel sizes.
I played with that too and changed the styling like the code below. I removed
the spry code and manually repeated the block four times. Critics welcome, I
appreciate your suggestions.

<!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>
<style type="text/css">

</style>
</head>

<body>
<div id="wrapper">
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
<div class="blocks">
<div>{name}</div>
<div>{description}</div>
<div>{size}</div>
<div id="pictures"> <div id="image"> </div> </div>
</div>
</div>
</body>
</html>

10/04/2008, 01h13	#1
emil emil Messages: n/a Hébergeur:	Re: Is it possible to keep centered an AP div intoanother div? 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>

10/04/2008, 04h19	#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> >

10/04/2008, 12h34	#3
Murray ACE Messages: n/a Hébergeur:	Re: Is it possible to keep centered an AP div into another div? Personally, I think the whole approach is big trouble. -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "TC2112" <nospam@nospam.com> wrote in message news:ftk0va$jea$1@forums.macromedia.com... > 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> >> > >

10/04/2008, 17h04	#4
emil emil Messages: n/a Hébergeur:	Re: Is it possible to keep centered an AP div intoanother div? Thank you TC2112, your tip was excellent. And when using image instead of div, text-align: center; of a parent div does the trick instead of auto margins. [q]Originally posted by: Murray ACE Personally, I think the whole approach is big trouble.[/q] True, if I was doing it for a real project. But it was just a hypothetical layout exercise for the sake of it while I was studding spry repeat region. For a real project with such layout it is more practical to use fixed pixel sizes. I played with that too and changed the styling like the code below. I removed the spry code and manually repeated the block four times. Critics welcome, I appreciate your suggestions. <!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> <style type="text/css"> <!-- body { margin-top: 0px; } #wrapper { width: 760px; margin-right: auto; margin-left: auto; } .blocks { float: left; width: 340px; margin-bottom: 15px; background-color: #CCCCCC; padding-left: 10px; margin-top: 15px; text-align: left; margin-right: 10px; height: 25em; padding-right: 10px; position: relative; margin-left: 10px; } #wrapper .blocks #pictures { text-align: center; bottom: 5%; position: absolute; width: 140px; left: 0%; padding-right: 10px; padding-left: 10px; } #image { background-color: #FF0000; height: 245px; width: 339px; margin-right: auto; margin-left: auto; } --> </style> </head> <body> <div id="wrapper"> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> <div class="blocks"> <div>{name}</div> <div>{description}</div> <div>{size}</div> <div id="pictures"> <div id="image"> </div> </div> </div> </div> </body> </html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email