Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Hey,

    I have some text within a table on my site, and the problem I have is that it is sitting in the middle of the table (vertically) and I'd like it to be at the top.

    I've tried vertical-align and text-align but can get it to move..... I've included the HTML and corresponding css, would really appreciate it if someone could let me know where I'm going wrong... thanks!

    <table width"100%" border="0">
    <tr>
    <td width="470px" height="750px" border="0" background="Images/Home-background-image.gif">
    <div id="content">
    <p> Break draws on a network of creatives to deliver innovative and individual communication campaigns. The teams and ideas are designed independently for each client, allowing us to create the most effective methods to reach your audience, raise your profile, identify the best partnerships and support your wider business strategies. </P>
    </div>
    <td>
    <td width="30px" height="750px"> <td>
    <td width="470px" height="750px"> <td>
    </tr>
    </table>

    #content {
    color:#9ea3ab;
    font-size:20px;
    padding:5px 5px 0px 5px;
    text-decoration:none;
    text-align:top;

    }

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    top is not a valid use of text align. it looks like you are using tables for layout. before i myself can offer help, i need you to use divs as tables are for data display. i do not consider sales pitches to be data. if you have to you can recreate your tables in the form of div. the reason for this is tables have default values that will not serve your purpose in this case. this will cause you to come back here time and time again to solve problems that can all be avoided by recognizing the proper use of divs and tables.

    while($get_it !== true){ continue; }

  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    What Dorky said. This is not a good use of tables.

    There's a very simple rule of thumb for table use...if it's data that would be presented in a database table or an Excel spreadsheet, then you should use tables. If it's not, then you shouldn't.

    But if you want to "solve" this issue (and I put this in quotes because Dorky and I have both explained to you why you won't solve anything in the long run) put this in your <td> tag:
    Code:
    <td style="vertical-align:  top;">
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member Harmonic's Avatar
    Join Date
    Jan 2011
    Location
    Toronto
    Posts
    291
    Member #
    26468
    Liked
    23 times
    You could also try this

    <td width="470px" height="750px" align ="left" valign ="top" border="0" background="Images/Home-background-image.gif">

  6. #5
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Thanks both of you for the advice, looks like I've been taught some bad techniques. Any chance you know any decent tutorials for arranging text/pages with divs...
    So you know I am wanting to place a column of text next to a Blog feed that would be updated remotely...

  7. #6
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    Aligning divs involves using floats properly. For example, if you wanted to align three columns, you could give them all the class:

    .divFloat {
    float: left;
    }

    All three divs would be called <div class="divFloat"></div>. With the float property, they will all align horizontally if placed in order. Any content would then go inside of the divs (<p></p>, <h1></h1>, etc.). It's kind of like putting three separate cardboard boxes next to each other and then putting things inside of them.

    <div class="divFloat">
    </div>
    <div class="divFloat">
    </div>
    <div class="divFloat">
    </div>

    The key, after putting the divs in and all the content, is clearing the floats. Clearing the floats is a way to let the browser know that you don't want to float any other things with these divs. All I do is make a global class like this:

    .clear {
    clear: both;
    }

    You would then put this after the three divs:

    <div class="clear">
    </div>

    That will clear all of the floats and any code after the clear class will appear below the columns (such as a footer or other content).
    Check out some of my work: http://www.jr-webdesigns.com

  8. #7
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    I forgot to mention that giving the divs a certain width (one that would allow all three divs to fit into the container div horizontally) is important. There is a lot more css that can go along with this type of stuff. I recommend checking out W3Schools Online Web Tutorials for further information regarding divs and css.
    Check out some of my work: http://www.jr-webdesigns.com

  9. #8
    Senior Member
    Join Date
    Jan 2011
    Posts
    148
    Member #
    26229
    Liked
    1 times
    Thanks very much for this, really helpful.

  10. #9
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    jeffry. when you explain using float for columns, be sure to address the overflow issue, margin collapse, and potential solutions. word man.

    while($get_it !== true){ continue; }

  11. #10
    Member
    Join Date
    Jan 2011
    Location
    Edmonton, Alberta
    Posts
    82
    Member #
    26483
    Liked
    2 times
    Yes, that is a good point. Overflow shouldn't be a problem if the floated divs are given widths that properly fit within the container div. As for the margin collapse, I would google what it means and do a bit of research.
    Check out some of my work: http://www.jr-webdesigns.com


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:50 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com