The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Move an image and a table
Alex8937
post Feb 11 2021, 10:50 AM
Post #1





Group: Members
Posts: 3
Joined: 11-February 21
Member No.: 27,792



Hello!

I have this HTML table. It contains some text, and an image...

CODE
<table border="1">
  <tr>
    <td>text here</td>
  </tr>
  <tr>
    <td align="center">
      <img src="image_path" style="width: 20px; height: 20px;">
    </td>
  </tr>
</table>

What I need is to be able to move the image wherever I want, with the table following it as well.

Right now, if I want to move the table 100 pixels to the right (with the text and the image too), I would apply this CSS to the table tag:

CODE
position: relative; left: 100px;

But I need to apply this repositioning CSS to the image, not to the table! The image is the main element I need to control. The problem is that if I do so, only the image will be moved, without the table (and the text).

So, my question is this: is there a way to move the image, and with it, the table too?

I'd like to add that the width of the table is variable, if it makes any difference.

Thank you,
Alexander

This post has been edited by Alex8937: Feb 11 2021, 11:03 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2021, 11:16 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't understand what you want. First you say you want not only the image to be moved, but the table too. Then you say you don't want to move the table. Then you say again you want both the image and table to be moved. So what do you want?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Alex8937
post Feb 11 2021, 12:02 PM
Post #3





Group: Members
Posts: 3
Joined: 11-February 21
Member No.: 27,792



What I want is to move everything (table, text and image), but not by applying the repositioning CSS to the table tag, but to the image tag.

The image is a small arrow which indicates an exact point on a chart, and the text above it is meant to provide more details about that particular point. I am looking for a way to change the position of the arrow, and obviously, the position of the text too.

I cannot apply the repositioning to the table tag because the table width is not always the same (depending on the length of the text), plus, the arrow image might also change its horizontal position (within the table). In the code above, it's centered, but it might be aligned on the left, or on the right side of the table.

The only exact reference point I have is the arrow, as everything else always changes. So, the most elegant solution would be to control this arrow image directly, and everything else along with it.

Alex
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2021, 01:00 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



OK, I understand what you want to do, but you approach it the wrong way. There is no parent selector so it isn't possible anyway.

I'd use absolute positioning. The trick is to create a positioning context. You do that by making a containing block position: relative (without any offset, nothing will change). That makes it possible to position stuff inside it relative its edges.

Like this.

Let's say the WDG logo is your map. Use it as a background of a DIV and set the DIV to the same size as the map/logo. Inside the DIV you place the arrow image (I used a dot) and the text.


HTML
<div id="container">
<img src="https://htmlhelp.com/icon/redball.gif" width="15" height="15" alt="">
<p>
Hello world!</p>
</div>


Then with CSS we add the background map/logo, size the DIV and make it position relative.
Next you make the arrow (dot) image and the text position:absolute. Now you can position them exactly where you want them using top, right, bottom and left offset. I stuck to top and left. You can do this by trial and error or use a screen ruler to measure on the map.

This will place the dot in the middle of the globe and the text right under the WDG text in the image.

CODE
#container        { width: 250px; height: 74px;
                   background: url('https://htmlhelp.com/icon/wdglogo.gif');
                   position: relative }
#container img   { position: absolute;
                   top: 31px; left: 33px }
#container p     { position: absolute;
                   top: 42px; left: 74px;
                   font: bold 14px Arial,sans-serif; color: red }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Alex8937
post Feb 11 2021, 02:04 PM
Post #5





Group: Members
Posts: 3
Joined: 11-February 21
Member No.: 27,792



Pandy, thank you very much for taking the time to answer me!

After more thinking, I managed to come up with a solution: i will simply have the text placed inside a zero width/height div tag, like this...

CODE
<td><div style="width: 0px; height: 0px;">text here...</div></td>

This will enable the table to preserve its size, no matter the length of the text. This way I can now apply the CSS positioning right to the table (with the arrow following it), and move it freely. So basically I will reposition the arrow image by repositioning the table itself, and there will be no errors since the table never changes its size.

I tried this solution briefly, and it works fine.

Thank you once again for your answer, much appreciated!

Alex
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2021, 03:01 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Huh? wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:30 AM