|
| Re: Is it possible to keep centered an AP div into another div? |
 |
Wed, 9 Apr 2008 19:25:03 -0400 |
Sure. You need to understand positioning and how to center any positioned
element, though.
Let's see your code first....
--
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
==================
"emil emil" <webforumsuser@macromedia.com> wrote in message
news:ftjj0r$5g3$1@forums.macromedia.com...
>I have a division block with sizes set in ems containing some text at the
>top
> and another div at the bottom with a picture in it. I want the div with
> the
> picture to stay at a certain percentage distance from bottom of the
> containing
> div block and be centered into it when the user increases the text.
> I manage to position the image at the bottom by styling its div as AP and
> the
> containing div as relatively positioned but I can't figure out how to keep
> the
> positioning at the center when the user increases the text.
> Is this possible?
>
|
| Post Reply
|
| Re: Is it possible to keep centered an AP div into another div? |
 |
Wed, 9 Apr 2008 23:19:05 -0400 |
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
help 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></div>
> <div></div>
> <div></div>
> <div id="pictures"><img
src="images/large/" /></div>
> </div>
> </div>
> </div>
>
> </body>
> </html>
>
|
| Post Reply
|
| Is it possible to keep centered an AP div into another |
 |
Wed, 9 Apr 2008 23:20:59 +0000 |
I have a division block with sizes set in ems containing some text at the top
and another div at the bottom with a picture in it. I want the div with the
picture to stay at a certain percentage distance from bottom of the containing
div block and be centered into it when the user increases the text.
I manage to position the image at the bottom by styling its div as AP and the
containing div as relatively positioned but I can't figure out how to keep the
positioning at the center when the user increases the text.
Is this possible?
|
| Post Reply
|
| Re: Is it possible to keep centered an AP div into |
 |
Thu, 10 Apr 2008 00:13:54 +000 |
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></div>
<div></div>
<div></div>
<div id="pictures"><img
src="images/large/" /></div>
</div>
</div>
</div>
</body>
</html>
|
| Post Reply
|
| Re: Is it possible to keep centered an AP div into another div? |
 |
Thu, 10 Apr 2008 07:34:26 -040 |
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 help 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></div>
>> <div></div>
>> <div></div>
>> <div id="pictures"><img
src="images/large/" /></div>
>> </div>
>> </div>
>> </div>
>>
>> </body>
>> </html>
>>
>
>
|
| Post Reply
|
|
|
|
|
|
|
|
|
|