Simple flush right need

Discussion in 'HTML' started by news.frontiernet.net, Jul 8, 2004.

  1. I am trying to do something that is soooo simple and intuitive with a
    wordprocessor, yet seems to be complex and elusive with HTM and CSS.

    I am trying to right-adjust something to the far right of the top line of a
    two line business information listing for which there will be many such two
    lines entries on the page.

    I enclosed the whole firm in a DIV container and each line is in its own
    DIV.

    An example of one firms HTML coding would be:
    <div class="box">
    <div class="name">
    A & T Tap
    <span class="firm-category">Restaurants/Lounges</span>
    </div>
    <div class="extra">
    &nbsp;1124 Second Ave
    &nbsp; Worthington
    &nbsp;507/376-6556
    <A HREF="/Business/citycent.htm"><img src="images/citycenter.jpg"
    border=0 width="54" height="12"></A>
    </div>
    </div>

    The HTML document is at: http://www.wgtn.net/Business/chamlist.htm

    The CSS is at http://www.wgtn.net/Business/chamlist.css

    So far I have tried;
    1) float: right on the span class which seemed to move to the next line in
    one or the other browser
    2) positioning the firl line relatively then positioning the span absolutely
    top 0 and right 0 that didnt work in one or the other browser either

    Presently I have just added spacing between the Firm Name and the field I
    want flush right.

    How can I get that firm-category to go flush right in all modern browsers
    without causing another line?
     
    news.frontiernet.net, Jul 8, 2004
    #1
    1. Advertising

  2. news.frontiernet.net

    Mitja Guest

    news.frontiernet.net <>
    (news:SvhHc.225$) wrote:
    > I am trying to do something that is soooo simple and
    > intuitive with a wordprocessor, yet seems to be complex
    > and elusive with HTM and CSS.
    >
    > I am trying to right-adjust something to the far right of
    > the top line of a two line business information listing
    > for which there will be many such two lines entries on
    > the page.
    >
    > I enclosed the whole firm in a DIV container and each
    > line is in its own DIV.
    >
    > An example of one firms HTML coding would be:
    > <div class="box">
    > <div class="name">
    > A & T Tap
    > <span class="firm-category">Restaurants/Lounges</span>
    > </div>
    > <div class="extra">
    > &nbsp;1124 Second Ave
    > &nbsp; Worthington
    > &nbsp;507/376-6556
    > <A HREF="/Business/citycent.htm"><img
    > src="images/citycenter.jpg" border=0 width="54"
    > height="12"></A> </div>
    > </div>
    >
    > The HTML document is at:
    > http://www.wgtn.net/Business/chamlist.htm
    >
    > The CSS is at http://www.wgtn.net/Business/chamlist.css
    >
    > So far I have tried;
    > 1) float: right on the span class which seemed to move to
    > the next line in one or the other browser
    > 2) positioning the firl line relatively then positioning
    > the span absolutely top 0 and right 0 that didnt work in
    > one or the other browser either
    >
    > Presently I have just added spacing between the Firm Name
    > and the field I want flush right.
    >
    > How can I get that firm-category to go flush right in all
    > modern browsers without causing another line?


    But it isn't that simple to achieve in Word - or is it?
    The easy way out is to use tables.
    The other way is with floats - just float the first line as well:
    <div class="name">
    <div style="float:left">A & T Tap</div>
    <div style="float:right">Restaurants/Lounges</div>
    </div>
     
    Mitja, Jul 8, 2004
    #2
    1. Advertising

  3. This doesnt work. This idea interfers with the firms second line as shown in
    this example where I used this idea on the first of the firms, but ot on the
    rest of them. That first firm has its second line floating up into the first
    line http://www.wgtn.net/Business/chamlist_1.htm And for some reason, I seem
    to have triggered a width problem that was not there before. I can fix trhe
    width problem.

    But, I still need a way to reliably flush left and flush right stuff on the
    first line without it interfering with the rest of the presentation.

    "Mitja" <> wrote in message
    news:6WhHc.6393$...
    > news.frontiernet.net <>
    > (news:SvhHc.225$) wrote:
    > > I am trying to do something that is soooo simple and
    > > intuitive with a wordprocessor, yet seems to be complex
    > > and elusive with HTM and CSS.
    > >
    > > I am trying to right-adjust something to the far right of
    > > the top line of a two line business information listing
    > > for which there will be many such two lines entries on
    > > the page.
    > >
    > > I enclosed the whole firm in a DIV container and each
    > > line is in its own DIV.
    > >
    > > An example of one firms HTML coding would be:
    > > <div class="box">
    > > <div class="name">
    > > A & T Tap
    > > <span class="firm-category">Restaurants/Lounges</span>
    > > </div>
    > > <div class="extra">
    > > &nbsp;1124 Second Ave
    > > &nbsp; Worthington
    > > &nbsp;507/376-6556
    > > <A HREF="/Business/citycent.htm"><img
    > > src="images/citycenter.jpg" border=0 width="54"
    > > height="12"></A> </div>
    > > </div>
    > >
    > > The HTML document is at:
    > > http://www.wgtn.net/Business/chamlist.htm
    > >
    > > The CSS is at http://www.wgtn.net/Business/chamlist.css
    > >
    > > So far I have tried;
    > > 1) float: right on the span class which seemed to move to
    > > the next line in one or the other browser
    > > 2) positioning the firl line relatively then positioning
    > > the span absolutely top 0 and right 0 that didnt work in
    > > one or the other browser either
    > >
    > > Presently I have just added spacing between the Firm Name
    > > and the field I want flush right.
    > >
    > > How can I get that firm-category to go flush right in all
    > > modern browsers without causing another line?

    >
    > But it isn't that simple to achieve in Word - or is it?
    > The easy way out is to use tables.
    > The other way is with floats - just float the first line as well:
    > <div class="name">
    > <div style="float:left">A & T Tap</div>
    > <div style="float:right">Restaurants/Lounges</div>
    > </div>
    >
    >
     
    news.frontiernet.net, Jul 8, 2004
    #3
  4. news.frontiernet.net

    Webcastmaker Guest

    In article <SvhHc.225$>,
    says...
    > I am trying to do something that is soooo simple and intuitive with a
    > wordprocessor, yet seems to be complex and elusive with HTM and CSS.
    >
    > I am trying to right-adjust something to the far right of the top line of a
    > two line business information listing for which there will be many such two
    > lines entries on the page.

    The easy way is to use divs floated left and right.

    Just a note, A whole bunch of people can not use the site because you
    are so dependent on Javascript. This site seems to be one that you
    would want everyone that visits to see. YMMV
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
     
    Webcastmaker, Jul 8, 2004
    #4
  5. news.frontiernet.net

    Jeff Thies Guest

    news.frontiernet.net wrote:
    > I am trying to do something that is soooo simple and intuitive with a
    > wordprocessor, yet seems to be complex and elusive with HTM and CSS.
    >
    > I am trying to right-adjust something to the far right of the top line of a
    > two line business information listing for which there will be many such two
    > lines entries on the page.


    Have you tried: text-align: right ? You may have to change that span to
    a div, depending on exactly what you are right aligning.

    Cheers,
    Jeff

    >
    > I enclosed the whole firm in a DIV container and each line is in its own
    > DIV.
    >
    > An example of one firms HTML coding would be:
    > <div class="box">
    > <div class="name">
    > A & T Tap
    > <span class="firm-category">Restaurants/Lounges</span>
    > </div>
    > <div class="extra">
    > &nbsp;1124 Second Ave
    > &nbsp; Worthington
    > &nbsp;507/376-6556
    > <A HREF="/Business/citycent.htm"><img src="images/citycenter.jpg"
    > border=0 width="54" height="12"></A>
    > </div>
    > </div>
    >
    > The HTML document is at: http://www.wgtn.net/Business/chamlist.htm
    >
    > The CSS is at http://www.wgtn.net/Business/chamlist.css
    >
    > So far I have tried;
    > 1) float: right on the span class which seemed to move to the next line in
    > one or the other browser
    > 2) positioning the firl line relatively then positioning the span absolutely
    > top 0 and right 0 that didnt work in one or the other browser either
    >
    > Presently I have just added spacing between the Firm Name and the field I
    > want flush right.
    >
    > How can I get that firm-category to go flush right in all modern browsers
    > without causing another line?
    >
    >
     
    Jeff Thies, Jul 8, 2004
    #5
  6. news.frontiernet.net

    Steve Pugh Guest

    "news.frontiernet.net" <> wrote:
    >"Mitja" <> wrote in message
    >news:6WhHc.6393$...
    >> news.frontiernet.net <>
    >> (news:SvhHc.225$) wrote:
    >> >
    >> > I am trying to right-adjust something to the far right of
    >> > the top line of a two line business information listing
    >> > for which there will be many such two lines entries on
    >> > the page.
    >> >
    >> > The HTML document is at:
    >> > http://www.wgtn.net/Business/chamlist.htm

    >>
    >> The other way is with floats - just float the first line as well:
    >> <div class="name">
    >> <div style="float:left">A & T Tap</div>
    >> <div style="float:right">Restaurants/Lounges</div>
    >> </div>
    >>

    >This doesnt work. This idea interfers with the firms second line as shown in
    >this example where I used this idea on the first of the firms, but ot on the
    >rest of them. That first firm has its second line floating up into the first
    >line http://www.wgtn.net/Business/chamlist_1.htm


    The second line is the <div class="extra">, right?
    Add clear: both; to the styles for that class.

    And please don't top post. Keep on doing it and people will start to
    ignore your posts, reducing your chances of getting useful answers.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jul 8, 2004
    #6
  7. I use a DHTML menuing system for my web site navigation that utilizes
    JavaScript in a way that is gauranteed to be compatible with all browsers. A
    non JS navigations system woul add more load time to my web site.

    So, there is a trade off. Short Load times for ALL users vs non_js
    browsers not being able to use the site. I choose to give benefits to the
    many over the few that doent have JS enabled.

    The biggest problem that I am aware of is the lack of consistent CSS
    rendering for my visitors. That effects me more than the lack of JS for a
    very few.

    At least, IF js is enabled, it IS consistently applied over the many
    browsers. I cannot say that about CSS.

    "Webcastmaker" <> wrote in message
    news:...
    > In article <SvhHc.225$>,
    > says...
    > > I am trying to do something that is soooo simple and intuitive with a
    > > wordprocessor, yet seems to be complex and elusive with HTM and CSS.
    > >
    > > I am trying to right-adjust something to the far right of the top line

    of a
    > > two line business information listing for which there will be many such

    two
    > > lines entries on the page.

    > The easy way is to use divs floated left and right.
    >
    > Just a note, A whole bunch of people can not use the site because you
    > are so dependent on Javascript. This site seems to be one that you
    > would want everyone that visits to see. YMMV
    > --
    > WebcastMaker
    > The easiest and most affordable way to create
    > Web casts, or put presentations on the Web.
    > www.webentations.com
     
    news.frontiernet.net, Jul 8, 2004
    #7
  8. news.frontiernet.net

    Webcastmaker Guest

    In article <MCiHc.239$>,
    says...
    > This doesnt work.


    add a <br> before the "extra" div
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
     
    Webcastmaker, Jul 8, 2004
    #8
  9. news.frontiernet.net

    Webcastmaker Guest

    In article <jViHc.244$>,
    says...
    > I use a DHTML....


    <snip>

    Read the faq about top posting. It will save you a lot of
    harassment. Some here take top posting very serious. Always put
    what you want to quote above what you are typing. also, cut out the
    signature from the quote.

    Now back to your message....


    > JavaScript in a way that is gauranteed to be compatible with all browsers. A
    > non JS navigations system woul add more load time to my web site.


    Well to each his own, but I think that is a mistake. ESPECIALLY on a
    community information page.

    > So, there is a trade off. Short Load times for ALL users vs non_js
    > browsers not being able to use the site. I choose to give benefits to the
    > many over the few that doent have JS enabled.


    Few = 10-15% Lower percentage of home users, higher percentage of
    business viewers. But again, the choice is yours.

    > The biggest problem that I am aware of is the lack of consistent CSS
    > rendering for my visitors. That effects me more than the lack of JS for a
    > very few.
    > At least, IF js is enabled, it IS consistently applied over the many
    > browsers. I cannot say that about CSS.


    Actually different browsers handle some javascript differently. I am
    currently working on a project that deals specifically with this
    issue. (I didn't look at your code to see if it would be effected by
    these differences)

    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
     
    Webcastmaker, Jul 8, 2004
    #9
  10. news.frontiernet.net

    rf Guest

    "news.frontiernet.net" wrote.

    > I use a DHTML menuing system for my web site navigation that utilizes
    > JavaScript in a way that is gauranteed to be compatible with all browsers.


    This is the funniest thing I have heard in ages :)

    The fact that you use the term DHTML (a Microsoft invented word) virtually
    gauantees that the the page will *not* be compatible with all browsers.

    Here are two screenshots. (68K)

    http://users.bigpond.net.au/rf/menus/wgtn.jpg

    As you can see IE stuffs up that floating alphabet. Mozilla does too but
    differently and also stuffs up the top menu bar.

    In addition you have problems with the content which in both cases has
    escapes the left hand edge of the canvas. Note the scroll bar position: that
    content is not accessible.

    >A
    > non JS navigations system woul add more load time to my web site.


    Rubbish. Adding a bit of stuff to make the site degrade gracefully in the
    absense of javascript would add very little to your load time.

    If you are really worried about load time then consider the following:

    Replace that 5K azchoice.gif (and the imagemap that goes along with it) with
    some real text which will be accessible to a blind person.

    You have about a thousand &nbsp;s in there, presumably to space the text
    away from the left border of the table cells. One single CSS rule could
    replace all of those.

    Whatever server side process has generated the page has thrown in thousands
    of cr/lf's. The majority of these are not required.

    That floating top link is not required. The user already has one of those,
    it's called the Home key. There goes another 2K of image and probably 2K of
    javascript to drive it. BTW those floating things (when they break) make the
    page bottomless. One can never scroll to the bottom of the page because the
    bottom of the page is *always* below the bottom of the canvas ;-)

    > So, there is a trade off. Short Load times for ALL users vs non_js
    > browsers not being able to use the site. I choose to give benefits to the
    > many over the few that doent have JS enabled.


    The very first link is to a restaurant. Do you think the owners of that
    restaurant would turn away every seventh person who tries to walk through
    the door? That is what you are doing by making a page that *requires*
    javascript.

    I would prefer a restaurant that lets all of my party in (the whole eight,
    not just seven of us) yet takes an extra minute to bring me another beer.

    > The biggest problem that I am aware of is the lack of consistent CSS
    > rendering for my visitors. That effects me more than the lack of JS for a
    > very few.


    CSS should degrade gracefully. If your site looks horrible without CSS then
    your site has been badly constructed.

    Besides, a person using a browser that does not support the simple CSS you
    use will be quite used to seeing pages that don't quite look right. But, at
    least they can use them.

    > At least, IF js is enabled, it IS consistently applied over the many
    > browsers.


    Wrong.

    I cannot say that about CSS.

    Neither can I but I can say that both CSS and javascript should *add* to a
    page and not be *required* for the pages functionality.

    --
    Cheers
    Richard.
     
    rf, Jul 9, 2004
    #10
  11. news.frontiernet.net

    Webcastmaker Guest

    In article <yXlHc.84960$>,
    rf@.invalid says...
    > The very first link is to a restaurant. Do you think the owners of that
    > restaurant would turn away every seventh person who tries to walk through
    > the door? That is what you are doing by making a page that *requires*
    > javascript.
    > I would prefer a restaurant that lets all of my party in (the whole eight,
    > not just seven of us) yet takes an extra minute to bring me another beer.


    Actually I think it is more like, the restaurant will only server you
    if you have a tie. 7 of you have a tie. The 8th can not eat there
    because he does not have a tie. The 8th person has 2 choices, either
    get a tie or don't eat.

    Now many restaurants have a stash of ties (I.e. plain links for non
    JS users) they keep under the counter when someone that has no tie
    comes in, they can use that tie.....

    Same point you are making, but a more realistic analogy...
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
     
    Webcastmaker, Jul 9, 2004
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tom
    Replies:
    0
    Views:
    434
  2. news frontiernet.net

    Revisit Simple Flush Right Need

    news frontiernet.net, Jul 10, 2004, in forum: HTML
    Replies:
    1
    Views:
    631
  3. =?Utf-8?B?QmlzaG95?=
    Replies:
    0
    Views:
    1,003
    =?Utf-8?B?QmlzaG95?=
    Dec 28, 2006
  4. Bogdan
    Replies:
    1
    Views:
    816
    Bogdan
    Jun 16, 2009
  5. Leon
    Replies:
    3
    Views:
    181
    TaeHo Yoo
    Nov 26, 2004
Loading...

Share This Page