This content has been marked as final.
Show 10 replies
-
1. Re: image position
Newsgroup_User Nov 18, 2007 5:26 PM (in response to joe dora)> I am using absolute placement.
Most likely the source of your problems. Let's see the page, please.
--
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
==================
"joe dora" <webforumsuser@macromedia.com> wrote in message
news:fhqm06$6hc$1@forums.macromedia.com...
> Made site. Okay
> Used table in editable portion of index page.
> Made table one row and one column.
> Using dreamweaver CSS I made a container in the table with div and id
> Inside the container I placed an image.
> Also used div and id.
> I see the image and I can position it all over the place.
> I can edit text, make margins, borders and color.
>
> But. This image looks and acts like a layer.
> I can?t keep it in the image.
> Top 0 and left 0 position the image in that position on my page.
> I want to keep the image within the page so top 0 and left 0 position in
> the
> container.
>
> Any suggestions?
>
> I am not in horrible shape because I positioned everything with tables but
> I
> would like to do it with CSS.
>
> I am using absolute placement.
>
>
-
-
3. Re: image position
Newsgroup_User Nov 18, 2007 6:53 PM (in response to joe dora)> I can?t keep it in the image.
> Top 0 and left 0 position the image in that position on my page.
> I want to keep the image within the page so top 0 and left 0 position in the
> container.
I don't entirely understand where you would like to place the image. In
the top left corner of the table?
BTW: For your menu bar, instead of using header tags e.g. <h5> you could
simply use styled definition list <dl>.
<div id="sidebar">
<dl>
<dt>Main Link</dt>
<dt>Main Link</dt>
<dd>Sub Link</dd>
<dd>Sub Link</dd>
<dt>Main Link<.dt>
</dl> -
4. image position
joe dora Nov 19, 2007 3:03 AM (in response to joe dora)It don't matter where I specifically want to place the image, I want the image to be defined by the container. As it stands now the image is defined by the page not the container. Note on the site how the image intersects the border of the table. I am afraid if I place the image bound by the page it might travel away from the position I place it.
Summary: I want the image within the container boundaries
Image in the table.
. -
5. Re: image position
Newsgroup_User Nov 19, 2007 4:22 AM (in response to joe dora)joe dora wrote:
> It don't matter where I specifically want to place the image, I want the image
> to be defined by the container. As it stands now the image is defined by the
> page not the container. Note on the site how the image intersects the border of
> the table. I am afraid if I place the image bound by the page it might travel
> away from the position I place it.
> Summary: I want the image within the container boundaries
> .
>
Not quite sure how it's supposed to look or how you want it to work -
but you could try.......
Changing the css - yours for mine.....
body {
margin: 0pt;
padding: 0pt;
background: #666666;
color: #000000;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 100%;
text-align: center;
}
and........
.ahim #mainContent {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 600px;
margin: 0 auto;
color: #093b0b;
font-weight: 400;
}
and........
#home_container {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 36px;
color: #00CC33;
text-decoration: underline overline;
position: relative;
height: 360px;
width: 500px;
margin: 0 auto;
border: thin solid #00CCCC;
}
and note on this one I've changed the name of the rule from
#home_container #emma img to just #emma img .....
#emma img {
position: absolute;
background-color: #0099CC;
border: thick solid #000;
left: 164px;
top: 66px;
}
and your html markup for the home_container div should look like this -
note the table has gone...
<div id="home_container">
<div id="emma"><img src="emma200.jpg" height="200"
width="200">Temporary Page </div>
</div>
--
chin chin
Sinclair -
6. Re: image position
Newsgroup_User Nov 19, 2007 5:10 AM (in response to joe dora)Points? Ugh....
--
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
==================
"djinn" <scobies@dsl.pipexYerKitAff.com> wrote in message
news:fhrv6g$sfq$1@forums.macromedia.com...
> joe dora wrote:
>> It don't matter where I specifically want to place the image, I want the
>> image to be defined by the container. As it stands now the image is
>> defined by the page not the container. Note on the site how the image
>> intersects the border of the table. I am afraid if I place the image
>> bound by the page it might travel away from the position I place it.
>> Summary: I want the image within the container boundaries
>> .
>>
> Not quite sure how it's supposed to look or how you want it to work - but
> you could try.......
>
> Changing the css - yours for mine.....
>
> body {
> margin: 0pt;
> padding: 0pt;
> background: #666666;
> color: #000000;
> font-family: Verdana,Arial,Helvetica,sans-serif;
> font-size: 100%;
> text-align: center;
> }
>
>
> and........
>
> .ahim #mainContent {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> font-size: 10px;
> width: 600px;
> margin: 0 auto;
> color: #093b0b;
> font-weight: 400;
> }
>
> and........
>
> #home_container {
> font-family: Georgia,"Times New Roman",Times,serif;
> font-size: 36px;
> color: #00CC33;
> text-decoration: underline overline;
> position: relative;
> height: 360px;
> width: 500px;
> margin: 0 auto;
> border: thin solid #00CCCC;
> }
>
> and note on this one I've changed the name of the rule from
> #home_container #emma img to just #emma img .....
>
> #emma img {
> position: absolute;
> background-color: #0099CC;
> border: thick solid #000;
> left: 164px;
> top: 66px;
> }
>
>
> and your html markup for the home_container div should look like this -
> note the table has gone...
>
> <div id="home_container">
> <div id="emma"><img src="emma200.jpg" height="200"
> width="200">Temporary Page </div>
> </div>
>
>
> --
> chin chin
> Sinclair
-
7. Re: image position
Newsgroup_User Nov 19, 2007 5:23 AM (in response to joe dora)Murray *ACE* wrote:
> Points? Ugh....
>
Out of ten? - well perhaps 7 for not picking up on his use of points -
my edits are all px of course ;-)
--
chin chin
Sinclair -
8. Re: image position
joe dora Nov 19, 2007 5:56 AM (in response to joe dora)I don't think you understand my question.
I will repeat.
Why? I can css edit my container.
I can edit the image in the container.
But the image will only stay in the container if I set the attributes for a page.
Look at the page http://usersite.com/joe
I set the location as top 0 and left 0
It is on the page as top 0 and left 0
I want it to be in the table container -
9. Re: image position
Newsgroup_User Nov 19, 2007 6:15 AM (in response to joe dora)You have used an interesting filenaming scheme - <link
href="!!_css/ahim.css" - why that?
Your confusion is related to the details of CSS positioning. The image,
<img src=" http://usersite.coms_images/emma200.jpg" width="200" height="200"
/>
is absolutely positioned by your CSS. As such, it is removed from the flow
of the code on the page. You may think it's within <div id="emma">, but
it's not - it's ABOVE it. Further, according to the specifications for CSS,
absolute positions are calculated based on the location of the nearest
positioned ancestor container. In your case, there is no nearest positioned
ancestor, and therefore the body tag is the default, i.e., the upper, left
hand corner of the browser viewport.
You have complicated things by placing the absolutely positioned element
directly into a table cell, something that is sure to create browser
rendering differences.
To see things improve a bit, try making <div id="emma"> relatively
positioned - at least now, you will not have the problem of 'layers' in
table cells.
So - where do you want that image to appear?
--
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
==================
"joe dora" <webforumsuser@macromedia.com> wrote in message
news:fhs4mp$65b$1@forums.macromedia.com...
>I don't think you understand my question.
> I will repeat.
> Why? I can css edit my container.
> I can edit the image in the container.
> But the image will only stay in the container if I set the attributes for
> a
> page.
> Look at the page http://usersite.com/joe
> I set the location as top 0 and left 0
> It is on the page as top 0 and left 0
> I want it to be in the table container
>
-
10. Re: image position
joe dora Nov 19, 2007 3:53 PM (in response to joe dora)Murray:
You hit the nail on the head. As soon as you mentioned heredity I knew you were going to help me. I did not know the rule. Now I know, I bent it a little and I am very pleased.
I created a container called parent exactly the same size as the space I wanted to use in my editable table. It has no position element.
I created another container called son. It has relative position. In the son container I placed the images with absolute positioning. It works just the way I want it to work. I tried it in IE 7 and Netscape 8 on my laptop.
Tell your boss to give you Thanksgiving Day off.
Please look at http://usersite.com/joe to see how good it came out.
Email me after you look so I can take the page down and post the page that should be there.
Thank you very much. Enjoy your Thanksgiving Day off.
Joe Dora at joedora@usersite.com

