-
1. Re: Text overlay
Ben Pleysier Jan 10, 2011 6:37 AM (in response to broomeGirl)Yes, by stop using relative and absolute positioning. Have a look here http://apptools.com/examples/pagelayout101.php
Gramps
-
2. Re: Text overlay
pziecina Jan 10, 2011 9:14 AM (in response to broomeGirl)Hi
The page looks great on my IMac and my windows laptop but apparently on the older monitors the h1 and the p tags run over the top of the logo/card.
My monitor is only 6 months old, (led/1080p hd) and this still happens, this shows it is a problem with the design/code not the monitors.
As someone who is offering their services as a web designer/developer you should know this.
PZ
-
3. Re: Text overlay
John Waller Jan 10, 2011 1:07 PM (in response to broomeGirl)The page looks great on my IMac and my windows laptop but apparently on the older monitors the h1 and the p tags run over the top of the logo/card.
It's all monitors, not just older ones.
Avoid using position:absolute to position everything on the page precisely where you want it.
Since it removes the element from the natural flow of the page, position:absolute often has unintended consequences such as those you're experiencing now.
Since older monitors are smaller and lower res, this issue appears first. But it also appears in smaller browser windows on hi res monitors. Not everyone views the web with fullscreen browsers.
Since you're designing on a hi res monitor, always test your pages in various browser sizes. I regularly test mine by grabbing the lower RHS of the browser window and dragging it through a series of different sizes to see the effect on page layout.
Remove all positioning (relative and absolute) from your CSS and re-layout the page using margins and floats.
e.g.
#card {
width:475px;
position:absolute;
top:122px;
padding: 0;
margin:0;
left:0px;
}can be replaced with
#card {
float:left;
margin-top:122px}
which leaves it in the natural flow of the page so that text wraps around as expected in smaller browser windows.
You can then float the other page elements around it.
See http://www.barelyfitz.com/screencast/html-training/css/positioning/ for more.
-
4. Re: Text overlay
broomeGirl Jan 10, 2011 5:05 PM (in response to pziecina)Dear PZ, I would love to be in your position, where you never need help. But myself I am constantly learning things and not knowing javascript I was having problems with the layout because of the dock menu. I do know positioning techniques as you can see from the rest of my site.
Sometimes we all get a little frustrated/tired and dont think so clearly and need a little help.
-
5. Re: Text overlay
broomeGirl Jan 10, 2011 5:07 PM (in response to John Waller)Thanks very much for your reply, hopefully I have it sorted. I hardly ever use relative and absolute positioning but the menu dock does and it was throwing out my normal layout techniques. Think I just got a bit tired and stupid. Thanks anyway.
-
6. Re: Text overlay
John Waller Jan 10, 2011 5:22 PM (in response to broomeGirl)Looks good now.
I think we all have those moments when silly things stump us and a fresh pair of eyes points out the obvious.




