Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    South UK
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Page distorting. Unknown cause!

    Hello All,

    firstly my website can be found here

    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

    AJLX

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello AJLX,
    You may be a little less happy with it than you think. This is a cap at a wider resolution:
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    To fix it I think you'll need to re-think your absolute positioning. See this link - http://www.tyssendesign.com.au/artic...ning-pitfalls/


    Once you get your background the way you want - demo - You can put your page content in a div, center it, and position stuff inside that div with floats and margins.


    http://validator.w3.org/check?verbos...ww.ajlx.co.uk/
    see the links about validating in my sig below.



    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    AJLX (02-22-2009)

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Location
    South UK
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

    Once again

    Many thanks.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 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 -
    Code:
    <!--****************************************** 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>
      </div> 
    <!--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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •