Home/ Questions/Q 9008321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T01:54:45+00:00

I’m trying to create a html document to be shown on iphone and ipad.

  • 0

I’m trying to create a html document to be shown on iphone and ipad.

It’s a simple one but I’ve some problems with the image position and I’m not sure if I should use relative or absolute position.

What I’d like to have is an image in the center of the page, (a litte bit under the top of the screen) and a youtube iframe centered under the image.

This code is working on portrait but not on landscape as the image will not be in the center if the page.

I’d like also to have some space between the image and the youtube frame.
This is my actual code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<meta content="width=device-width;" initial-scale="1.0;" maximum-scale="2.0;" name="viewport" user-scalable="1;" />
<body bgcolor="#9fa2b5">
   <div align="center">
      <img style="position:relative; TOP:15px; LEFT:65px; "src="http://mysite.jpg" alt="image is missing"  width=90 height=130>
      <p>
      </p>

      <iframe  width="320" height="180" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
   </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are several different techniques to centre page contents and a few are discussed at this article on w3.org. You are using the align attribute on the div, and it should work. However, in the image tag you are also adding left:65px; which will move the image 65px to the right of centre.

    In a pure css solution, you should do the following to the html.

    <div class="container">
    <img class="rndImage" src="http://myimage.org" alt="image is missing"/>
    <iframe class="youtube" src="http://www.youtube.com/embed" frameborder="1" ></iframe>
</div>

    And add the following CSS in style block or in an attached css style sheet.

    iframe.youtube
{
    width:320px;
    height:180px;
    display:block;
    margin:15px auto;
}

img.rndImage
{
    display:block;
    width:90px;
    height:130px;
    margin:15px auto;
}

div.container
{
   position:relative;
   width:100%;
   margin:5px, auto;
}

    The above code separates out the style from the html and links it by using classes. You can see a working example on JsFiddle.Net.

    • 0