It's probably best to design for both 800*600 and 1024*768 resolution. Say you have layers on your page. I can center tables to looks good in both resolutions but layers will be thrown off in a different res. and also if I have a popup menu or a pop up window that is absolutely positioned in the code using x and y params, that will also be thrown off. So how do you design these page elements to look good in both 800*600 and 1024*768? Thank you very much for any advice.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Positioning layers for both 800*600 and 1024*768 resolution 5
- Thread starter flasher
- Start date
-
1
- #2
Several ways
1. get a center layers extension from the DW exchange. It centers multiple layers.
2. layout designer from projectseven.com does a good job of creating liquid layers
3. use % as layer widths insted of px
4. use snap layers from projectseven to bind a layer to an object
and many more ways....
It will really depend on what your page layout looks like and what you want to achieve Ranjan
- A Dreamweaver Community
Join today for your answers in web design
1. get a center layers extension from the DW exchange. It centers multiple layers.
2. layout designer from projectseven.com does a good job of creating liquid layers
3. use % as layer widths insted of px
4. use snap layers from projectseven to bind a layer to an object
and many more ways....
It will really depend on what your page layout looks like and what you want to achieve Ranjan
- A Dreamweaver Community
Join today for your answers in web design
sorry thats DW specific.
you will need to play with % instead of px for width and use DOM and javascript to achieve centering of layers or positioning them with respect to the browser window top, bottom, left or right Ranjan
- A Dreamweaver Community
Join today for your answers in web design
you will need to play with % instead of px for width and use DOM and javascript to achieve centering of layers or positioning them with respect to the browser window top, bottom, left or right Ranjan
- A Dreamweaver Community
Join today for your answers in web design
- Thread starter
- #4
-
4
- #5
Flasher, you can also use JS, like I do on my site.
If you just wanna center all your layers, you can do this:
And you can call all your layers like this:
What this will do is move any/all <div> tags to the center of the page...
For an example of how this works, go here: I have not failed; I merely found 100,000 different ways of not succeding...
If you just wanna center all your layers, you can do this:
Code:
<script>
function moveDivs(){
if (screen.width>=1024){
for (i=0;i<document.all.length;i++){
if (document.all[i].tagName.toLowerCase()=='div' && document.all[i].style.position!=null && document.all[i].style.left!=null)
document.all[i].style.pixelLeft+=100;
}
}
}
onload=moveDivs;
</script>
Code:
<div id="anyname" style="position:absolute; width:250px; height:59px; z-index:3; left: 315px; top: 94px">
.........
.........
.........
</div>For an example of how this works, go here: I have not failed; I merely found 100,000 different ways of not succeding...
- Thread starter
- #6
You can also do that with JS:
ANd you can call your layers like this:
And so forth...you define all your position in the <script> file... I have not failed; I merely found 100,000 different ways of not succeding...
Code:
<script>
var hres = false
var lres = false
if ((wd >= 1024) || (hi >= 768)) {
hres = true
}
else {
lres = true
}
if (hres) {
document.write('<style type="text/css">#Layer1 {position:absolute; z-index:1; left:44px; top:99px; height:36px; width:22px;} #Layer2 {position:absolute; width:200px; height:115px; z-index:1; left: -2px; top: 150px;} #Layer3 {position:absolute; width:200px; height:115px; z-index:1; left: 1px; top: 356px;} #date {position:absolute; width:71px; height:40px; z-index:1; left: 780px; top: 18px;}</style>')
}
else {
document.write('<style type="text/css">#Layer1 {position:absolute; z-index:1; left:44px; top:99px; height:36px; width:22px;} #Layer2 {position:absolute; width:200px; height:115px; z-index:1; left: -2px; top: 150px;} #Layer3 {position:absolute; width:200px; height:115px; z-index:1; left: 1px; top: 356px;} #date {position:absolute; width:71px; height:40px; z-index:1; left: 593px; top: 18px;}</style>')
}
</script>
Code:
<div id="Layer1">
...
...
...
</div>
Code:
<div id="Layer2">
...
...
...
</div>
Code:
<div id="Layer3">
...
...
...
</div>Forgot to mention what this script will do...
ALl it does is load the correct <style> depending what resolution you have. If its greater then 1024 and 768, then the first set of <style> in the if gets excuted, otherwise then the else gets excuted... I have not failed; I merely found 100,000 different ways of not succeding...
ALl it does is load the correct <style> depending what resolution you have. If its greater then 1024 and 768, then the first set of <style> in the if gets excuted, otherwise then the else gets excuted... I have not failed; I merely found 100,000 different ways of not succeding...
- Thread starter
- #9
- Thread starter
- #10
GUJUm0deL,
I tried the script and I just can't get it to work. Can I ask you a huge favor? If I emailed you the page file, would you mind sticking the script where it belongs in the code and telling me how to get it to work...I would really appreciate it as I could probably sit on this all day without getting anywhere...Thanx a million.
I tried the script and I just can't get it to work. Can I ask you a huge favor? If I emailed you the page file, would you mind sticking the script where it belongs in the code and telling me how to get it to work...I would really appreciate it as I could probably sit on this all day without getting anywhere...Thanx a million.
- Thread starter
- #11
Actually, I forgot-You could just get the code off here:
Just so i'm clear, on your page what layers are you talking about?? I went to the site and looked at the code also, and there's alot of code there...
Can you tell me what layers you want me tp fix for you?? I'm assuming you are talking about the layers with the two flags and the logo "we stand with isreal..." correct??
I have not failed; I merely found 100,000 different ways of not succeding...
Can you tell me what layers you want me tp fix for you?? I'm assuming you are talking about the layers with the two flags and the logo "we stand with isreal..." correct??
I have not failed; I merely found 100,000 different ways of not succeding...
- Thread starter
- #13
Sorry, yes there are 3 layers that get thrown off plus the blue sliding popup menu on the left. (4 page elements altogether need to be fixed.)
2 of the layers are the animated flags. The 3rd layer is directly above the flags and is made up of the textbox and the submit button. (The blue square that says "join mailing list" is an image beneath this layer.)
The blue menu is set at x=50 and y=167. This also gets thrown off so not sure how to fix that...(You'll find this code easily as it's in the beginning of the body tag and it's labeled: <!-- Begin of Pop Up Code -->
By the way, the "stand with israel" square is an image - not a layer.
Thanx a million. Let me know if anything else is not clear.
2 of the layers are the animated flags. The 3rd layer is directly above the flags and is made up of the textbox and the submit button. (The blue square that says "join mailing list" is an image beneath this layer.)
The blue menu is set at x=50 and y=167. This also gets thrown off so not sure how to fix that...(You'll find this code easily as it's in the beginning of the body tag and it's labeled: <!-- Begin of Pop Up Code -->
By the way, the "stand with israel" square is an image - not a layer.
Thanx a million. Let me know if anything else is not clear.
- Thread starter
- #14
What is your email?? I fixed three of the four layers for you, the fourth one, the one that is the menu, I cannot locate the position...so that you will have to do.
Just see how I fixed the three layers (two flags and the submit layer), and do it the same way...
Did you create the menu using Fireworks?? Or did you get it from somewhere else??
Just a side note, you have alot of scripts on that one page, might wanna consider making the misc. scripts into an external file and just calling them...
Anyways, leave me your email address here and I will email you tge file ok?? Just so you know, I get off work in one hour, so if I get your post late then I will email the file tomm. ok?? I have not failed; I merely found 100,000 different ways of not succeding...
Just see how I fixed the three layers (two flags and the submit layer), and do it the same way...
Did you create the menu using Fireworks?? Or did you get it from somewhere else??
Just a side note, you have alot of scripts on that one page, might wanna consider making the misc. scripts into an external file and just calling them...
Anyways, leave me your email address here and I will email you tge file ok?? Just so you know, I get off work in one hour, so if I get your post late then I will email the file tomm. ok?? I have not failed; I merely found 100,000 different ways of not succeding...
- Thread starter
- #16
You are so kind to do this for me. My email is rochel@webkonnector.com
I will try to do the menu myself but the only thing is that it's not a typical layer. It's a popup menu program that writes up the code for you and sticks it dynamically in your page. So I may not be able to copy exactly what you did to the other layers. I'm copying the code here so that you can see it:
<!-- Begin of Pop Up Code -->
<!-- Pop-Up DHTML menu is © by Anoxy Software - [Do not remove this copyright notice] -->
<Script Language="JavaScript" Src="popblank.js"></Script>
<Script Language="JavaScript">
<!--
popbasedir = "";
mpx=50;
mpy=167;
peXt = (navigator.userAgent.indexOf("Opera"
!=-1 && navigator.userAgent.indexOf("5.">0) ? "op" : (document.all) ? "ie" : (document.layers) ? "nn" : (!document.all && document.getElementById) ? "mo" : "";
if (peXt!=""{
document.write('<Scr'+'ipt Language="JavaScript" Src="'+popbasedir+'popup'+peXt+'.js"></Scr'+'ipt>');
}
function onloevha(){
if (peXt=="nn"
popmcreate();
}
////-->
</Script>
Thanx so much!
I will try to do the menu myself but the only thing is that it's not a typical layer. It's a popup menu program that writes up the code for you and sticks it dynamically in your page. So I may not be able to copy exactly what you did to the other layers. I'm copying the code here so that you can see it:
<!-- Begin of Pop Up Code -->
<!-- Pop-Up DHTML menu is © by Anoxy Software - [Do not remove this copyright notice] -->
<Script Language="JavaScript" Src="popblank.js"></Script>
<Script Language="JavaScript">
<!--
popbasedir = "";
mpx=50;
mpy=167;
peXt = (navigator.userAgent.indexOf("Opera"
!=-1 && navigator.userAgent.indexOf("5.">0) ? "op" : (document.all) ? "ie" : (document.layers) ? "nn" : (!document.all && document.getElementById) ? "mo" : "";if (peXt!=""
{document.write('<Scr'+'ipt Language="JavaScript" Src="'+popbasedir+'popup'+peXt+'.js"></Scr'+'ipt>');
}
function onloevha(){
if (peXt=="nn"
popmcreate();
}
////-->
</Script>
Thanx so much!
Wait, the last layer you need help with is with a popup?? Why bother fixing that?? I thought your last layer problem was the blue menu that slides up and down the page when you scroll, the menu that is in front of the sidebar...
I am about to eamil you the file now, ok??
In order for me to see the images and all that, I saved the images from the site in a folder and used them. You may need to change the image names, especialy the rollover images. OK?? Also, keep the HTML file the way it is, if you view it in Dreamweaver, then in the design view the layers may appear in strange place, but do not worry! When you view it in the browser, it will appear just fine. I have tested it in IE6 on a window98 PC ok??
Like all programming, make sure you save a back up copy of your work before saving my file on top of yours ok?? I have not failed; I merely found 100,000 different ways of not succeding...
I am about to eamil you the file now, ok??
In order for me to see the images and all that, I saved the images from the site in a folder and used them. You may need to change the image names, especialy the rollover images. OK?? Also, keep the HTML file the way it is, if you view it in Dreamweaver, then in the design view the layers may appear in strange place, but do not worry! When you view it in the browser, it will appear just fine. I have tested it in IE6 on a window98 PC ok??
Like all programming, make sure you save a back up copy of your work before saving my file on top of yours ok?? I have not failed; I merely found 100,000 different ways of not succeding...
- Thread starter
- #18
As for the menu, I can't fix that because I don't see it when I view it from my HD...
But this might fix it:
1) Find this line: <Layer Name="DboX" style="position:absolute"></Layer> and change it to: <div id="DboX" style="position:absolute"></div>
2) In the script at top of page, where it starts like this:
var hres = false
var lres = false
var wd = screen.width
var hi = screen.height
...
...
, add this in the document.write statements: #DboX {position:absolute; width:71px; height:40px; z-index:1; left: 593px; top: 18px;}, make sure this goes after the #mailing code, and right before the </style> ok??
And then, find the position that fits your needs...
If that does not work, you're gonna have to contact Anoxy Software, the makers of the menu script and ask them ok?? I have not failed; I merely found 100,000 different ways of not succeding...
But this might fix it:
1) Find this line: <Layer Name="DboX" style="position:absolute"></Layer> and change it to: <div id="DboX" style="position:absolute"></div>
2) In the script at top of page, where it starts like this:
var hres = false
var lres = false
var wd = screen.width
var hi = screen.height
...
...
, add this in the document.write statements: #DboX {position:absolute; width:71px; height:40px; z-index:1; left: 593px; top: 18px;}, make sure this goes after the #mailing code, and right before the </style> ok??
And then, find the position that fits your needs...
If that does not work, you're gonna have to contact Anoxy Software, the makers of the menu script and ask them ok?? I have not failed; I merely found 100,000 different ways of not succeding...
- Status