1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: page layout problem

Discussion in 'Web Design & Development' started by andynic, Feb 6, 2015.

Thread Status:
Not open for further replies.
Advertisement
  1. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    386
    HI,

    I have uploaded a ".zip" file, "pageLayoutQuestion.zip", that contains an html file and 5 small png files. The 5 png's are used in the html file.

    For this test all is located in the same directory and the css style sheet is internal rather than in external files.

    Can anyone suggest a way that allows:
    Re. the upper left image: For the text to begin almost as is, i.e. to the right of the image but starting at the top.
    Re. the upper right image: For the image to begin at the top left corner (like the left image).
    I have tried the in-line styles shown in the respective tables in the uploaded html file.
    I have tried using one-column tables as well.

    Any suggestions would be greatly appreciated; and if you think I should scrap what I'm doing and begin over, please say so but with some sample code.

    Thanks,
    Andynic
     

    Attached Files:

  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,290
    First Name:
    Colin
    Do you have this online?

    If not post the code in code tags not as a zip file in this thread.
     
  3. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    386
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,290
    First Name:
    Colin
    Personally I never use tables for layouts like this they will always give you problems.

    I would add two more classes to your CSS something like this:

    Code:
    .left_half {width:49%; padding:5px;height:100%;float:left;}
    .right_half {width:49%; padding:5px;height:100%;float:right;}
    
    The following is the code for your current top left div

    Code:
    <div class="ulContent">
          <table>
            <tr>
              <td style="width:50%; margin-top:0px">
                <img src="catsEyeNebula.png"  alt="Tobi Vroegh" height="230px" width="180px"/>    
              </td>
              <td style="width:50%; margin-top:0px">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry....
              </td>
            </tr>
          </table>    
        </div>
    
    I would change this to:

    Code:
    <div class="ulContent">
          <div class="left_half">
                <img src="catsEyeNebula.png"  alt="Tobi Vroegh" height="230px" width="180px"/>    
              </div>
              <div class="right_half">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry....
              </div>
           </div>
    
    Just replace the table code in each of the other boxes with the two divs like the above.

    Put this live and then we can tweak it.
     
  5. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    386
  6. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,290
    First Name:
    Colin
    Andy

    Getting a time out on that new url. Once I can see it I will be able to tweak the code for you that was just a starter for 10
     
  7. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    386
  8. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,290
    First Name:
    Colin
    Change the CSS to this

    Code:
    .left_half {width:45%; padding:5px;height:100%;float:left;}
    .right_half {width:40%; padding:5px;height:100%;float:right;}
    
    Also you have ll r_h: before each of the text entries.
     
  9. andynic

    andynic Thread Starter

    Joined:
    May 25, 2007
    Messages:
    386
    Hi Colin,
    That's exactly what I was aiming for. Thanks very much for your help!
    Andy
     
  10. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,290
    First Name:
    Colin
    No problem glad it worked and the code is much simpler too.
     
  11. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1142576

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice