3 Replies Latest reply on Apr 6, 2010 4:16 AM by Chorale0001

    Funny align problem....

    Chorale0001 Level 1

      Link to online page : http://www.episodesoft.com/demo/index_fr.html

       

      Hello.

       

      I have a funny probleme dealing with alignment when you must have a webpage that can resize itself depending of the screen resolution. i know i am not a pro, but this is kindra funny...

       

      The basic setting is 1024x768, up to 1920x1080. my probleme is that i want the content (text) to always fit with the logo "logiciel episode" and currently it is working only with the 1024x768. The arm of the lady is cut on purpose in this format.

       

      I've try to put a margin-left in the CSS here, but when you do that, it fix the log/content fitting, but the text itself go over the lady ( yes the lady and the content are separate file for futur edition purpose). Now because the arm of the lady appear only when you are in a higher resolution that 1024x768, the table itself is larger than what is require by the 1024x768 size, thus messing thing.

       

      I cannot modifie the header either because the header as you see is not a single color that you can put in backgroup in the CSS. i had to make a file of 2000 pixelx95 for that.

       

      Does anyone know a way to fix or force the content and the lady something about 30-40 px from the left border of the cell in the table ?... when i try to type that directly in the code, nothing happen at all.

       

      Also please take note that the actual content will be in html, and not a Jpg ( however the background of the table will be a png ). this is still a demo.

       

      i am a little puzzled here.

       

      Since you cannot open the file, i copy here the whole code ( there is some part that are desactivated, dont mind it )

       

      Any help will be welcome.

       

      Thanks

       

       

      <!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>Logiciel Épisode</title>
      <style type="text/css">
      <!--
      #bottom {
      background-color: #FFFFFF;
      background-repeat:no-repeat;
      background-position: bottom;
      background-image: url(images/barre_bottom.png);
      height: 5px;
      }

      #headinner  {
      background-position: center top;
      margin-top: 0px;
      margin-bottom: 0px;
      background-color: #F5F6F7;
      background-repeat: no-repeat;
      height: 95px;
      background-image: url(images/HeaderFR.png);
         }
      body {
      background-color: #ffffff;
      margin-top: auto;
      margin-right: auto;
      margin-bottom: auto;
      margin-left: auto;
      background-image: url(images/fond.png);
      text-align: center;
      background-position: center;
      }
      #Copyright {
      text-align: center;
      margin-bottom: 1px;
      margin-top: 1px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10pt;
      }
      #layer2 #Layer2 tr td p {
      text-align: center;
      font-size: 36px;
      <!-- margin-left: 30px;
      -->}

      -->
      </style>
      <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
      </head>

      <body>
      <div id="headinner">
       
      </div>
      <!--<div id="layer1" style="position:absolute; left:50%; margin-left:-475px; top:70px; width:950px; height:580px; z-index:2">
      <table width="950" border="0" align="center" >
        <tr>
          <td align="center" valign="middle">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="950" height="580">
            <param name="movie" value="Video/Menu.swf" />
            <param name="wmode" value="transparent">
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <param name="embed" value="wmode=&quot;transparent&quot;" />
            <param name="selectable" value="false" />
            <param name="border" value="0" />
            <param name="embed" value="border=&quot;0&quot;" />
           <object type="application/x-shockwave-flash" data="Video/Menu.swf" width="950" height="580">
              <param name="quality" value="high" />
              <param name="wmode" value="transparent" />
              <param name="swfversion" value="6.0.65.0" />
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <param name="embed" value="wmode=&quot;transparent&quot;" />
              <param name="selectable" value="false" />
              <param name="border" value="0" />
              <param name="embed" value="border=&quot;0&quot;" />
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
              </div>
            </object>
            </object>
          </td>
        </tr>
      </table>
      </div> -->
      <div id="layer2">
      <table border="0" align="center" id="Layer2" name="Layer2">
        <tr>
          <td background="images/accueil_fond.png" width="1035" height="485" aling="right" ><img src="images/accueil2_3.png" width="950" height="485" align="left" valign="middle"/></a></td>
        </tr>
      </table>
      </div>
      <div id="bottom">
      </div>
      <p id="Copyright">© 2010 - Logiciel Episode Inc.</p>
      <table width="10" border="0" align="center">
        <tr>
          <td align="center" valign="middle"><a href="index_us.html" target="_self">English</a></td>
          <td align="center" valign="middle"><a href="index_fr.html" target="_self">Francais</a></td>
      <!--
          <td align="center" valign="middle"><p><a href="index_us.html" target="_self"><img src="images/Drapeau_US.png" width="25" height="15" border="0" align="absmiddle" /></a></p></td>
          <td align="center" valign="middle"><a href="index_fr.html" target="_self"><img src="images/Drapeau_fr.png" width="25" height="15" border="0" align="absmiddle" /></a></td>
      -->  </tr>
       
      </table>
      <script type="text/javascript">
      <!--
      swfobject.registerObject("FlashID");
      //-->
      </script>
      </body>
      </html>

        • 1. Re: Funny align problem....
          Chorale0001 Level 1

          Bump.

           

          Any idea ?

          • 2. Re: Funny align problem....
            370H55V Level 4

            Building a "liquid" page layout for sizes rranging from 1024 to 1920 is going to give you problems if you expect your container's text content to remain fixed as the page (and the container) expands to fit the screen, in order to match a background picture.

            It's a little like building a house with movable walls but expecting the flooring and furniture and plumbing and wiring and windows to change sizes and location exaclty right every time you decide to slide a wall in or out.

            It can theoretically be done, but it's waaaaaaaaaayyyyyyyyyy more work than anyone would reasonably want to do.

             

            Better off to build a fixed container with a background image that fits.

             

            If you really want a fluid container, stick to adding text directly to a header image and leave that in a fixed position at the top of the page so no matter how big a visitor's screen is it will always look right, even if the page expands to 2048 X 1536 or larger.

            1 person found this helpful
            • 3. Re: Funny align problem....
              Chorale0001 Level 1

              Hey, Thanks for the reply.

               

              however it has been decided not to fix that issue when you are in wide screen, Having the website enlarge a little will only help to fill a little the screen.

               

              Thx anyway !