The url to my site is www.trecall.com. I am having trouble with the layout. I would like it to look the same on all screens, regardless of the screen size. Right now, I made the layout look good for a smaller size screen. However, I see that if I minimize my screen, it messes up the layout, and if I enlarge it, it also gets messed up somewhat. What can I do to make my website look the same, regardless of screen size?
I would appreciate any help you can offer!! Thank you!
Jump to Poststop using pixels,
fixed measurements screw up as window or screen size changes
current best practice for dimensioning are em or % relative scalars that auto adjust to screen size window size and user preference
Jump to Postjavascript does not work, more users have javascript turned off as a securtity measure, any site that depends on javascript will fail
pixels are not the same size,
each generation of monitor has a higher resolution so a smaller px size, all the fixed size sites are getting smaller …
Hi,
http://www.maxdesign.com.au/articles/liquid/
please study this one
1) from scratch onwards we should maintain our STRUCTURE of layout.
2) now header size is 1300 better to take into 1024 or 100% width (then it will fit all screens)
3) According to the total width you should change the image sizes of animation
25% 75% = 100%
250px 774px = 1024px
logo width + button panel width=total width of layout
now its not like that, that's why layout disturbed (this is the main problem of this layout, and giving margin-right, left....ext)
just i am giving the example of structure:
<div id="total-layout">
<div id="header"></div> (logo+button panel)
<div id="anim-menu"></div>
(6 animation images width = total layout width then the layout will fit into the page)
<div id="footer"></div>
</div>
better to take 100% or 1024 fixed width depends on that you will give margin padding width.
And i observe your code of CSS, margin spelling mistakes so pls check it once.
thank you
Majeti
Majeti,
Thank you for your reply.
I followed your instructions, and made the header be 100% width, so that's fine now.
You said to make the animation menu div (called .cc_menu in m code) be equal to the main div (called main) I tried that (I made them both 100% width), and the problem still remained. The site is centered in some screens, but when you minimize or maximize the screen size, it is not centered anymore.
Any suggestions that might help?
Thank you so much for your time!
What I do is make EVERYTHING that you want the same on all pages into external files. Then just reference this file, in this case a css file, in all the html files. You can then proceed to tinker with the code, and every page will look the same (if you have the same div names). use my site for an example (except for the drop down menus...):
http://www.ourshepherd.com/bsatroop918/default.htm
(I only coded/maintain the bsatroop918 directory)
tawes01,
Thank you for your reply, but I think you may have mis-understood my question.
My problem is that the site is centered on only one size screen. when the screen is minimized or maximized, the whole site becomes un-centered. I wanted to know how to make it look the same on ALL screen sizes.
Anyone??
Thanks!
Here's a Javascript I wrote to keep everything centered onload and when the window is resized. just call the function in the <body> tag like so:
<body onload="offst()" onresize="offst()">And put this in an external .js file thats referenced by all html files:
var centered=true;
var offset;
function offst() {
if (centered) {
var newWidth=parseInt(document.body.clientWidth);
// edit the # number below to be the total width of the actual content
if (newWidth >= #) {
newWidth-=#
newWidth/=2;
// add or remove these as necessary; these are the different div's affected
// change the text in quotes (as in ...Id("HERE")...) to the name of div.
// Make sure to keep this pattern, and the newWidth+offset
// change the # to an integer that would be how offset the div is from
// the left edge of the content.
document.getElementById("header").style.left=(newWidth+#)+"px";
document.getElementById("navbar").style.left=(newWidth+#)+"px";
document.getElementById("left").style.left=(newWidth+#)+"px";
document.getElementById("center").style.left=(newWidth+#)+"px";
document.getElementById("footer").style.left=(newWidth+#)+"px";
document.getElementById("docmenu").style.left=(newWidth+#)+"px";
offset=newWidth;
}
else {
offset=0;
}
}
else {
offset=0;
}
}You can look at my home page, the CSS File, and the JS File and see how I did it. Hope this helps!
stop using pixels,
fixed measurements screw up as window or screen size changes
current best practice for dimensioning are em or % relative scalars that auto adjust to screen size window size and user preference
should I change the widths of all elements in the css to percent? Anything besides the width? And does it make a difference if it's ems or %? thanks for your response.
Thanks, I changed the measurements to ems. It helped the problem.
actually, the whole javascript is meant to keep exact alignment even when the screen or window size is adjusted. em's will do the trick, but not exact alignment. Same with percents. Believe me, on my site, I tried them both.
I tried the Javascript, and it did not work!
javascript does not work, more users have javascript turned off as a securtity measure, any site that depends on javascript will fail
pixels are not the same size,
each generation of monitor has a higher resolution so a smaller px size, all the fixed size sites are getting smaller and smaller
it may take time to learn to use current best practice, the alternative is failure
My problem still exists, though! If anyone can help me figure out what's going on, I'd greatly appreciate it!!!
I centered my site by adding <div align="center">. The main animated menu, however, does not center with the rest of the site, it just remains on the left side. I tried adding margin:0 auto, as well as text-align:center, and both did not work!
Anyone?? Thanks!!
If this is the same css that is set with fixed margins and position:absolute, of course it stayed put, absolute means STAY PUT, if you want it to move it can't be fixed or absolute
I tried taking out the position:absolute, and it still didn't work.
I don't know what to tell you. That's always worked for me.
any site that depends on javascript will fail.
almostbob, you are wrong. I am not saying I am right about everything, but you are WRONG. Javascript is a very versatile, cross-browser programming language that allows HTML and CSS to be customized and made interactive, rather than being some page that has to be on the right screen size to look okay, or having to sign in... oh, wait! unless you go into complex flash, SIGNING IN DOES NOT EXIST WITHOUT JAVASCRIPT!!!! Javascript is NOT a piece of crap useless language. It is extremely useful, and just because it can be turned off DOES NOT MEAN A SITE WILL FAIL!!!!!!!!!!!!!!!!
If this is the same css that is set with fixed margins and position:absolute, of course it stayed put, absolute means STAY PUT, if you want it to move it can't be fixed or absolute
Also, position:absolute only means that div is exactly where you say. it can easily be changed by javascript... OH, WAIT!!! javascript can be turned off. OOPSIES! I guess I'll have to use an over-complicated series of CSS and HTML instead of position:absolute or javascript...
suavedesign, can you post the javascript I gave you, as you have it in your code? My instructions weren't clear, and you may have just edited it wrong.
firts of all nice site! sencondly turn the px into % when wanting to go fullscreen with all the elements .. I doubt that you can do something with the images on mouse over
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.