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 1 of 1
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Picture position changes on wide angle laptop.

    Problem solved by altering :-

    #wrap {
    position: relative;
    width: 950px;..............................This was 1000px and made the page too wide for its content.
    margin: 1 auto;
    }

    Also VIPStephan helped by supplying an additional piece of code for my javascript that amongst other things, selects the random pictures.

    // this adds the image within the anchor
    var img = imagelink.appendChild(new_img);
    img.setAttribute('src', img_rnd[i]);
    img.setAttribute('class','previewimage');
    img.style.height = '400px';
    img.style.width = '600px';


    ============================================================================

    The picture on my site moves right on the laptop wide angle which results in a very wide and ugly gap between the menu text on the left. The relative positions are OK on the standard PC. Is there a way round this?

    http://www.exitfegs.co.uk

    http://www.exitfegs.co.uk/styles.css

    effpeetee

    Code:
       -  CSS 
    #clockbox0{
        position: absolute;
        left:1em;
           color:white;
           }
    #clockbox1{
         position: absolute;
          
           right: 3em;
           color:white;       }
        
    #wrap {
      position: relative;
      width: 1000px;
      margin: 1 auto;
    }
    
    
    
    body {
    	background-color: #005000;
    	font-family: Arial, Helvetica, sans-serif;
    	color: white;
    	font-weight: bold;
    }
    a img {border: none;}
    #header {position: relative;}
    #header h1 {
    	color: red;
    	text-align: center;
    }
    #content {font-size: 12px;}
    #intro {
    	color: #0FF;
    	width: 200px;
    	float: left;
    }
    
    #main {
    	float: right;
    	width: 750px;
    }
    #main p {
    	clear: both;
    	width: auto; /* reverting the width set in #content p */
    }
    #main a img {border: 2px solid white;}
    #main a:hover img {border-color: orange;}
    
    #imgcaption {
    	text-align: center;
    	color: #0FF;
    }
    .previewlink {}
    .previewimage {
    	width: 700px;
    	float: left;
    }
    
    #links {
    	clear: left;
    }
    #links ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #links ul a {
    	color: white;
          font-size:1.2em;
    	font-weight: normal;
    	text-decoration: none;
    }
    #links ul a:hover {text-decoration: underline;}
    #footer {
    	}
    Code:
      -  Index page
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Website/Page Title</title>
    <script type="text/javascript" src="include.js"></script>
    <script type="text/javascript">
    
    function greet() {
      var todaydate = new Date();
      var timeis = todaydate.getTime();
      todaydate.setTime(timeis);
      var houris = todaydate.getHours();
      if (houris >17) display = "Evening";
      else if (houris >11) display = "Afternoon";
      else display = "Morning";
      var title = document.title;
      var welcome = ("Good " + display + ". Welcome to the Taylor Website");
      document.write(welcome);
    }
    
    </script>
    <style type="text/css">
    h1 {color:red;}
    </style>
    </head>
    <body>
    <div id="wrap"><span id="clockbox0"></span><span id="clockbox1"></span><br /></div>
       <center>
     <h1 id="greet">
        
    <script type="text/javascript">
      greet();
    </script>
    </span></h1></center>    
    
    	<div id="header">
    		<span id="clockbox0"></span><span id="clockbox1"></span>
    		
    	</div>
    	<div id="content">
        <div id="intro">		
          <p>Some pictures are hyperlinks. They move on to a new picture. Click them and see!</p>
          <p>Just a bit of family fun. Don't take it too seriously. Enjoy.</p>
        </div>
        <div id="main">		
    			<p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</p>
          <p>
            The picture is randomly selected and will change every 45 seconds.Pressing the F5
            key will also change it. Clicking the screen picture will enlarge it and keep it on screen until you
            choose to move on&hellip;        </p>
        </div>
        <div id="links">
            <ul>
            <li><a href="two.html">Betty and Frank.</a></li>
            <li><a href="three.html">Little Ted and Dmitri.</a></li>
            <li><a href="four.html">Lovely Betty and Pussycat.</a></li>
            <li><a href="five.html">Betty and the Bears.</a></li>
            <li><a href="seven.html">Steven and Joyce and Mark.</a></li>
            <li><a href="twelve.html">Ritcroft family group.</a></li>
            <li><a href="Eddie.html">Eddie, relaxing at home.</a></li>
            <li><a href="Bluebell1.html">Steven at ease.</a></li>
            <li><a href="Steveintrain.html">Steve on the Bluebell Line.</a></li>
            <li><a href="steveviewing.html">Steve at the box.</a></li>
            <li><a href="dadatpub.html">'Smile please'</a></li>
            <li><a href="Barker.html">Claire, Yvonne and Susan.</a></li>
            <li><a href="xmas2006.html">Christmas 2006 at Yvonne's.</a></li>
            <li><a href="nine.html">Family photos.</a></li>
            <li><a href="hol1.html">Holiday snaps.</a></li>
            <li><a href="LittleBoyBlue.html">Little Boy Blue</a></li>
            <li><a href="Tarantella.html">Do you remember an inn.</a></li> 
            <li>(One of Betty's favourite poems.)</li><br/><br/>
             <li><a href="Picchoose.html">Picture menu.</a></li>  
              <li><a href="Latest.html">Recently Added Picture(s).</a></li>
    	   <li><a href="aaind.html">Random pictures - full screen.</a></li>
    	  </ul><br>
    </div>
            
          <p>Website Builder - Frank Taylor<br />
            Assisted by Coding Forums.<br />
            Checked with Internet Explorer 7.<br />
            Set to:- 1024 x 768 pixels.<br />
           </p>
     
    	</div>
    	<div id="footer">Updated 6th June,2007</div>
    </div>
    </body>
    </html>
    Last edited by effpeetee; 06-07-2007 at 03:53 PM. Reason: Problem solved.


 

Posting Permissions

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