AP Divs (layers) move when I open my website on different window size.

First of all, this is my first time trying to make a website.
I'm doing an assignment for my class and i found it difficult for me to fix. I have spend 4-5 hours researching online but nothing work for me.
Well,the problem is the AP Divs (layers) move when I open my website on different window size(iphone,ipad).
The website only look right on 1366 x 786 resolution. Please take a look at my 2 pics below:
And I don't know how to make the website to fit on the iphone and ipad so that I don't have to scroll down or sroll to the right to view the whole thing.
Please someone help me!
The code:
<!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" />
    <meta name="viewport" content="width=device-width" />
<title>Boston Green Community College</title>
<style type="text/css">
<!--
body {
    background-color: #3f7244;
    padding: 0;
    color: #8d0101;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.4;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #003702;
    text-decoration: NONE; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
    color: #028b66;
    text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
    width: 960px;
    background-color: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
    background-color: #ADB96E;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
    padding: 0px 0;
/* ~~ The footer ~~ */
.footer {
    padding: 10px 0;
    background-color: #CCC49F;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#apDiv1 {
    position: absolute;
    width: 251px;
    height: 101px;
    z-index: 1;
    left: 871px;
    top: 10px;
#apDiv2 {
    position: absolute;
    width: 228px;
    height: 60px;
    z-index: 2;
    left: 9px;
    top: 1397px;
#apDiv3 {
    position: absolute;
    width: 273px;
    height: 198px;
    z-index: 2;
    left: 851px;
    top: 383px;
#apDiv4 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 3;
    left: 242px;
    top: 120px;
#apDiv5 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 4;
    left: 902px;
    top: 178px;
#apDiv6 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 4;
    left: 857px;
    top: 171px;
#apDiv7 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 4;
    left: 455px;
    top: 547px;
#apDiv8 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 4;
    left: 853px;
    top: 113px;
#apDiv9 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 5;
    left: 853px;
    top: 246px;
#apDiv10 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 6;
    left: 513px;
    top: 121px;
#apDiv11 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 6;
    left: 511px;
    top: 123px;
-->
</style></head>
<body>
<div class="container">
  <div class="header"><a href="#"><img src="Pictures/34d-1.png" alt="Insert Logo Here" name="Insert_logo" width="619" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
    <div id="apDiv11"><font color="#f4f1f1">
<script type="text/javascript">
var d=new Date()
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
document.write(weekday[d.getDay()] + " ")
document.write(d.getDate() + ". ")
document.write(monthname[d.getMonth()] + " ")
document.write(d.getFullYear())
</script></font>
</div>
    <div id="apDiv1">
  <!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
  <!-- The terms of service are available at http://www.google.com/cse/docs/tos.html -->
  <form name="cse" id="searchbox_demo" action="http://www.google.com/cse">
  <input type="hidden" name="cref" value="" />
  <input type="hidden" name="ie" value="utf-8" />
  <input type="hidden" name="hl" value="" />
  <input name="q" type="text" size="40" />
  <input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/tools/onthefly?form=searchbox_demo&lang="></script>
                              </div>
                                </div>
  <div class="content">
    <center><img src="Pictures/DFDF11.png" width="959" height="556" longdesc="Pictures/junior-2-960x.jpg" /></h1></center>
  <!-- end .content --></div>
  <div class="footer">
     <img src="Pictures/RRR1.png" width="202" height="70" />
     <div id="apDiv3">
       <p> </p>
       <p><a href="Job.html">Jobs</a>         </p>
       <p><a href="Art Gallery.html">Art Gallery</a>         </p>
       <p><a href="Contact us.html">Contact Us </a></p>
    </div>
    <div id="apDiv4"><center>
<P>About</P>
<a href="visiting.html">visiting</a> | <a href="Map.html">maps </a>| <P><a href="About.html">about BGCC</a></P>
<P>Academic</P>
<P><a href="Courses.html">schools+courses</a></P>
<P>Admissions  </P>
<P><a href="cost & aid basics.html">cost & aid basics </a>| <a href="Apply now.html">join BGCC</a>
<P>Studen Life</P>
<P><a href="Athletics.html">Athletics</a></P>
<P>Greenforce Education</P>
<P><a href="Career.html">career center</a></P>
</center> </div>
     <p><font size="2" color="black">BGCC | 99 GreenField | Boston, MA 02199 |617-0101-1000| TTY 617-0202-9944|</font></p>
    <div id="apDiv9"><a href="Donate.html" target="_blank"><a href="Donate.html"><img src="Pictures/three-green-logo.jpg" width="218" height="99" longdesc="Pictures/three-green-logo.jpg" /></div>
    <div id="apDiv8"><a href="Apply now.html" target="_blank"><a href="Apply now.html">
<img border="0" src="Pictures/cxgvxdvxgd.jpg" alt="Apply Now" width="218" height="99"></a></div>
  <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

That's what APDivs do.  This is the single most common problem new people have with web page layouts.  DO NOT use positioning.  You don't need it.  Start over.  Learn to use CSS floats, margins and padding to align elements. 
Below is a basic HTML5 Layout.  View source in browser to see the code.
http://www.alt-web.com/sandbox/HTML5-BasicLayout.html
Nancy O.

Similar Messages

  • I received a psd file created in CS6 for MAC, I am unable to find the layers when I open it in photoshop in Windows. What can i do to edit the files?

    I received a psd file created in CS6 for MAC, I am unable to find the layers when I open it in photoshop in Windows. What can i do to edit the files? What can be done so that I can either open and see the layers or how can the sender save it in a way that it doesn't "merge" the layers in some way to just one?

    Could try saving as tiff provided layers and transparency are chosen at the time of saving. But it's hard to give a definitive answer as it depends on the final usage. For example PSD's tend to work better in applications like In Design in comparison with tiff.

  • A PIXMA MP170. Power & Alarm lights flash. Ink doesn't move when cover opened. Error on print (XP).

    I have a PIXMA MP170. The Power & Alarm lights flash. Ink cartridges don't move when cover opened. Service Error 6500 on print from computer (XP).

    Hello danlee58.
    If possible, please document the error pattern that appears on the LED display of the printer.  A letter and one or two numbers should be alternating.
    Did this answer your question? Please click the Accept as Solution button so that others may find the answer as well.

  • When I open the website as oldc.in on firefox then sometimes there images are out of the boxes? Can anyone tell me what can I do for it?

    When I open the website as http://oldc.in then there posting are going out of boxes so please can anyone tell me about fixing this problem? This problem is going only with mozilla firefox.

    Can you attach a screenshot?
    *http://en.wikipedia.org/wiki/Screenshot
    *https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
    Use a compressed image type like PNG or JPG to save the screenshot.
    If you have made changes to Advanced font settings like increasing the minimum/default font size then try the default minimum setting "none" and the default font size 16 in case the current setting is causing problems.
    *Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)
    Make sure that you allow pages to choose their own fonts.
    *Tools > Options > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"
    *http://kb.mozillazine.org/Websites_look_wrong
    *http://kb.mozillazine.org/Website_colors_are_wrong

  • I upgraded laptop to Windows 8.1, but when I open Acrobat Pro XI, my Windows Taskbar disappears.  I must restart PC.

    Hi there,
    This is exactly what it says in the title.
    I got a new laptop with Windows 8.1 (from W7), but when I open Acrobat Pro XI, my Windows Taskbar disappears.  I must restart PC in order to get the taskbar back.
    Has anyone come across this issue?
    Thanks.

    Hi Paul ,
    I would like to know does this happen in case of Acrobat only or while accessing any other applications as well ?
    Are you able to see the taskbar before you access any application?Or it just disappears when you launch Acrobat?
    You can try repairing Acrobat once and see if that fixes the issue.
    If that does not work ,you can try uninstalling Acrobat once and install it again.
    Please refer to the following as well and see if that helps.
    Regards
    Sukrit Dhingra

  • When I open the "Save Page As" window, the drop-down box for the file name shows files that were saved long ago. This is not cleared by any "clear history" function that I can find. How do I clear this?

    # Question
    When I open the "Save Page As" window, the drop-down box for the file name shows files that were saved long ago. This is not cleared by any "clear history" function that I can find. How do I clear this?

    Hello.
    I believe this is a Windows related issue, since it's the windows Save File manager we're talking about here (right?). You should contact Microsoft for help on that one, I believe. You'd expect to be able to delete the entries by simply tapping ''Delete'' on your keyboard when they are focused (that's how it goes for deleting specific form autocomplete entries in Firefox), but I haven't tried that.
    I'm sorry I can't be of more help.

  • When i open firefox, before start show window [JavaScrip Application] title that have this text: TypeError: urlbar is null

    when i open firefox, before start show window [JavaScrip Application] title that have this text:>>TypeError: urlbar is null

    Try to boot the computer in [http://windows.microsoft.com/en-us/windows/start-computer-safe-mode#start-computer-safe-mode=windows-7 Windows Safe Mode with network support] (press F8 on the boot screen) open firefox and see if that happens again.

  • When I open Adobe a screen conversion window opens the file is gibberish

    When I open Adobe a file convesion window opens and I cannot view the file. I uninstalled Adobe and downloaded several different versions with the same result. I am running Windows 7 on my computer.

    Thank you; that is indeed Word.
    Right-click on a PDF file and select Properties; what does it say for 'Type of file:' and 'Opens with:'?
    It should be 'Adobe Acrobat Document' and 'Adobe Reader'.  If not, use the 'Change' button to assign the .pdf file extension to Adobe Reader.

  • Why am I getting a "Opening tweet_button.html" pop-up when I open certain websites?

    Just downloaded new Firefox version & when I open certain websites I get a message saying I'm attempting to open a tweet_box.html (which I am not, I'm just opening pages from my bookmarks), and do I want to open or save it. Multiple boxes open for each site (3-5). Not sure where to turn this off??

    I noticed this after the 4.0.1 update. I also have people in my office reporting the problem on a multitude of computer systems all using 4.0.1. I've confirmed it's not any extensions while loading a fresh Windows 7 SP1 on a test box and loading 4.0.1. 4.0 doesn't appear to be having this issue. I tried changing the html (aspx) file to be opened with Firefox, it ended up opening 60 tabs and crashing the browser. However, I no longer get the popups after restoring my session. Though the tweet_button.html is not loading on the page correctly.

  • Problem in opening excel file in different window

    hi
    i want to open excel file in different window it open in same window properly on the bases of condition but when i try to open in different with window.open( )
    it give error that file has already used or path not exist OR requisted site either unavailable
    how can i rectified

    Hi.
    I am too facing the same problem. I am using Jakarta Poi to display my resultset in an excel sheet directly(and not into a jsp)
    The browser opens a window showing Open Save Cancel. If i click and save the excel sheet and then open, it opens. But clicking on Open directly doesnt open the excel sheet. Rather it gives the same error
    The file name or path name does not exist.
    The file you are trying to open is being used by another progrtam . close the document in other program and try again
    The name of the work book your tring to save is the same as name of another document that is readonly .try saving workbook with different name
    Can somebody please help me fix this problem, since its an urgent requirement. Mail me at [email protected]
    Thanks
    Hitesh

  • Open multiple websites in one window

    I would like to open multiple websites in one window with multiple tabs using VBA in Excel.  My present code opens each website in a separate window.
    Sub Weather()
    ' Look at weather websites
        Dim URL As String
        Dim ie As Object
        URL = "http://cleardarksky.com/c/AnaheimCAkey.html?1"
        Set ie = CreateObject("InternetExplorer.Application")
        ie.Visible = True
        ie.navigate URL
        Set ie = Nothing
        URL = "http://www.goes.noaa.gov/GSSLOOPS/wcir.html"
        Set ie = CreateObject("InternetExplorer.Application")
        ie.Visible = True
        ie.navigate URL
        Set ie = Nothing
        URL = "http://www.weather.com/weather/hourbyhour/l/92886:4:US"
        Set ie = CreateObject("InternetExplorer.Application")
        ie.Visible = True
        ie.navigate URL
        Set ie = Nothing
        URL = "http://www.wunderground.com/cgi-bin/findweather/getForecast?query=92886"
        Set ie = CreateObject("InternetExplorer.Application")
        ie.Visible = True
        ie.navigate URL
        Set ie = Nothing
    End Sub

    Hi,
    It depends on your popup blocker (built-in or Addon toolbar), tabbed browser settings and IE security settings.
    See general tab of Internet Options, Tabs button.
    you can specify a target parameter in the navigate method to reuse the one IE window and open each site in a new tab (depending on your settings above).
    window.navigate method
    Regards.
    Rob^_^

  • Why does text box move when I open pages doc on my friend's mac?

    Hi Everyone,
      So I have this very vexing problem with pages. I have been trying to collaborate with a friend of mine and everytime the pages document moves from one computer to the other the text boxes move terribly out of place. So for example, I will make a document and format it perfectly on my computer. Then I will email it to her (or put it up on dropbox or yousendit or zip it and email it) and without fail when she opens it on her computer the text boxes have moved and the document looks horrible, all my design work is totally wasted. The same thing happens if she starts a document on her end and then gives it to me.
    Does anyone have any experience with this? Any suggestions?
    Oh and by the way we are both running OS 10.8.2 and Pages 4.3
    Thanks in advance!

    Hi Swati,
    That was a shot in the dark. I remember that the now obsolete MacDraw would reset its margins to suit different printers. I had the thought that because Pages page layout seems similar to MacDraw, it was doing the same. I don't have a printer, so my print settings don't tell me much. Maybe Page Setup or the Print dialogue?
    Let's hope that someone else has more ideas.
    Regards,
    Ian.

  • Auto play quicktime movies when you open website

    hi everyone, i have been trying to make autoplay quictime movies in to my websites, i dont want people to click on the play button in order to watch them, the next ones are some emails that i have with a great guy using iweb but i dont really understand how to do it, please help
    "Hello Ray how can i set up a movie on QT to automatically play when open and it work on my hard drive, but when place that video on iweb, does not work , it is possible to make that video to autoplay after upload?"
    "unfortunately you have to edit your movie page outside of iWeb. You could publish your site to your disk and edit your movie page by looking for code with your movie name. Code will look something like below. Just add autoplay="true" and save it. Upload it to your hostserver."
    "wooohhh i dont understand !!!! LOL how can i look for the code Ray?
    let me send you the link of the website to show you what i need i just want those three slides to start automatically thank you for your help!
    http://web.mac.com/cac71/iWeb/Cardin%20Studios%20Specials/Cardin%20Studios%20Spe cials.html"
    "When you open up your browser to your start page look at the source code by Apple menu > View > View source. Go down to the end and last line is your code for movie. As you can see it is currently set autoplay = "false", you need to change it to true. Since you have .Mac account you need to go to your idisk/web/iWeb/ and change your start page code that you previously saw. Follow as I mentioned in earlier message and use idisk upload button to replace the file. use text editor change the code."
    "Ray, im sending you a shot of my idisk / iweb / cardin specials folder (i opened from apple menu / go / idisk / my idisk) wich one of those pages is my start up page and also after i opened that page should i do the menu/view/view source and change the 3 movies to true? and after that where is the upload button to replace the file?
    im sorry to bother you but im not that good doing web sites as you can tell
    thak you"
    i think he got tired and i never got a answer from the above email!!!!
    iMac 2.0 GHz intel 20"   Mac OS X (10.4.4)   2.0 RAM

    ok i got to work for autoplay FINALLY!!!!, but now is not working the loop and before i got it to work, here is th elink for the web and the info from text edit
    thanks guys....
    http://web.mac.com/cac71/iWeb/Cardin%20Studios%20Specials/Cardin%20Studios%20Spe cials.html
    <object id="id12" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="207" height="171" style="height: 171px; left: 246px; position: absolute; top: 207px; width: 207px; z-index: 1; "><param name="src" value="Cardin%20Studios%20Specials_files/wedding-4.mov" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="scale" value="tofit" /><param name="volume" value="100" /><param name="loop" value="true" /><embed pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" class="mov" width="207" height="171" src="Cardin%20Studios%20Specials_files/wedding-4.mov" controller="true" autoplay="true" scale="tofit" volume="100" loop="true"></embed></object><object id="id13" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="213" height="176" style="height: 176px; left: 86px; position: absolute; top: 459px; width: 213px; z-index: 1; "><param name="src" value="Cardin%20Studios%20Specials_files/portraits-2.mov" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="scale" value="tofit" /><param name="volume" value="100" /><param name="loop" value="true" /><embed pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" class="mov" width="213" height="176" src="Cardin%20Studios%20Specials_files/portraits-2.mov" controller="true" autoplay="true" scale="tofit" volume="100" loop="true"></embed></object><object id="id14" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="213" height="176" style="height: 176px; left: 390px; position: absolute; top: 459px; width: 213px; z-index: 1; "><param name="src" value="Cardin%20Studios%20Specials_files/mitz-2.mov" /><param name="controller" value="true" /><param name="autoplay" value="true" /><param name="scale" value="tofit" /><param name="volume" value="100" /><param name="loop" value="true" /><embed pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" class="mov" width="213" height="176" src="Cardin%20Studios%20Specials_files/mitz-2.mov" controller="true" autoplay="true" scale="tofit" volume="100" loop="true"></embed></object>
    </body>
    </html>

  • Play movie when QuickTime opens

    Hello everyone,
    I know this may seem like a silly question, but I haven't been able to find the answer anywhere.
    I just upgraded to SL and I now have QuickTime 10.
    When I open movie files they won't play like they used to, I have to press play. Then, when I want to jump to somewhere else in the movie while it is playing by dragging the status/timeline bar, I'll have to click play if I want it to keep on playing.
    Where can I change this preference?
    Thanks!

    There's a preference pane you can use for those settings:
    http://megabytecomp.com/apps.aspx
    If you are familiar with terminal, you can use this command to enable it:
    defaults write com.apple.QuickTimePlayerX MGPlayMovieOnOpen 1
    Replace the 1 with a 0 to disable it.

  • When I open a website in a new tab (like a forum) it will start on the last page and at the bottom. So I have to scroll up. Is there a setting for this?

    I open my favorite forums website. When I open a thread in a new tab the window starts at the bottom. I have to scroll up to see the top of the thread.

    Does it do it if you run Firefox in [[Safe Mode]]? If it functions properly in that configuration, then one of your add-ons is the culprit.

Maybe you are looking for