dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: how to align theses

  1. #1
    Join Date
    Mar 2003
    Location
    Mtl, Canada
    Posts
    90

    how to align theses

    This is my code:

    <html><head><title></title></head><body leftmargin=0 topmargin=0 style=cursor:default>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    It does seem like a dream when you see it in the sony <span style="cursor:default;position:relative;border:1px solid black" onMouseOver=getElementById('id1').style.left=0 onMouseOut=getElementById('id1').style.left=-3000>catalogue<div id=id1 style="position:absolute;top:0;left:-3000;border:1px solid red"><img src=http://www.sonystyle.ca/images/common/relaunch/en/home_banner_evolve2.gif title="this is where it goes"></img></div></span>&nbsp; or on their website.
    </body></html>


    I want to align the top left corner of the span tag (black border) with the bottom left corner of the div tag (red border)

    I thought this might work:
    <div id=id1 style="position:absolute;top:-(this.height);left:-3000;border:1px solid red">
    but it doesn't.

    I think best to run it to see what I mean.
    Thanks
    Last edited by Ice3T; 04-30-2003 at 08:19 PM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Try using display instead of moving the image off screen:

    <html><head><title></title></head>
    <body leftmargin=0 topmargin=0 style=cursor:default>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    It does seem like a dream when you see it in the sony
    <span style="cursor:default;position:relative;border:1px solid black;" onMouseOver=getElementById('id1').style.display='block'; onMouseOut=getElementById('id1').style.display='none';>
    catalogue
    <img id="id1" style="display:none;position:absolute;top:-XX;left:0;border:1px solid red;"alt="" src="AnImage.gif"height="60" width="60"></span>&nbsp;or on their website.
    </body></html>

    Replace XX with Height of image+image border width+span border width. In this example 60+1+1=62.
    There will be a slight differencein alignment in IE and NN due to the way they calculate the size of an element.

  3. #3
    Join Date
    Mar 2003
    Location
    Mtl, Canada
    Posts
    90
    I would like the script to figure out the size by itself (the value of xx)

    Without having to specefy the size of the picture myself, the broser can display the wright size and I would like it to use that same size to use for the xx value

  4. #4
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    What are you trying to do? If we know that probably you can get a better answer on how to do it.

    "left: -3000" is incorrect. -3000 what? pixels, em, %? Why would you want to offset something by -3000px? Most screen widths are less than 2000px. If you want that to disappear, use "visibility: hidden" or "display: none".

    <body leftmargin=0 topmargin=0 style=cursor:default>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

    A much easier and correct way to do this is:
    <body style="margin: 0; padding-top: 10em">
    10em padding will make the body start from the very top, but the contents of body will be padded on top by 10em (equivalent to 10 <br>s)

    You shouldn't nest <div> within a span. Span is an inline element and div is a block level element.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Basically this:

    <html><head><title></title>
    <script type="text/javascript">
    <!--
    function ShowMe(elmID) {
    var Obj=document.getElementById(elmID)
    Obj.style.display='block';
    var position=0;
    position-=Obj.height+3; // +3 for border clearance
    Obj.style.top=position+"px";
    }
    //-->
    </script>
    </head>
    <body leftmargin="0" topmargin="0" style="cursor:default">
    <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
    It does seem like a dream when you see it in the sony
    <span style="cursor:default;position:relative;border:1px solid black;" onMouseOver="ShowMe('id1');" onMouseOut="document.getElementById('id1').style.display='none';">
    catalogue
    <img id="id1" style="display:none;position:absolute;top:0;left:0;border:1px solid red;" alt="" src="../NSL5/images/links/aku.gif"></span>&nbsp;or on their website.
    </body></html>

  6. #6
    Join Date
    Mar 2003
    Location
    Mtl, Canada
    Posts
    90
    That's it!
    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles