View Full Version : Picture position changes on wide angle laptop.

06-07-2007, 09:37 AM
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.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?




position: absolute;
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-weight: normal;
text-decoration: none;
#links ul a:hover {text-decoration: underline;}
#footer {

- 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">
<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();
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");

<style type="text/css">
h1 {color:red;}
<div id="wrap"><span id="clockbox0"></span><span id="clockbox1"></span><br /></div>
<h1 id="greet">

<script type="text/javascript">

<div id="header">
<span id="clockbox0"></span><span id="clockbox1"></span>

<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 id="main">
<p id="imgcaption">(If you see this text instead of an image you probably have JavaScript disabled.)</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 id="links">
<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>

<p>Website Builder - Frank Taylor<br />
Assisted by Coding Forums.<br />
Checked with Internet Explorer 7.<br />
Set to:- 1024 x 768 pixels.<br />

<div id="footer">Updated 6th June,2007</div>