PDA

Click to See Complete Forum and Search --> : how to align theses

Ice3T
04-30-2003, 07:16 PM
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
Fang
05-01-2003, 01:50 AM
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.
Ice3T
05-01-2003, 02:04 AM
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
nkaisare
05-01-2003, 08:35 AM
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.
Fang
05-01-2003, 02:06 PM
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>
Ice3T
05-06-2003, 05:47 AM
That's it!
Thanks