The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> help with javascript positioning regardles of resolution
sofoiks
post Jul 7 2014, 04:57 AM
Post #1





Group: Members
Posts: 1
Joined: 7-July 14
Member No.: 21,207



Hello everyone
First of all i must say im so new to any programing that its sad smile.gif
My problem is this

www.tehno-san.si

How can i make the javascript to appear in that pipe made container regardles the resolution?
I can put it there with position:absolute; left:699px; top119px
but that only works if user has same resolution as i have 1600x900 with any other it just wonders from container.


<head>
<title>Domov</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<script type="text/javascript">
<!-->
var image1=new Image()
image1.src="m2.jpg"
var image2=new Image()
image2.src="m3.jpg"
var image3=new Image()
image3.src="m4.jpg"
//-->
</script>
<body>
<img src="m2.jpg" name="slide" width="475" height="225">
<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
<td id="top_bgr"><table border="0" cellpadding="0" cellspacing="0">
<tr><td width="766" height="160"><p style="margin:62px 0 0 504px;"><a href="index.html"><img src="images/spacer.gif" width="34" height="17" border="0"></a><a href="index-1.html"><img src="images/spacer.gif" width="47" height="17" border="0" style="margin-left:37px; "></a><a href="index-4.html"><img src="images/spacer.gif" width="52" height="17" border="0" style="margin-left:36px;"></a></p></td></tr>
<tr>
<td width="159"><table border="10" cellpadding="0" cellspacing="0">
<tr><td><a href="index.html"><img src="images/m1m.jpg" border="0"></a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="16"></td></tr>
<tr><td><a href="index-1.html"><img src="images/m2.jpg" border="0"></a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="16"></td></tr>
<tr><td><a href="index-2.html"><img src="images/m3.jpg" border="0"></a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="16"></td></tr>
<tr><td><a href="index-3.html"><img src="images/m4.jpg" border="0"></a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="16"></td></tr>
<tr><td><a href="index-4.html"><img src="images/m5.jpg" border="0"></a></td></tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="300"><table border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td id="bgr_left"><img src="images/spacer.gif" width="2" height="1"></td>
<td width="209"><table border="0" cellpadding="0" cellspacing="0" style="margin:21px 0 0 24px; width:139px;">
<tr><td width="139">
<p style="font-size:12px;"><strong>Naslov</strong></p>
<p style="margin-top:11px;"><strong>Tehno-san</strong></p>
<p style="margin-top:1px;"><strong>Enes Šabić s.p.</strong></p>
<p style="margin-top:11px;"><strong class="">V dolini 16</strong></p>
<p><strong class="">1000 Ljubljana</strong></p>
<p style="margin-top:11px;"><strong class="">031/431-152</strong></p>
<p><strong class="">040/252-631</strong></p>
</td></tr>
</table></td>
<td id="bgr_center"><img src="images/cent_top.jpg" width="46" height="269"></td>
<td id="w_bgr"><table border="0" cellpadding="0" cellspacing="0" height="100%" id="w_top">
<tr>
<td id="w_bot"><table border="0" cellpadding="0" cellspacing="0" style="margin:16px 0 0 144px;">
<tr><td><strong style="font-size:12px;">Spletna stran je v izdelavi!</strong></td></tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" style="margin:17px 0 0 24px;" width="319">
<tr><td><table border="0" cellpadding="0" cellspacing="0" width="319">
<tr>
<td width="10"><img src="images/ch_red.jpg" style="margin-top:5px;"></td>
<td><strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna </td>
</tr>
</table></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="7"></td></tr>
<tr>
<td width="319" height="36" bgcolor="#F4F4F4" style="padding:5px 36px 5px 7px; ">
<p>Sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" style="margin-top:13px;">
<tr>
<td width="177"><table border="0" cellpadding="0" cellspacing="0" width="164">
<tr><td><strong style="font-size:12px;">Our Services</strong></td></tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" style="margin:12px 0 0 24px; width:140px;">
<tr><td><strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr.</td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="7"></td></tr>
<tr>
<td width="140" height="47" bgcolor="#F4F4F4"><a href="#"><img src="images/logo.jpg" border="0" style="float:left; margin-right:7px;"></a>
<img src="images/spacer.gif" width="1" height="5"><br>
<strong>Elitr sed diam</strong> nonumy eirmod tempor invidunt<br clear="all"></td>
</tr>
<tr><td><img src="images/spacer.gif" width="1" height="7"></td></tr>
<tr><td><a href="#" class="ins_red">Dolor sit amet, consetetur sad </a></td></tr>
<tr><td><a href="#" class="ins_red">Ipscing elitr sed diam nonumy </a></td></tr>
</table></td>
</tr>
</table></td>
<td><img src="images/ch_b.jpg" style="margin-right:12px; margin-top:10px;"></td>
<td><table border="0" cellpadding="0" cellspacing="0" width="152">
<tr><td style="font-size:12px;"><strong>Special Offer</strong></td></tr>
<tr><td><p style="margin:12px 0 8px 0;"><img src="images/1f1.jpg" style="margin-right:9px; float:left">
<img src="images/ch_go.jpg" style="margin-right:5px;">Lorem ipsum
<br><img src="images/spacer.gif" width="1" height="4"><br>
<img src="images/ch_go.jpg" style="margin-right:5px;">Dolor st amet
<br><img src="images/spacer.gif" width="1" height="4"><br>
<img src="images/ch_go.jpg" style="margin-right:5px;">Consetetur
<br><img src="images/spacer.gif" width="1" height="4"><br>
<img src="images/ch_go.jpg" style="margin-right:5px;">Sadipscing eli
<br><img src="images/spacer.gif" width="1" height="4"><br>
<img src="images/ch_go.jpg" style="margin-right:5px;">Sed dam onu<br clear="all"></p></td></tr>
<tr><td><a href="#" class="ins_red">Dolor sit amet, consetetur sad</a></td></tr>
<tr><td><a href="#" class="ins_red">Ipscing elitr sed diam nonumy</a></td></tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr><td id="end_bgr"><p align="center" style="margin-top:18px;" class="end">Copyright © 2014.Tehno-san. Vse pravice pridržane</p></td></tr>
</table>
</body>

thank you very much for help

best regards

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 8 2014, 07:33 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,768
Joined: 9-August 06
Member No.: 6



Fist put a doctype on the gets browsers out of quirks mode. Second validate and fix the errors. You have body tags sprinkled all over the place to start with.
http://hsivonen.iki.fi/doctype/
http://htmlhelp.com/tools/validator/
http://validator.w3.org/

If you want to use absolute positioning it doesn't need to be relative the browser window. The offset is actually relative the nearest "containeing block" and for AP boxes that it is "established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'".
http://www.w3.org/TR/CSS2/visudet.html#con...g-block-details

Add a DIV and make it position: relative. Inside that DIV you put the pipe image. Not sliced, the whole image. Under the image you put your OBJECT. Now make the OBJECT position: absolute and position it the numbers of pixels you need from the top and left of the DIV which happens to be the same as the top and left of the image. You can measure that amount of pixels needed on the image with a screen ruler or just use trial and error and move it until it fits.
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: 24th November 2017 - 01:30 PM