1 Replies - 3400 Views - Last Post: 30 October 2011 - 07:45 PM

#1 bedrockhorror  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 56
  • Joined: 22-October 09

Html layout is messed up

Posted 30 October 2011 - 06:17 PM

I'm working on this assignment, and I can't get the layout to display correctly. All the code looks correct to me, but it won't display correctly. View the screenshot to see what I'm talking about.

HTML CODE

<html>

<head>
<!-- 
   New Perspectives on HTML and XHTML
   Tutorial 7
   Review Assignment

   Fred Astaire Biography
   Author: Chris Day
   Date:   10-30-2011

   Filename:         astaire.htm
   Supporting files: astairetxt.htm, bottom.png,, bottomleft.png, bottomright.png, 
                     button.jpg, CreditRoll.class, fa1.gif, fa2.gif, fa3.gif, fa4.gif,
                     fa5.gif, fabio.css, faslong.mp3, filmlist.txt, hatrack.mov,
                     hatrack.swf, hatrack.wmv, jplogo.jpg, left.png, 
                     popcorn.jpg, right.png, top.png, topleft.png, topright.png


   CreditRoll applet created by Joerg Meissner
   http://www.joerg-meissner.de/site/java/
                     
-->

   <title>Fred Astaire Bio</title>
   <link href="fabio.css" rel="stylesheet" type="text/css" />
</head>
 
 
<body>
 
   <div id="head">
      <img src="jplogo.jpg" alt="Jumbo Popcorn" />
   </div>
 
   <div id="links">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Movies</a></li>
         <li><a href="#">Actors</a></li>
         <li><a href="#">Directors</a></li>
         <li><a href="#">Genres</a></li>
         <li><a href="#">My Picks</a></li>
         <li><a href="#">Links</a></li>
      </ul>
   </div>
 
 
   <div id="pageContent">
 
         <h1>Fred Astaire (1899 - 1987)</h1>
 
         <div id="filmlinks">
            <ul>
               <li>Fred Astaire</li>
               <ul>
                  <li><a href="#">Biography</a></li>
                  <li><a href="#">Articles</a></li>
                  <li><a href="#">Film List</a></li>
                  <li><a href="#">Video Clips</a></li>
                  <li><a href="#">Audio Clips</a></li>
                  <li><a href="#">Stills</a></li>
                  <li><a href="#">DVD Releases</a></li>
               </ul>
               <li>The Art of the Musical</li>
               <ul>
                  <li><a href="#">Articles</a></li>
                  <li><a href="#">Top 20 Musicals</a></li>
                  <li><a href="#">The Great Dancers</a></li>
                  <li><a href="#">Broadway on Film</a></li>
                  <li><a href="#">Soundtracks</a></li>
               </ul>
               <li>Musical Bios</li>
               <ul>
                  <li><a href="#">Fred Astaire</a></li>
                  <li><a href="#">Leslie Caron</a></li>
                  <li><a href="#">Cyd Charisse</a></li>
                  <li><a href="#">Bing Crosby</a></li>
                  <li><a href="#">Vera Ellen</a></li>
                  <li><a href="#">Judy Garland</a></li>
                  <li><a href="#">Howard Keel</a></li>
                  <li><a href="#">Gene Kelly</a></li>
                  <li><a href="#">Donald O'Connor</a></li>
                  <li><a href="#">Jane Powell</a></li>
                  <li><a href="#">Debbie Reynolds</a></li>
               </ul>
            </ul>
         </div>
 
<div id="middleColumn">
 
         <div class="roundedBox" id="bio">
            <div class="top"><div class="bottom">
            <div class="left"><div class="right">
            <div class="topLeft"><div class="topRight">
            <div class="bottomLeft"><div class="bottomRight">
           
            <div class="boxContent">
               <h2>Biography</h2>
               <p>
                  <img src="fa1.gif" alt="" style="margin-top: -30px"/>
                  <img src="fa2.gif" alt="" />
                  <img src="fa3.gif" alt="" />
                  <img src="fa4.gif" alt="" />
                  <img src="fa5.gif" alt="" />
                  Fred Astaire was born on May 10, 1899 in Omaha, Nebraska.
                  His first stage experiences came in a brother/sister act
                  with his sister Adele. Together they played the vaudeville
                  circuit and advanced to productions on Broadway
                  and in London. The partnership broke up with Adele's marriage
                  in the early 30s.</p>
               <p>Astaire's famous partnership with <a href="#">Ginger Rogers</a>
                  started with a minor role in <a href="#">Flying Down to Rio</a>.
                  Astaire and Rogers would go along to make ten films together, many of which
                  are considered classics of the genre. Astaire insisted that all
                  dance sequences be filmed with a stationary camera in a single
                  shot. This was a marked contrast from the style of the times in which
                  aerial shots, quick takes, and zooms were used to enhance (and
                  sometimes detract!) from the dance. Astaire would famously
                  quip, "Either the camera will dance, or I will."</p>
               <p>At the end of the 30s, the Astaire/Rogers partnership broke up
                  and Astaire went on to make a series of classic films, including
                  <a href="#">Holiday Inn</a> with <a href="#">Bing Crosby</a>,
                  <a href="#">Easter Parade</a> with <a href="#">Judy Garland</a>,
                  and <a href="#">Royal Wedding</a> with <a href="#">Jane Powell</a>.
               </p>
               <p>In later years, Astaire focused more on straight acting roles. He
                  received an Academy Award nomination for his supporting
                  actor role in <a href="#">The Towering Inferno</a>.</p>
               <p>Fred Astaire died on June 22, 1987, leaving behind the legacy of
                  being arguably the greatest dancer of the 20th century.</p>
            </div>
 
            </div></div></div></div>
            </div></div></div></div>
         </div>
 
</div>
 
 
<div id="rightColumn">
 
 
         <div class="roundedBox" id="films">
            <div class="top"><div class="bottom">
            <div class="left"><div class="right">
            <div class="topLeft"><div class="topRight">
            <div class="bottomLeft"><div class="bottomRight">
           
            <div class="boxContent">
               <h2>Career Highlights</h2>
               <p style="text-align: center">
               
               <!--[if IE]><!-->
                <object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
                codebase="http://java.sun.com/update/1.6.0/jinstall-6-windows-i586.cab"
                type="application/x-java-applet"
                width="260" height="100">
                        <param name="code" value="CreditRoll.class" />
                <!--<![endif]-->
               
                <!--[if !IE]><!-->
                        <object classid="java:CreditRoll.class"
                    type="application/x-java-applet"
                    width="260" height="100">
                <!--<![endif]-->
               
                    <param name="fontsize" value="12" />
                    <param name="bgcolor" value="996600" />
                    <param name="textcolor" value="FFFFFF" />
                   
                    <param name="speed" value="150" />
                    <param name="vspace" value="3" />
                    <param name="fadezone" value="10" />
                   
                    <param name="repeat" value="yes" />
                   
                    <param name="text1" value="THE FILMS" />
                     <param name="text2" value="of FRED ASTAIRE" />
                     <param name="text3" value="----- o -----" />
                     <param name="text4" value="" />
                     <param name="text5" value="Flying Down to Rio  ... (1933)" />
                     <param name="text6" value="The Gay Divorcee  ... (1934)" />
                     <param name="text7" value="Roberta  ... (1935)" />
                     <param name="text8" value="Top Hat  ... (1935)" />
                     <param name="text9" value="Swing Time  ... (1936)" />
                     <param name="text10" value="Shall We Dance  ... (1937)" />
                     <param name="text11" value="The Story of Vernon and Irene Castle  ... (1939)" />
                     <param name="text12" value="Holiday Inn  ... (1942)" />
                     <param name="text13" value="Easter Parade  ... (1948)" />
                     <param name="text14" value="The Barkleys of Broadway  ... (1949)" />
                     <param name="text15" value="Three Little Words  ... (1950)" />
                     <param name="text16" value="Royal Wedding  ... (1951)" />
                     <param name="text17" value="Daddy Long Legs  ... (1955)" />
                     <param name="text18" value="Funny Face  ... (1957)" />
                     <param name="text19" value="Silk Stockings  ... (1957)" />
                     <param name="text20" value="On the Beach  ... (1959)" />
                     <param name="text21" value="Finian's Rainbow  ... (1968)" />
                     <param name="text22" value="The Towering Inferno  ... (1974)" />
                     <param name="text23" value="Ghost Story  ... (1981)" />
                     
                     <param name="url" value="http://www.imdb.com/name/nm0000001" />
 
 
                  Top Hat  ... (1935) <br />
                  Swing Time  ... (1936) <br />
                  Holiday Inn  ... (1942) <br />
                  Easter Parade  ... (1948) <br />
                  Royal Wedding  ... (1951) <br />
                  Finian's Rainbow  ... (1968) <br />
                  The Towering Inferno  ... (1974)
                 
                  <br /><br />
                  To view a scrolling marquee,get the latest
                  <a href="http://www.java.com/en/download">
                     Java Plug-in.
                  </a>
                 
                  </object>
 
               </p>
            </div>
 
            </div></div></div></div>
            </div></div></div></div>
         </div>
 
 
 
         <div class="roundedBox" id="notes1">
            <div class="top"><div class="bottom">
            <div class="left"><div class="right">
            <div class="topLeft"><div class="topRight">
            <div class="bottomLeft"><div class="bottomRight">
           
            <div class="boxContent">
               <h2>Listen Up</h2>
 
               <p>Fred Astaire's prowess as a singer is overshadowed by
                  his unequaled artistry in dance; however many of his
                  contemporaries admired Astaire's lyricism and phrasing.
                  Irving Berlin felt him to be the equal of Jolson or
                  Crosby. The clip below comes from the song
                  <i>Ev'ry Night at Seven</i> from <i>Royal Wedding</i>.</p>
 
               <p style="text-align: center">
               <!--[if IE]><!-->
                        <object data="fasong.mp3" type="audio/mpeg"
                    classid="clsid:02BF25D5-8c17-4B23-BC80-D3488ABDDC6B"
                    codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                    width="280" height="16">
               <!--<![endif]-->
               
               <!--[if !IE]><!-->
                <object data="fasong.mp3" type="audio/mpeg"
                width="280" height="16">
               <!--<![endif]-->
               
                        <param name="src" value="fasong.mp3" />
                        <param name="autoplay" value="false" />
                        <param name="autostart" value="flase" />
                        <param name="controller" value="true" />
                        <param name="showcontrols" value="true" />
                       
                        <embed src="fasong.m3" type="audio/mpeg"
                        width="280" height="16"
                        autoplay="false" autostart="false"
                        controller="true" showcontrols="true">
                       
                                Click to <a href="fasong.mp3">download</a> the movie fasong.
                           
                        </embed>
                       
                     </object>
 
 
               </p>
 
            </div>
 
            </div></div></div></div>
            </div></div></div></div>
         </div>
 
 
         <div class="roundedBox" id="notes2">
            <div class="top"><div class="bottom">
            <div class="left"><div class="right">
            <div class="topLeft"><div class="topRight">
            <div class="bottomLeft"><div class="bottomRight">
           
            <div class="boxContent">
               <h2>In Focus</h2>
 
               <p>Fred Astaire's most famous partner was <a href="#">Ginger
                  Rogers</a>, but the truth is that he could make almost
                  anyone look good. View the clip below from <i>Royal
                  Wedding</i> where his partner was ... a hat rack.</p>
 
               <p style="text-align: center">
               
               
               <!--[if IE]><!-->
                        <object data="hatrack.swf" type="application/x-shockwave-flash"
                    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0"
                    width="310" height="260">
                  <!--<![endif]-->
                 
                  <!--[if !IE]><!-->
                        <object data="hatrack.swf" type="application/x-shockwave-flash"
                    width="310" height="260">
                  <!--<![endif]-->
                                <param name="movie" value="hatrack.swf" />
                        <param name="quality" value="high" />
                        <param name="menu" value="false" />
                       
                        <embed src="hatrack.swf" type="application/x-shockwave-flash"
                        width="310" height="260"
                        movie="hatrack.swf" quality="high" menu="false">
                       
                                To view the movie clip, install adobe flash.
                           
                            </embed>
                       
                      </object>
 
               </p>
 
            </div>
 
            </div></div></div></div>
            </div></div></div></div>
         </div>
 
</div>
 
         <div id="bottomlinks">
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Movies</a></li>
               <li><a href="#">Actors</a></li>
               <li><a href="#">Directors</a></li>
               <li><a href="#">Genres</a></li>
               <li><a href="#">My Picks</a></li>
              <li><a href="#">Links</a></li>
           </ul>
        </div>
     
   </div>
 
 
</body>
 
</html>
 





CSS CODE
/*
   New Perspectives on HTML and XHTML 5th Edition
   Tutorial 7
   Review Assignment

   Jumbo Popcorn Style Sheet

   Filename:         fa.css
   Supporting Files: bottom.png, bottomleft.png, bottomright.png, button.jpg, 
                     left.png, popcorn.jpg, top.png, topleft.png, topright.png,
                     right.png

*/

body                   {margin: 0px; padding: 0px; font-size: 15px; 
                        font-family: Arial, Helvetica, sans-serif}

#head                  {position: absolute; top: 0px; left: 0px}

#links                 {position: absolute; top: 155px; left: 130px; width: 750px}

#links ul              {list-style-type: none; padding: 0px; margin: 0px}
#links li              {display: block; float: left; font-size: 14px;
                        background: url(button.jpg) no-repeat center center;
                        width: 100px; height: 33px; text-align: center; margin-right: 2px}
#links a               {display: block; color: white; text-decoration: none; margin-top: 5px}
#links a:hover         {color: black}

#pageContent          {position: absolute; top: 210px; left: 0px; width: 870px;
                       background: url(popcorn.jpg) repeat-y 0px 40px}

#pageContent h1       {background-color: white;
                       font-weight: bold; font-size: 28px; letter-spacing: 6px;
                       margin: 0px; padding: 0px 0px 5px 10px}

#pageContent h2       {font-size: 16px; text-align: center; margin: 0px 0px 10px 0px;
                       color: white; letter-spacing: 5px}
#pageContent p        {font-size: 12px}


#filmlinks            {float: left; width: 180px; margin-right: 5px}
#filmlinks ul         {list-style-type: none; padding: 0px; margin: 0px; margin-left: 10px}
#filmlinks ul li      {font-size: 16px; margin-top: 10px; font-weight: bold}
#filmlinks ul ul li   {font-size: 12px; margin-top: 0px; font-weight: normal}
#filmlinks ul ul      {margin-left: 20px}
#filmlinks a          {color: black; text-decoration: none}
#filmlinks a:hover    {text-decoration: underline}

#middleColumn         {float: left; width: 300px; margin-right: 10px}
#rightColumn          {float: left; width: 340px}


#bio                  {width: 300px; margin-bottom: 10px}
#bio h2               {background-color: rgb(202,148,28); text-align: right}
#bio img              {float: left; clear: left; margin-right: 2px}
#bio p                {margin: 0px 0px 10px}

#films                {width: 340px; margin-bottom: 10px}
#films h2             {background-color: black}
#films p              {margin: 0px 0px 10px}


#notes1               {width: 340px; margin-bottom: 10px}
#notes1 h2            {background-color: black}
#notes1 p             {margin: 0px 0px 10px}

#notes2               {width: 340px; margin-bottom: 10px}
#notes2 h2            {background-color: black}
#notes2 p             {margin: 0px 0px 10px}

.topLeft              {background: url(topleft.png) no-repeat top left}
.topRight             {background: url(topright.png) no-repeat top right}
.bottomLeft           {background: url(bottomleft.png) no-repeat bottom left}
.bottomRight          {background: url(bottomright.png) no-repeat bottom right}
.top                  {background: url(top.png) repeat-x top}
.bottom               {background: url(bottom.png) repeat-x bottom}
.left                 {background: url(left.png) repeat-y left}
.right                {background: url(right.png) repeat-y right}
.roundedBox           {margin: 5px}
.boxContent           {padding: 16px}

#bottomlinks          {clear: left}
#bottomlinks ul       {list-style-type: none; padding: 0px; margin: 0px 0px 0px 20px;
                        border-top: 1px solid black}
#bottomlinks li       {display: block; float: left; font-size: 10px;
                       width: 110px; height: 33px; text-align: center; margin-right: 2px}
#bottomlinks a        {display: block; color: black; text-decoration: none; margin-top: 5px}
#bottomlinks a:hover  {color: black; text-decoration: underline}









The page is supposed to display in block sections.

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Html layout is messed up

#2 bedrockhorror  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 56
  • Joined: 22-October 09

Re: Html layout is messed up

Posted 30 October 2011 - 07:45 PM

I figured out what the problem was. It was the html logic for if your viewing it in firefox or ie. It was outdated, so I had to recode the logic, and it fixed the problem.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1