SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google maps Iframes

    Hello this is my code and I cannot figure out, why my map wont move to the desired location in the in the middle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">

    html, body {height:100%;margin:0;padding:0;}
    body {
    background:#fff;
    color:#000;
    font-size:13px;
    font-family: Arial, Helvetica, sans-serif;
    background-image:url('backgtround2.jpg');
    background-repeat: no-repeat;
    background-position:50% 0px;
    background-color:#969696;







    </style>
    </head>

    <body>
    <div id="iframe">
    </br>
    <iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="1" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Cv10+7xx&amp;aq=&amp;sll=51.510538,-0.595041&amp;sspn=0.182691,0.528374&amp;ie=UTF8&amp;hq=&amp;hnear=CV10,+United+Kingdom&amp;t=m&amp;ll=52.532827,-1.519203&amp;spn=0.031327,0.051498&amp;z=13&amp;iwloc=A&amp;output=embed"></iframe>



    </div>
    </body>
    </html>

  2. #2
    SitePoint Addict bronze trophy
    Join Date
    Mar 2013
    Location
    Oneonta, NY
    Posts
    307
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Aziz09,

    In your CSS code, you need to reference the hook that you have on your div surrounding the iframe. The code would look something like this

    #iframe {
    margin-right:auto;
    margin-left:auto;
    }

    Note that you will need to define the height and width of the div in order to center it. By default it is going to be the width of the page and therefore nothing will appear to have happened if you center it without defining a width.
    Alternatively you could do this

    <p align=”center”><iframe>your iframe</iframe></p>

    Hope that helps,

    Shawn


Bookmarks

Posting Permissions

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