Why can I not make it work right?

R

richard

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>
 
D

dorayme

richard said:
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?
 
D

dorayme

Mike Barnard said:
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.
 
B

Beauregard T. Shagnasty

richard said:
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.
 
R

richard

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.
 
J

Jonathan N. Little

richard said:
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.
 
T

Travis Newbury

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....
 
A

Andy Dingley

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.
 
B

Beauregard T. Shagnasty

richard said:
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 said:
On this part of my project, I feel that divisions are more
appropriate.

Alright then. Slog away.
 
D

dorayme

richard said:
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.]
 
D

dorayme

Mike Barnard said:
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.]
 
T

Travis Newbury

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????
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top