required assign relative position and absolute behavior

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mohammad64
    New Member
    • Jul 2010
    • 3
    #1

    required assign relative position and absolute behavior

    Hi experts please help me
    i want to don't view yellow area and assign position of image relative like when used absolute position for image, in code below:
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .back
        {
            background-color: Yellow;
        }
        .img
        {
            position: relative;
            top: 50px;
            left: 400px;
        }
    </style>
</head>
<body>
    <table class="back">
        <tr>
            <td>
                <img class="img" src='http://clarifying.files.wordpress.com/2008/04/quill_pen.png' />
            </td>
        </tr>
    </table>
</body>
</html>
    Tags: None
    • TheServant
      Recognized Expert Top Contributor
      • Feb 2008
      • 1168
      #2
      So you can put the feather infront of the yellow box by removing:
      Code:
                  position: relative;
            top: 50px;
            left: 400px;
      for the feather.

      You can then add those properties to .back class to move the whole lot in.

        Comment

        • mohammad64
          New Member
          • Jul 2010
          • 3
          #3
          ok, thank you TheServant this reply is true for my half question because i should say more.

          in fact i am writing a project about a map that have 3 status:
          1- MAP: show png files.
          2- SATELLITE: show jpg files.
          3- HYBRID: hybrid of above.

          all images load in a table.
          by use SATELLITE files in 'backgrand-image' of <td> and MAP files load in <img> tag inside of <td>.

          Now i must show a marker (png file) that show current position.
          this file should align by current td.
          i think show marker in <img> after map file and use position: relative for marker but current <td> that contain marker get more space and it is bad in show a map.(bad free space appear in table).

          for this condition in my project i shouldn't remove 'background-color' in simple code in my above question.

          how solve this problem?
          thank you again.

            Comment

            • TheServant
              Recognized Expert Top Contributor
              • Feb 2008
              • 1168
              #4
              Not sure if I fully understand, but this gives the table the <td> the same background as the image within it. You can see that when you put <!-- and --> around the <img /> you see exactly the same image.
              Code:
              <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example</title>
    <style type="text/css">
        .map {
        	background: transparent url(http://clarifying.files.wordpress.com/2008/04/quill_pen.png) top left no-repeat;
        	height: 477px;
        	width: 242px;
        	padding: 0;
        }
    </style>
</head>
	<body>
	    <table>
	        <tr>
	            <td class="map">
	                <img src='http://clarifying.files.wordpress.com/2008/04/quill_pen.png' />
	            </td>
	        </tr>
	    </table>
	</body>
</html>

                Comment

                • mohammad64
                  New Member
                  • Jul 2010
                  • 3
                  #5
                  thanks
                  i write back class to show table area(SATELLITE images)to different by page, why you clean it!

                  in my sample code please align picture related table, no related of page in {position:absol ute} and you see no yellow area.(without clean back class)

                    Comment

                    Previous template Next
                    Working...