Why can I not make it work right?

Discussion in 'HTML' started by richard, Apr 14, 2008.

  1. richard

    richard Guest

    Ok so like what the sam hell is the trick here to get a division to
    float where I want it to?
    When I display it in FF, "name" and "label" appear on two seperate
    lines.with a float:left for "label".

    Using the same example dorayme gave, it worked just fine.
    I go to add in other css elements and it won't float. No how no way.
    So what am I not doing right?



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css" media="all">

    ..bigbox { width:500px; height:200px;
    border:solid 2px red;
    }

    ..row1 { background-color:#FBFEBA;
    text-align:center;
    font-family:arial;
    font-size:12pt;
    border-bottom:solid 2px blue;
    }

    ..row2a { background-color:#B1F9FE;
    width:20%;
    }

    ..row2b { float:left;
    background-color:#B1F9FE;
    width:30%;
    }

    </style>
    </head>
    <body>

    <div class="bigbox">
    <div class="row1">Artist</div>
    <div class="row2a">Name</div>
    <div class="row2b">Label</div>
    </div>






    </body>
    </html>
    richard, Apr 14, 2008
    #1
    1. Advertising

  2. richard

    dorayme Guest

    In article <>,
    richard <> wrote:

    >
    > Ok so like what the sam hell is the trick here to get a division to
    > float where I want it to?
    > When I display it in FF, "name" and "label" appear on two seperate
    > lines.with a float:left for "label".
    >
    > Using the same example dorayme gave, it worked just fine.
    > I go to add in other css elements and it won't float. No how no way.
    > So what am I not doing right?


    FF behaves differently to some other browsers in regard to floats. You
    might find it useful to read at least page 5 of a thing on floats:

    <http://netweaver.com.au/floatHouse/page5.html>

    and see the remarks at the bottom and follow links to the appendices and
    follow further links there to screen shots on this matter.

    I know, it is a bit of a bore, but it might get you clear on it a bit?

    --
    dorayme
    dorayme, Apr 14, 2008
    #2
    1. Advertising

  3. richard

    dorayme Guest

    In article <>,
    Mike Barnard <> wrote:

    > On Mon, 14 Apr 2008 10:47:05 +0100, Mike Barnard
    > <> wrote:
    > >

    > you'd better look at the example
    > code on page 1. It doesn't match the descriptons. If you're not then
    > look anyway and laugh at the author.


    Match*? If I have erred, I will correct. Always hard to proof one's own
    stories.

    Before you jump in though, please verify that the sort of code in the
    captions does *not* give you the result that is being talked about and
    meant in the text.

    Btw, it is not a tutorial, it is me fantasising about things and you
    being unlucky enough to see the process. <g>

    ----------------------------------
    * The difficulties inherent in the concept of matching are many. In
    fact, they are the same, more or less, as the difficulties in the notion
    of identity. Both qualitative identity and quantitative identity are
    tricky beasts. The latter has seemed to be a nonsense to some people: if
    two things are the very same thing then there were not two things in the
    first place.

    And the former is just plain dangerous because two things are always the
    same or not the same in various respects.

    But, worry not Mike, I have the mirror here anyway and I am splitting my
    sides laughing at the author right or wrong without a clue what quite
    your good self is referring to.

    --
    dorayme
    dorayme, Apr 14, 2008
    #3
  4. richard wrote:

    > Ok so like what the sam hell is the trick here to get a division to
    > float where I want it to?


    > <div class="bigbox">
    > <div class="row1">Artist</div>
    > <div class="row2a">Name</div>
    > <div class="row2b">Label</div>
    > </div>


    This looks like tabular data to me.

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Apr 14, 2008
    #4
  5. richard

    richard Guest

    On Mon, 14 Apr 2008 12:21:47 GMT, "Beauregard T. Shagnasty"
    <> wrote:

    >richard wrote:
    >
    >> Ok so like what the sam hell is the trick here to get a division to
    >> float where I want it to?

    >
    >> <div class="bigbox">
    >> <div class="row1">Artist</div>
    >> <div class="row2a">Name</div>
    >> <div class="row2b">Label</div>
    >> </div>

    >
    >This looks like tabular data to me.


    Where is it written that tabular data MUST be displayed in tables?
    I feel that divisions have more flexibility and I can control the
    cells a bit more. I may want to present other information and using a
    table would be to cumbersome. Using divisions eliminates the need of
    colspan and rowspan.

    On this part of my project, I feel that divisions are more
    appropriate.
    richard, Apr 14, 2008
    #5
  6. richard wrote:
    > Ok so like what the sam hell is the trick here to get a division to
    > float where I want it to?
    > When I display it in FF, "name" and "label" appear on two seperate
    > lines.with a float:left for "label".
    >
    > Using the same example dorayme gave, it worked just fine.
    > I go to add in other css elements and it won't float. No how no way.
    > So what am I not doing right?
    >


    Ugh! <sign> First of all this look like tabular data... Repeat after me,
    "It is not CSS *or* TABLES but CSS *or* PRESENTATIONAL MARKUP"

    However some issues with your attempt.

    >
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    > "http://www.w3.org/TR/html4/loose.dtd">


    This is new right? Dump the "Transitional" your are not transitioning
    anything.

    > <html>
    > <head>
    > <title>Menu</title>
    > <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    > <style type="text/css" media="all">
    >
    > .bigbox { width:500px; height:200px;
    > border:solid 2px red;
    > }


    width is in PX what if my font size is larger? You will have problems
    here...

    >
    > .row1 { background-color:#FBFEBA;
    > text-align:center;
    > font-family:arial;


    What if I do not have Arial on my computer, my Ubuntu systems don't. The
    default will be used which it typically serif. At least give a generic
    family fall back font-family: arial, sans-serif;

    > font-size:12pt;


    PTs for for printing not display!!!

    > border-bottom:solid 2px blue;
    > }
    >
    > .row2a { background-color:#B1F9FE;
    > width:20%;
    > }
    >
    > .row2b { float:left;
    > background-color:#B1F9FE;
    > width:30%;
    > }
    >
    > </style>
    > </head>
    > <body>
    >
    > <div class="bigbox">
    > <div class="row1">Artist</div>
    > <div class="row2a">Name</div>
    > <div class="row2b">Label</div>
    > </div>
    > </body>
    > </html>


    How about:

    ..bigbox { width:500px; height:200px;
    border:solid 2px red;

    }

    ..row1 { background-color:#FBFEBA;
    text-align:center;
    font-family:arial;
    font-size:12pt;
    border-bottom:solid 2px blue;
    }

    ..row2a { float:left;background-color:#B1F9FE;
    width:45%;
    }

    ..row2b {
    background-color:#B1F9FE;

    }

    I still say a table is what you really want, especially if the amount of
    data is variable within the cells.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 14, 2008
    #6
  7. On Apr 14, 10:48 am, richard <> wrote:
    > >This looks like tabular data to me.

    > Where is it written that tabular data MUST be displayed in tables?


    Now what would the response have been had it NOT been tabular data and
    someone said "where is it written that non tabular date can NOT be in
    a table...."

    Oh they joys of the web....
    Travis Newbury, Apr 14, 2008
    #7
  8. On Apr 14, 10:48 am, "Jonathan N. Little" <> wrote:
    > I still say a table is what you really want...


    DAMNIT! Where is it written that tabular dat... oh never mind...

    Happy monday everyone!
    Travis Newbury, Apr 14, 2008
    #8
  9. richard

    Andy Dingley Guest

    On 14 Apr, 15:48, richard <> wrote:

    > On this part of my project, I feel that divisions are more
    > appropriate.


    You don't have any data on this page yet, just a single header (row?).

    Potentially, this data (when you add it) is about as tabular as it
    gets - if you want to work with it as a long list of recordings, each
    of which has an identical set of a few properties. Now that's a good
    candidate for <table>

    OTOH, your intention might be (still thinking about the "data" that
    the page contains) that it's more of a list of short encyclopedia-
    style entries for each recording, where the property model of each one
    is more complex, has entries that are individually longer, and that
    varies more in conceptual structure between rows. In that case, a
    sequence of nested sequences of <div> (inside a wrapper <div> for each
    recording) is indeed more appropriate.


    Then there's the practical limitation of what's actually
    implementable. HTML is a a language for marking up pages, it's not
    intended to be the one true data representation language. If one page
    view of the data is more or less "table like" than another page
    viewing the same data, then you can quite reasonably switch between
    <div> or <table> markup. You should code the HTML to represent a "pure
    data" view of a page and let the CSS worry about the presentation, but
    this doesn't mean that different conceptual views onto the same
    _underlying_ data can't be based on a different data model that's only
    relevant to one page's use of it.
    Andy Dingley, Apr 14, 2008
    #9
  10. richard wrote:

    > "Beauregard T. Shagnasty" wrote:
    >>richard wrote:
    >>> Ok so like what the sam hell is the trick here to get a division to
    >>> float where I want it to?

    >>
    >>> <div class="bigbox">
    >>> <div class="row1">Artist</div>
    >>> <div class="row2a">Name</div>
    >>> <div class="row2b">Label</div>
    >>> </div>

    >>
    >>This looks like tabular data to me.

    >
    > Where is it written that tabular data MUST be displayed in tables?


    It is written .. (I know, I've read it somewhere) .. that it is best to
    use CS for projects like this. CS is Common Sense.

    You could also selectively place your tabular data using a gross
    overabundance of &nbsp; and other crap, but why bother?

    > I feel that divisions have more flexibility and I can control the
    > cells a bit more. I may want to present other information and using a
    > table would be to cumbersome. Using divisions eliminates the need of
    > colspan and rowspan.


    Divs may be flexible - lots of things are - but this does not mean you
    would want to drink coffee from a cardboard mug.

    Your stub of code looks like maybe one colspan, on the <th> row.

    > On this part of my project, I feel that divisions are more
    > appropriate.


    Alright then. Slog away.

    --
    -bts
    -Friends don't let friends drive Vista
    Beauregard T. Shagnasty, Apr 14, 2008
    #10
  11. On Apr 14, 2:46 pm, Neredbojias <me@http://www.neredbojias.com/_eml/
    fliam.php> wrote:
    > Happy Monday??? Ugh. Why don't you go scratch your ass...



    I did, that's why it's a happy monday...
    Travis Newbury, Apr 14, 2008
    #11
  12. richard

    dorayme Guest

    In article <>,
    richard <> wrote:

    > Ok so like what the sam hell is the trick here to get a division to
    > float where I want it to?
    > When I display it in FF, "name" and "label" appear on two seperate
    > lines.with a float:left for "label".
    >
    > Using the same example dorayme gave, it worked just fine.
    > I go to add in other css elements and it won't float. No how no way.
    > So what am I not doing right?
    >


    > .bigbox { width:500px; height:200px;...}
    > .row1 {text-align:center;...}
    > .row2a {width:20%;}
    > .row2b { float:left; width:30%;}


    > <div class="bigbox">
    > <div class="row1">Artist</div>
    > <div class="row2a">Name</div>
    > <div class="row2b">Label</div>
    > </div>



    In a thread called "Back to basics on divisions" on this ng yesterday or
    so, I gave you some code and replied to you about some difficulties you
    had then when you found your variations not working. Without knowing, at
    that stage, what changes you had made. You changed the thread and the
    dummy content (why either?) and here we are back.

    The reason for your difficulty in the above is that the first child div,
    'row1' is not an inline element, it is a block and plonks itself down as
    a box while the browser then asks, "OK, what's on the next line?"
    The answer is, a floated div. So that is where it goes - on the next
    line - and jammed up to the left as is its nature.

    If you put the float where I put it in the code - on the first child
    'row2a' - you have a div that is taken out of the flow. Here was my css
    (I adapt to your changed text):

    div {border: 1px solid; text-align: center;}
    ..bigbox {width: 40em;}
    ..row2a {float:left; width:50%;}

    The following div (row2b) now thinks "Hey, here I go" as it looks at the
    *very same line* the float is on. The float is out of the flow and so
    the line has a notice on it, as it were: "the line is still free, so if
    you following elements want a place in this flow, just plonk yourself
    right here on this line providing you can fit"

    Now, in my code, I gave no instructions about width for this second
    child. It was simply the default 100% width. Well, there is plenty of
    room for the div on the line for its 100% width because the float is out
    of the flow, it sits on top of this div!

    It is a tricky matter, I agree, to understand some basic things about
    flow, floats and block elements. None of it is at all intuitive or
    commonsensical. Even the "providing you can fit" hides a multitude of
    issues.

    [There are some very interesting issues that emerge if you give the
    second child in my code a width that is less than 56% which anyone is
    welcome to raise with me.]

    --
    dorayme
    dorayme, Apr 15, 2008
    #12
  13. richard

    dorayme Guest

    In article <>,
    Mike Barnard <> wrote:

    > On Mon, 14 Apr 2008 20:51:20 +1000, dorayme
    > <> wrote:
    >
    > >> you'd better look at the example
    > >> code on page 1. It doesn't match the descriptons. If you're not then
    > >> look anyway and laugh at the author.

    >
    > >Match*? If I have erred, I will correct. Always hard to proof one's own
    > >stories.
    > >
    > >Before you jump in though, please verify that the sort of code in the
    > >captions does *not* give you the result that is being talked about and
    > >meant in the text.

    >
    > OK, what I meant was...
    >
    >
    >
    >
    > "...Let us put an explicit height on them both, see how they might
    > then appear and compare:"
    >
    > Fig 3. <div style="width:500px;"></div>
    >
    > There is no explicit height in the text although it must be in the
    > source.
    >


    Having just said we shall put an explicit height, I assumed my readers
    would trust me and I was lazy to repeat in the caption! I did a lot of
    quick judging and editing of what was sufficient for the captions to
    keep them short but give the general idea along with the main text. But
    I am thinking you are right and it would lessen confusion. I will put it
    in. It is in now! Thank you. I have been meaning to find time to go
    through all the captions... bit boring now it is done!


    > " ... whereas the one in (3) has no width at all."
    > "I know, it seems queer that the div in (3) has a height but no
    > width..."
    >
    > Yes it has, 500px.


    Thanks Mike, really, I appreciate this one even more, it was plain wrong
    in the caption, should have read 0 as in the real code. Fixed.


    > And I love figure 5. I wonder if a use could be made of it on a page?
    > :)
    >


    Oh I should show you my border art and div art one day...

    But keep that proof-reading up old son! In return, I will commission you
    to give me a fire-risk assessment for some of my hotter websites. <g>


    --------------------------
    [If anyone does see obvious mistakes, but prefers not to associate with
    me publicly (which is perfectly understandable given my despicable and
    cowardly and rude public demeanour) there is always the privacy of
    email!

    Why, I hate to gossip like this but, only the other day, at our little
    tete a tete in his luxurious killfile, JK was saying that if he was not
    able to meet me so regularly in it, he would like to email me privately
    and would I mind very much. He explained that a named individual with a
    persona of great authority cannot be seen to be consorting with the
    likes of me in public. We discussed this in terms of the interesting
    counterfactuals depicted and our little morning session was longer than
    usual on that occasion. My my how sweetly these meetings are going.]

    --
    dorayme
    dorayme, Apr 15, 2008
    #13
  14. On Apr 14, 10:29 pm, Neredbojias <me@http://www.neredbojias.com/_eml/
    fliam.php> wrote:
    > >> Happy Monday??? Ugh. Why don't you go scratch your ass...

    > > I did, that's why it's a happy monday...

    > Oh. Well what do you scratch on Tuesday?


    Nothing. Tuesday is "probe" day...
    Travis Newbury, Apr 15, 2008
    #14
  15. On Apr 15, 7:33 pm, Neredbojias <me@http://www.neredbojias.com/_eml/
    fliam.php> wrote:
    > > Nothing. Tuesday is "probe" day...

    > Hemorrhoids, huh?


    Sigh.... one of many ailment... (suckx getting old)

    > One day last week while browsing The Net, I can across a
    > site with an ad for something that claimed it could not only shrink
    > hemorrhoids without surgery but induce penile enlargement with the same
    > process.


    LINK? LINK????
    Travis Newbury, Apr 16, 2008
    #15
  16. Neredbojias wrote:

    > On 16 Apr 2008, Travis Newbury <> wrote:
    >
    >>> > Nothing. Tuesday is "probe" day...
    >>> Hemorrhoids, huh?

    >>
    >> Sigh.... one of many ailment... (suckx getting old)

    >
    > Think how Blinky feels. He's an old fish.


    Old fish never die. They just&@#@*^%%*NO CARRIER
    Blinky the Shark, Apr 16, 2008
    #16
  17. Neredbojias wrote:
    > On 16 Apr 2008, Blinky the Shark <> wrote:


    >> Old fish never die. They just&@#@*^%%*NO CARRIER

    >
    > Ooo, I know. They just fin-ish...
    >


    No they just get sea-nile...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 17, 2008
    #17
  18. On Apr 17, 11:17 am, Sherman Pendley <> wrote:
    > >> Old fish never die. They just&@#@*^%%*NO CARRIER

    > > Ooo, I know. They just fin-ish...

    > Old fish never die, they just go to pisces.


    you guys are really fishing for some laughs here
    Travis Newbury, Apr 17, 2008
    #18
  19. Travis Newbury wrote:
    > On Apr 17, 11:17 am, Sherman Pendley <> wrote:
    >>>> Old fish never die. They just&@#@*^%%*NO CARRIER
    >>> Ooo, I know. They just fin-ish...

    >> Old fish never die, they just go to pisces.

    >
    > you guys are really fishing for some laughs here
    >

    And hooked you though...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Apr 17, 2008
    #19
  20. Jonathan N. Little wrote:

    > Neredbojias wrote:
    >> On 16 Apr 2008, Blinky the Shark <> wrote:

    >
    >>> Old fish never die. They just&@#@*^%%*NO CARRIER

    >>
    >> Ooo, I know. They just fin-ish...
    >>
    >>

    > No they just get sea-nile...


    There's one I hadn't heard before. Five points. :)

    --
    Blinky
    Killing all posts from Google Groups
    The Usenet Improvement Project: http://improve-usenet.org
    Blinky: http://blinkynet.net
    Blinky the Shark, Apr 17, 2008
    #20
    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. Horace Nunley

    why why why does function not work

    Horace Nunley, Sep 27, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    450
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Sep 27, 2006
  2. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    863
    Mark Rae
    Dec 21, 2006
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,763
    Smokey Grindel
    Dec 2, 2006
  4. Xeno Campanoli
    Replies:
    1
    Views:
    332
    James Britt
    Jul 1, 2005
  5. Oran
    Replies:
    2
    Views:
    518
Loading...

Share This Page