View Full Version : Page distorting. Unknown cause!

02-22-2009, 07:29 PM
Hello All,

firstly my website can be found here (www.ajlx.co.uk)

I am currently just working on the mainpage. All the other pages at the moment are just being treated as scratchpads where I can play with how stuff might look/work.

The issue I am having is that the page is not displaying correctly. With the way it is at present I am happy with how the background looks, and the page widths. But I am not happy with the height of it. A fair portion of the page is being cut off and messed about with at the bottom. How can I re size it so that it all fits in one window with no scroll bars? At the moment when you look at the bottom it is really messy.

Any other general comments tips welcome.

Many thanks


02-22-2009, 07:37 PM
Hello AJLX,
You may be a little less happy with it than you think. This is a cap at a wider resolution: http://nopeople.com/webfiles/Capture4.JPG

02-22-2009, 07:44 PM
To fix it I think you'll need to re-think your absolute positioning. See this link - http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

Once you get your background the way you want - demo (http://nopeople.com/CSS/background_image_resize/index.html) - You can put your page content in a div, center it, and position stuff inside that div with floats and margins.

see the links about validating in my sig below.


04-27-2009, 05:40 PM
Hello All,
Back again to pick your brains on something that I hope you will find easy...

I have taken your advice so far and have my background and page in the positions that I think look ok. When I re-size the page the background and page all stay in proportion.

BUT how do I get the text and image to also stay in there correct positions, no matter what resolution the site is viewed in?

New site is here (www.ajlx.co.uk/test site/index.htm)

Once again

Many thanks.

04-28-2009, 03:58 AM
Positioning everything inside #base using floats and margins would be how I would have done it. Now that you've got all the Absolute Positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)in place...
I think you just need to edit your markup so #base actually encloses all the elements your trying to position inside it. You should be able to just move it's closing tag to the end of your markup.
That will make the AP elements positioned relative to #base instead of the Browser viewport.
Try it like this -

<!--****************************************** Background and Base images *************************-->
<img src="Images/Site/home.png" alt="background" id="background_image" height="2548" width="3364">

<div id="base"><img src="Images/Site/base.png" height="95%" width="800">

<div id="ajlx"><a href="http://www.ajlx.co.uk/index.htm"><img src="Images/Site/ajlx.png" alt="" border="0"></a></div>

<!--**************************************** buttons ***********************************************-->
<div id="btnservices"><a href="http://www.ajlx.co.uk/services.htm"><img src="Images/Site/services.png" alt="" border="0" height="40" width="126"></a></div>
<!-- div for the serives button-->
<div id="btncontact"><a href="http://www.ajlx.co.uk/contact.htm"><img src="Images/Site/contact.png" alt="" border="0" height="40" width="126"></a></div>
<!-- div for contact button-->
<div id="btnevents"><a href="http://www.ajlx.co.uk/events.htm"><img src="Images/Site/about.png" alt="" border="0" height="40" width="126"></a></div>
<!-- div for the events button-->
<div id="btngallery"><a href="http://www.ajlx.co.uk/gallery.htm"><img src="Images/Site/gallery.png" alt="" border="0"></a></div>
<!-- div for the gallery button-->

<!--***************************************Page exclusive items***********************************-->
<div id="jones"><img src="Images/Site/jones.png" border="0" height="200" width="250"></div>
<div id="text">
<p class="style1" align="justify">Andy Jones Lighting and Rigging </p>
<p class="style2" align="justify">Welcome to my website. </p>
<p class="style2" align="justify">I am a freelance lighting designer and rigger working in the UK. I have done a large variety of work including many theatre,<br>
rock 'n roll and corporate events. </p>
<p class="style2" align="justify"> As well as lighting I do lots of rigging work. I have trained in rope access and rescue as well as motor repair. I also have a current IPAF ticket. I have experience in stage management, sound, and pyrotechnics. </p>
<p class="style2" align="justify">This site aims to give you an insight into what I do. It is also a useful place to play around with my web design skills. As such this website is constantly evolving and growing. I have only just uploaded this, and have yet to add some of the content or graphics. If you have any feedback regarding my site then please get in touch. </p>
<p class="style2" align="justify">Enjoy browsing my site. If you have any questions then please feel free to email me. </p>
<p class="style2" align="justify">Regards,</p>
<p class="style2" align="justify">Andy Jones</p>
<p class="style1" align="justify">&nbsp;</p>
<!--end base--></div>
<div style="left: 0px; top: -2px; width: 1234px; height: 2px;" class="firebugHighlight"></div><div style="left: 1234px; top: -2px; width: 2px; height: 721px;" class="firebugHighlight"></div><div style="left: 0px; top: 717px; width: 1234px; height: 2px;" class="firebugHighlight"></div><div style="left: -2px; top: -2px; width: 2px; height: 721px;" class="firebugHighlight"></div>