20 Replies Latest reply on Apr 18, 2010 12:24 PM by Nancy OShea

    Layout Problem - Urgent Help :(

    ConanRTTG

      Hey guys, newbie here and sorry to bother but I've a project due for college and this problem is wrecking my head!

       

      Hopefully the below image will outline the problem. I just want the blank white space gone and for the images on the right to line up properly with the ones on the left. I'll also post the code if anyone can spot the problem!

       

      Any help is greatly appreciated!

       

      Cheers!

       

      Untitled.jpg

       

       

      <!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 **********="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css"> 
      <!-- 
      body {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #666666;
      margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
      padding: 0;
      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
      color: #000000;
      background-color: #FFF;
      }
      .thrColAbsHdr #container {
      width: 75em; /* the auto margins (in conjunction with a width) center the page */
      border: 0px none #000000;
      text-align: left; /* this overrides the text-align: center on the body element. */
      background-color: #FFFFFF;
      background-image: none;
      background-repeat: no-repeat;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
      } 
      
      .thrColAbsHdr #header {
      height: 60px;
      padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
      background-color: #FFF;
      text-align: center;
      } 
      .thrColAbsHdr #header h1 {
      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
      padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
      }
      .thrColAbsHdr #mainContent {
      font-family: Arial, Helvetica, sans-serif;
      color: #00C;
      background-color: #FFF;
      margin-top: 0;
      margin-right: 0px;
      margin-bottom: 0;
      margin-left: 0px;
      padding-top: 0;
      padding-right: 0px;
      padding-bottom: 0;
      padding-left: 0px;
      height: auto;
      width: auto;
      text-align: center;
      }
      .thrColAbsHdr #footer {
      padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
      background:#DDDDDD;
      text-align: center;
      } 
      .thrColAbsHdr #footer p {
      margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
      padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
      }
      .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 */
      float: left;
      margin-right: 8px;
      }
      --> 
      </style><!--[if IE 5]>
      <style type="text/css"> 
      /* place css box model fixes for IE 5* in this conditional comment */
      .thrColAbsHdr #sidebar1 { width: 180px; }
      .thrColAbsHdr #sidebar2 { width: 190px; }
      </style>
      <![endif]--></head>
      
      <body class="thrColAbsHdr">
      <div id="container">
      <div id="mainContent">
      <p><img src="Graphics/BG/images/Website_02.gif" width="235" height="329" /><img src="Graphics/BG/images/Website_03.gif" width="235" height="329" /><img src="Graphics/images/images/images/box_03.gif" width="266" height="370" /><img src="Graphics/images/images/images/box_04.gif" width="416" height="370" /><img src="Graphics/BG/images/Website_08.gif" width="236" height="324" /><img src="Graphics/BG/images/Website_09.gif" width="234" height="324" /><img src="Graphics/images/images/images/box_05.gif" width="286" height="283" /><img src="Graphics/images/images/images/box_06.gif" width="396" height="283" /></p>
      </div>
      <div id="footer">
      <p><img src="Graphics/images/Footer_13.gif" width="1152" height="41" /></p>
      </div>
      <!-- end #container --></div>
      </body>
      </html>
      
        • 1. Re: Layout Problem - Urgent Help :(
          JulesN Level 2

          I think you need to place your images into coordinates using <div>s.  You have just placed them side by side and because they are different heights, it's messing up the layout.

          • 2. Re: Layout Problem - Urgent Help :(
            ConanRTTG Level 1

            Oh right. Any idea exactly how I'd do that? Really stuff with this stuff.

            • 3. Re: Layout Problem - Urgent Help :(
              Nancy OShea Adobe Community Professional & MVP

              I applied borders and same height values to your images in the code below.  And while I don't have access to your images, the layout seems to work this way.

               

              Screenshot:

              Conan.gif

               

              <!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"> 
               
              body {
              font: 100% Verdana, Arial, Helvetica, sans-serif;
              background: #666666;
              margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
              padding: 0;
              text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
              color: #000;
              background-color: #FFF;
              }
              .thrColAbsHdr #container {
              width: 75em; /* the auto margins (in conjunction with a width) center the page */
              border: 0px none #000000;
              text-align: left; /* this overrides the text-align: center on the body element. */
              background-color: #FFFFFF;
              background-image: none;
              background-repeat: no-repeat;
              margin-top: 0;
              margin-right: auto;
              margin-bottom: 0;
              margin-left: auto;
              } 
              
              .thrColAbsHdr #header {
              padding: 0 10px 0 20px;
              text-align: center;
              } 
              .thrColAbsHdr #header h1 {
              margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
              padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
              }
              .thrColAbsHdr #mainContent {
              font-family: Arial, Helvetica, sans-serif;
              color: #00C;
              margin: 0;
              padding: 0;
              text-align: center;
              }
              .thrColAbsHdr #footer {
              padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
              background:#DDDDDD;
              text-align: center;
              } 
              .thrColAbsHdr #footer p {
              margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
              padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
              }
              .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 */
              float: left;
              margin-right: 8px;
              }
              
              /**Temporary Image Borders for Design Phase**/
              img {border: 2px solid red}
              
              </style>
              
              <!--[if IE 5]>
              <style type="text/css"> 
              /* place css box model fixes for IE 5* in this conditional comment */
              .thrColAbsHdr #sidebar1 { width: 180px; }
              .thrColAbsHdr #sidebar2 { width: 190px; }
              </style>
              <![endif]--></head>
              
              <body class="thrColAbsHdr">
              <div id="container">
              <div id="header">
              <p>Header</p>
              <p><img src="Graphics/BG/images/Website_02.gif" alt="image 1" width="235" height="329" /><img src="Graphics/BG/images/Website_03.gif" alt="image 2" width="235" height="329" /><img src="Graphics/images/images/images/box_03.gif" alt="image 3" width="266" height="329" /><img src="Graphics/images/images/images/box_04.gif" alt="image 4" width="416" height="329" /><img src="Graphics/BG/images/Website_08.gif" alt="image 5" width="236" height="329" border="4" /></p>
              </div>  <!--end header -->
              
              <div id="mainContent">
              <p>Main Content</p>
              
              <img src="Graphics/BG/images/Website_09.gif" alt="image 6" width="234" height="324" /><img src="Graphics/images/images/images/box_05.gif" alt="image 7" width="286" height="324" /><img src="Graphics/images/images/images/box_06.gif" alt="image 8" width="396" height="324" /></p>
              </div>  
              <!--end mainContent -->
              
              <div id="footer">
              <p>Footer</p>
              <p><img src="Graphics/images/Footer_13.gif" alt="image 9" width="1152" height="41" /></p>
              </div>
              <!-- end #container --></div>
              </body>
              </html>
              
              
              

               

              Nancy O.

              Alt-Web Design & Publishing

              Web | Graphics | Print | Media  Specialists

              http://alt-web.com/

              http://twitter.com/altweb

              http://alt-web.blogspot.com

              • 4. Re: Layout Problem - Urgent Help :(
                ConanRTTG Level 1

                Thanks for taking the time to do that, it's very much appreciated but I tried it with my images and it still isn't right. All I want is for the images on the right to "move down" into the white horizontal line that is under them. Here is the home page, where everything is lined up

                 

                Untitled.jpg

                Here there is no white between the images on the right but when I tried to do it again with other images, it just won't lineup correctly. I also removed all the padding (I think).

                 

                Regards

                • 6. Re: Layout Problem - Urgent Help :(
                  martcol Level 4

                  I don't suppose your page is live so that we can have a peek?

                   

                  Martin

                  • 7. Re: Layout Problem - Urgent Help :(
                    ConanRTTG Level 1

                    Unfortunately it's not, as we are being given space from our college but won't be able to upload them until they are complete. I can post the DW file if that'd help... I also have a photoshop document of the proposed finished article

                    • 8. Re: Layout Problem - Urgent Help :(
                      martcol Level 4

                      I have to ask this,

                       

                      Are you sure that you have all your image dimensions (width/height) declared acurately in the HTML?

                       

                      Martin

                      • 9. Re: Layout Problem - Urgent Help :(
                        martcol Level 4

                        martcol.co.uk/deleter02.html

                         

                        Take a look at that page.

                         

                        I have taken a slightly different approach to you but making the images into two columns rather than rows.  It's a very quick attempt and the code isn't your example, only the idea.


                        I think that Jules might have been on the right track with the fact that your images are different heights.

                         

                        Martin

                        • 10. Re: Layout Problem - Urgent Help :(
                          ConanRTTG Level 1

                          Thanks for taking the time to do that! I just checked the images again and they are the same size. There just seems to be an extra "return" or something inserted but I can't remove it. The images were spliced from this, so they should be all the same size

                          Untitled.jpg

                          • 11. Re: Layout Problem - Urgent Help :(
                            Nancy OShea Adobe Community Professional & MVP

                            Here is a quick and dirty 3-column layout based on your screenshot from before.   View source or page source in browser to see the CSS and HTML code.  NOTE: A repeating, 2-toned background image is used to shore-up unsightly gaps in IE8.

                            http://alt-web.com/TEST/SoundStudio/

                             

                            Nancy O.
                            Alt-Web Design & Publishing
                            Web | Graphics | Print | Media  Specialists
                            http://alt-web.com/
                            http://twitter.com/altweb
                            http://alt-web.blogspot.com

                            • 12. Re: Layout Problem - Urgent Help :(
                              ConanRTTG Level 1

                              Again thanks for taking the time to try and help me! But I think you must be mis-understanding the problem. I have the home page done in Dreamweaver and it is perfect. But when I tried to do the same for the "studio" page, the images wouldn't line-up. There seems to be an extra "enter/return", as when I go to the images on the right that aren't lined up and press the left arrow on my nav pad, it seems as if there was a "space" entered in somewhere, even though I have just inserted the images one after another into the "main content".

                               

                              Here is a link to the layout I have done. You can open it in DW. I know there are no images present but you might be able to get a better understanding of what exactly I mean from here.

                              http://www.mediafire.com/?mjm15nkniwm

                               

                              Thanks again for all your help so far

                              • 13. Re: Layout Problem - Urgent Help :(
                                Nancy OShea Adobe Community Professional & MVP

                                I'm sorry we can't help you.  Your images are all different heights.  Until you resolve that issue, you're going to have gaps.

                                 

                                Maybe if you insert your images into a table, it will help you better understand the problem

                                 

                                 

                                Nancy O.
                                Alt-Web Design & Publishing
                                Web | Graphics | Print | Media  Specialists
                                http://alt-web.com/
                                http://twitter.com/altweb
                                http://alt-web.blogspot.com

                                • 14. Re: Layout Problem - Urgent Help :(
                                  martcol Level 4

                                  Nancy O. wrote:

                                   

                                  ...Your images are all different heights.  Until you resolve that issue, you're going to have gaps.


                                   

                                  I'd be confident in what Nancy O is saying there.  The way that both of us suggested dealing with your issue is to try reconfiguring the page so that the images slices with different heights don't interfere with the others.

                                   

                                  Still, although I can't immediately do anything with it, I would be interested to see the code for the page that you say is working?

                                   

                                  With your hosting, why not look around to see if you can get yourself some free space?  Does your own ISP give you any?  It is so much easier to identify what's happening in a live page.

                                   

                                  Regards

                                   

                                  Martin

                                  • 15. Re: Layout Problem - Urgent Help :(
                                    ConanRTTG Level 1

                                    Thanks for all the replies guys, I realized that you were right about the images being different sizes. That was my problem all long. I decided though that the design wan't right so I started from scratch. I have all but one of the pages created but I want all my pages to open using the same header/logo/nav bar and footer.

                                     

                                    Here is my home page

                                    home.jpg

                                    As you can see, there is a header w/logo and nav bar. Below is my gallery page and videos page. I would like this to open under the nav bar if possible. I know this can be done with frames but don't know much about them.

                                    gallery.jpg

                                    videos.jpg

                                     

                                    Code is available on request. I didn't want to clutter up this post incase nobody responded!

                                     

                                    Thanks again!

                                    • 17. Re: Layout Problem - Urgent Help :(
                                      martcol Level 4

                                      I'm not really sure what your asking here except that you seem to looking to structure your page in a typical way i.e. with a header that is the same on all pages and content below it that changes?

                                       

                                      If that's the case, and you are builiding a static site you just build every page the same and change the content for each different page?

                                       

                                      Is that what you mean?

                                       

                                      Martin

                                      • 18. Re: Layout Problem - Urgent Help :(
                                        ConanRTTG Level 1

                                        Yes, that's exactly what I mean. The thing is though, that I have all the pages done and the home page is the only one with a header and nav bar (as seen above). I was wondering if it was possible that I could load my other page in a "window" below the header and nav (if that makes sense) using frames.

                                         

                                        Regards

                                        • 19. Re: Layout Problem - Urgent Help :(
                                          martcol Level 4

                                          You might like to take a look at using server side includes.

                                           

                                          I do this with PHP.  You would need PHP on your server, all your files will need the extension .php, you save the comon parts of the pages in their own files e.g. header.php and then use php  to include that file in your page.

                                           

                                                         <?php

                                                                         include("inc/header.php");

                                           

                                                         ?>

                                           

                                          I think that's a better way than using frames

                                           

                                          Martin

                                          • 20. Re: Layout Problem - Urgent Help :(
                                            Nancy OShea Adobe Community Professional & MVP
                                            I was wondering if it was possible that I could load my other page in a "window" below the header and nav (if that makes sense) using frames.

                                             

                                            You could do it with Iframes (inlines frames) but I sure wouldn't want to build an entire web site around them.  Paste the following iframe code below your header and menu code.

                                             

                                            <iframe id="FRAME1" name="FRAME1" src ="starter-page.html"       width="100%" height="500" scrolling="auto" frameborder="0" margin="0" allowtransparency="true">
                                            </iframe>

                                             

                                            Links to pages targeting FRAME1 will look like this:

                                             

                                            <a href="page2.html" target="FRAME1">page 2 link</a>

                                            <a href="page3.html" target="FRAME1">page 3 link</a>

                                             

                                            More on iframes:

                                            http://www.w3schools.com/tags/tag_iframe.asp

                                             

                                            Nancy O.
                                            Alt-Web Design & Publishing
                                            Web | Graphics | Print | Media  Specialists
                                            http://alt-web.com/
                                            http://twitter.com/altweb
                                            http://alt-web.blogspot.com