Align?

Discussion in 'Web Design and Development' started by ArtOfWarfare, Jun 25, 2008.

  1. ArtOfWarfare macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #1
    Hey.... I want part of a line to be left aligned and the other part right aligned... how do I do something like this?

    I'm making a table... here's one of the cells...

    <td>AoW <align=right>(0/0)</align><br>3007 7753 9037</td>

    this doesn't do anything though.

    I also tried

    <td>AoW <p align=right>(0/0)</p><br>3007 7753 9037</td>

    but this put (0/0) on a different line.

    I want the name on the first line left aligned, the record on the same line but right aligned, and then the number on the line below them.

    I looked through a list of HTML tags but none of them seem to be what I'm looking for...

    Edit: Hmmm... well... I'd rather a less complicated looking solution... but this is what I did...

    <td><table width="100"><tr><td>AoW</td><td align="right"></td><td align="right">(0/0)</td></tr></table>3007 7753 9037</td>

    It got the results I wanted... but it really seems like there's probably a tag that could easily align it to the right side that I just over looked...

    2X Edit: Ok, I got a much cleaner looking solution. Still more complicated than it probably needs to be but...

    <td>AoW<table align=right><tr><td>(0/0)</td></tr></table><br>3007 7753 9037</td>

    the record gets a one celled table all to itself...

    3X Edit: Yes! I think I finally have success!

    I can't think of a better way I could do this...

    <td>AoW<object align=right>(0/0)</object><br>3007 7753 9037</td>

    looks good and compared to the other things I tried it's pretty compact and looks easy to edit later if it should be necessary.

    ...

    And in an hour not a single person offered help. With 2 dozen people browsing this specific section, not a single person offered help... in an hour... thanks a lot.

    Well, if anyone else ever wants to do something like this with aligning text to both the left and right, then you want to use an object tag. Like in my example,

    Code:
    <td>AoW<object align=right>(0/0)</object><br>3007 7753 9037</td>
    4X Edit: Dammit. I just took a look at this in Firefox to make sure it looks good in all browsers... object aligns itself to the bottom by default it looks like. Hopefully all I have to do is align the object to the top right...

    But something else I noticed...

    Firefox screws empty cells all up. It merges multiple empty cells together. The whole idea of using a table is so people can easily look across any row and see everything about the person... if I don't have any info on a person until the 3rd column then it's kind of difficult seeing what data goes with each person.

    Anyone know how to force Firefox to draw in cell borders on a table?
     
  2. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #2
    Give the table cells classes of align-left and align-right, then use a separate css file to align those classes to the left and right. HTML tags are limited and you should try to learn to not use them for presentation.
     
  3. thejadedmonkey macrumors 604

    thejadedmonkey

    Joined:
    May 28, 2005
    Location:
    Pa
    #3
    Or you can do something like this..

    HTML:
    <div style="width:200px;height:35px">
         <div style="float:left;width:100px">AoW</div>
    
         <div style="float:right;width:100px;">(0/0)</div>
    
         <div style="float:right;width:200px;">3007 7753 9037</div>
    </div>
    You might need to play around with the numerical values, but in general it's not a good idea to use tables unless you're displaying tabular data. I dunno, you might be...
     
  4. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #4
    So... I'm not a single person? You wrote at a time when most people are either asleep or getting settled into work (in the states). Not exactly prime time to get quick responses. But you did, and you've been snarky about it. No one is required to reply to all topics, and esp. not within 1 hour.
     
  5. ArtOfWarfare thread starter macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #5
    I guess I forgot to mention where I'm doing this.

    I'm trying to make it inside of some forums... I'm only a mod so I don't have access to everything... but I can use html inside of posts. As far as I know trying to use CSS won't work.

    And I'm trying to keep things compact so I can easily edit them all in the future so I'm not sure how well that float thing is (although I'll try it out.)

    Oh, and sorry. I didn't realize that editing posts wouldn't refresh. I assumed that since I had just edited my post it would have just refreshed and show more recent posts.

    ... ok... I tried the float thing... it appears to have the same results as object...
    [​IMG]

    Firefox is great... how? The way it screws up rendering? The way the scrolling is jerky? Or maybe it's the retarded buttons. How about the gaps between the tabs (which look about as great as gaps in your teeth.) Oh! I know what it must be! It's the way it makes tables look like they're from Windows 98! Geez, even M$ was smart enough to change that!

    Ok, I'm done ranting about how crappy Firefox is.

    ...

    It is the most used browser so I do need to know how to make this come out looking right in Firefox.
     
  6. ArtOfWarfare thread starter macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #6
    Success!

    I have tamed the retarded fox!

    Code:
    <td><object align=right>(0/0)</object><object>AoW<br>3007 7753 9037</object></td>
    ... I wonder if I really need AoW and the number to be an object... I think I'll try it without the object tag to see if it still will work...

    Edit: Ok!

    I deleted the object tag around AoW and the number...

    it really makes no sense at all that

    Code:
    <td><object align=right>(0/0)</object>AoW<br>3007 7753 9037</td>
    works while

    Code:
    <td>AoW<object align=right>(0/0)</object><br>3007 7753 9037</td>
    doesn't and gives me

    [​IMG]

    instead...
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    Firefox is likely rendering things correctly. It's not its fault that your bad code doesn't look the way you want it, it just means you're an inexperienced coder (we all start off as inexperienced so I'm not trying to be rude). Once you learn more about the tags you'll understand why some things work and some don't work.
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    See my comments below about adding in a blank space or pixelshim graphic. This is not a FF exclusive issue.

    You've been advised tables should be used for tabular data and also to use CSS to adjust the presentation, including examples given. Instead, you used an object tag which is intended to be used for embedded multimedia where alignment around such objects can be manipulated. In addition, the text between the <object> and </object> is the alternate text, for browsers that do not support this tag. The <param> tags define run-time settings for the object. This is W3C behavior, and FF does a great job supporting this object as it is intended to be used.

    If you are doing tabular data, a table is fine to use, and simply apply vertical and horizontal alignment via tradition parameters to a TD, such as valign and align. Even better, as angelwatt suggested, is to add styles which not only is the better approach (separating presentation from content) but helps ensure cross browser rendering.

    Please note in traditional HTML coding, to ensure all browsers render empty cells the same, developers either added a space character or a pixelshim in such TD's. It was a trick, before the advent of modern CSS which is the vastly superior method, for cross-platform rendering via empty TD's.

    So now you have old school advice (blank space/pixelshim) for your old school method - I suggest you remove the object tags unless you're doing multimedia, and start practicing working with CSS transitionally, i.e. adding "style=" argumements in TD's to get your feet wet.

    You don't have to love FF, nobody is asking you to use it regularly, but it's a popular browser these days so be sure to consider it/test with it when developing. The advice given to you was not to promote FF, but to help you understand its behavior and to educate you on aspects of HTML to help you grow as a developer.

    -jim
     

Share This Page