Solved: page layout problem

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

andynic

Thread Starter
Joined
May 25, 2007
Messages
425
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
 

Attachments

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,348
Do you have this online?

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

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,348
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.
 

andynic

Thread Starter
Joined
May 25, 2007
Messages
425

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,348
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
 

colinsp

Colin
Joined
Sep 5, 2007
Messages
2,348
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.
 

andynic

Thread Starter
Joined
May 25, 2007
Messages
425
Hi Colin,
That's exactly what I was aiming for. Thanks very much for your help!
Andy
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

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 807,865 other people just like you!

Latest posts

Staff online

Top