The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> layer positioning on different resolutions
dakky
post Jul 14 2012, 06:27 AM
Post #1





Group: Members
Posts: 1
Joined: 14-July 12
Member No.: 17,435
Hi

Thanks very much for any help in advance.
I am designing my page on a laptop whose monitor is set at 1366 x 768

I have a swf which is centered, and a jpg banner which needs to overlap a certain part of it. I placed the banner using absolute position and playin with the numbers until it was perfect. I have realised however that when the page is looked at on the monitor which is at 1920 x 1080 then the banner will not be in the right place.

Can you tell me how to do this correctly please???

relevant css code
CODE
h2
{
position:absolute;
left:215px;
top:735px;
}




videobanner is the jpg going over the swf

html file
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link href="styletest.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>

<div style="text-align:center" id="header">        
    <br>    
                
<a href="c:\index.html"><img src="images/HOME.png" alt="BACK TO HOME"/></a>
    </div>    


<script type="text/javascript" src="swfobject.js"></script>
<br>  <br> <br> <br> <br>
<div style="text-align:center" id="header">
<embed wmode="transparent" src="movie.swf" type="application/x-shockwave-

flash" allowfullscreen="true" allownetworking="internal" width="920"

height="760">
</div>

<h2><img src="videobanner.jpg" width="920" height="87" alt="banner" /></h2>

</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 14 2012, 09:38 AM
Post #2


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

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
From the top of my head...

1. Center the banner with AP. Then move it from there with negative margins.

2. Center the banner with auto margins (if that's what you've done for with the flash). Then use position: relative to put it where you want.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 12:17 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC