I'm trying to make the change to CSS... working on my first conversion of a screen/form.
Originally we used tables to space information across a line, using colspan for positioning. I've pulled the table, but still need to separate the information on a couple of information lines.
I would argue that this is a tabular data, so a table is OK here.
One possible CSS way:
<div class="3coltable">
<div><span>Member Number:</span>_N23123123</div>
<div><span>Effective:</span>_06/01/03</div>
<div><span>Expiration:</span>_07/01/03</div>
<div><span>Member Name:</span>_Johnson, Jerome</div>
<div><span>Member Since:</span>_06/01/03</div>
</div>
div.3coltable div {float: left; width: 33%; text-align: left}
div.3coltable span {/* styles of font.label should come here */}
You may also specify min-width for the div so that things get displayed properly even if the browser width is too small. IMO,min-width is not supported in IE6.
The space between div.3coltable and div/span is called "descendent selector". It means any div/span which occurs within <div class="3coltable"> (may be nested within other HTML elements).
Havik -- I tried variations on these yesterday and this morning, but haven't been able to keep the middle section on the same line as the others. I haven't exhausted all permutations, but enought to know that I'm unlikely to find the correct one soon.
I would argue that this is a tabular data, so a table is OK here.
Nkaisare -- So it wouldn't be considered bad form to use a table for just two lines? I'm trying to use CSS correctly... so I won't have to unlearn bad habits later.
Re 3coltable div/span suggestion: In my very limited CSS experience, <div> forces a line break every time I use it. This would prevent the three data pieces from displaying on one line. I'll play with the 3coltable suggestion next; and may find that this concern is invalid.
I found the rest of the answer to my problem in a thread a couple of items down (3 column layout using divs)! Until y'all pointed me at columns and divs, I didn't realize that was what I was looking for!
I appreciate the explanations... my memory is frantically sorting the jumble of information I've thrown at it, but most stuff has "where did I see that" status.
I see no fault in using a table for even a single row, if its a tabular data. Yeah, some might argue that its a 5-row, 2-col table... but the question here is - "Is it tabular data?". And in my opinion, it is.
Nkaisare - sorry, sorry. I wrote a really l-o-n-g reply, and decided nobody wants volumns and took out... maybe too much.
A small table for the first area (two rows, three columns)worked beautifully (nice to see something familiar).
I tried the example, but every div started a new line instead of a new column. BUT, I changed it to 50% for 2 columns, used a div on the first column only, and it worked great for visually separating two areas on a line (which I needed in another place).
All of this code is embedded under a higher <div> with 3em margins right and left. Would this have caused the line break? Didn't think of that....
It will cause a break if the contents of the three divs can't fit horizontally in a single line. You can theoretically avoid it by using min-width style... but thats not supported in IE or in NS6.
Tables wont break in that manner because a table row is a table row is a table row (man, this khaki fever is contagious)
Originally posted by nkaisare a table row is a table row is a table row (man, this khaki fever is contagious)
maybe so...
but it's not life-threatening or anything
oh... and I didn't realize that my <div>s may have been breaking because they didn't fit horizontally.
I thought that they were supposed to break because they are a block element or something (ugh... I'm still clueless about this whole <div> business)
Originally posted by khaki
I thought that they were supposed to break because they are a block element or something (ugh... I'm still clueless about this whole <div> business)
Here we go again.
<div> "defines" a division in page. Much like <p>... whereas <p> defines a paragraph, <div> defines a division.
Lets say you have a div, with its width specified by CSS. This div will be exactly that wide. Now you have contents within this div. If the content comes in a single line, it will be displayed in a single line. If it does not, it will wrap, just like text wraps in Notepad. Difference is that <div> can contain inline as well as block level elements. If its an inline element, it flows very similar to the text flowing in a notepad.
If there is a block level element, its like pressing [enter] in your notepad, placing your block level element, and pressing [enter] again.
If this block level element is floated to the left, what happens? There is no proverbial [enter] pressed on your notepad. Instead, at the current location, ragged against the left edge of your notepad (or your div), this block level element will be floated. Its like wood floating on the water... all other things are routed around this float. Once this block is floated, your remaining elements will flow around it, line wrapping every time the right end of the notepad (or your div) is reached.
---
What does it mean in the moreta's example?
We have five floats within our div. First float gets ragged against the left edge of the div. Next, the "cursor" reads another float. OK, can I have it ragged against the left edge? No... because first div is already there. Can I place it besides the first div? Yes I can. OK, there it goes. Now the "cursor" reads a third float (gosh! aren't any of you heavy enough to sink). As before, it will be placed besides the second float. Now the "cursor" reads the fourth float (oh no, not again ). As before, it will be placed besides the third float. Hey wait! Somethings wrong... there isnt enough space to place it there. OK, the float "wraps", its placed ragged against the left edge of the div, below the first float. And the story continues.
What if the div is so small that it can hold only one float? Well, no problem... all the floats will be stacked one over the other.
OK so much for the float. Now what happens to the div. Well, since we dont have any content, the poor div has zero height (or height equal to lineheight, depending on browser).
The problem I had with floats when I was getting started was their peculiar behavior. Floats are not exactly contents of a <div>, they are floated. They (floats) get out of the normal flow of the contents, just like position: absolute. But unlike position: absolute, they are still floated, with the other contents taking cognizance of this fact. In other words, you can clear the area next to the float using clear: left or clear: right.
Pictorially this is what happens:
Lets say the div is a rectangular pond. * is the cursor (or an anchor). Let === be edges of the div, and --- of the floats. The edge expands as contents increase
The * shows the position of cursor.
Next we place a 10em wide float to the left. The cursor position becomes the anchor for this float. If its floated right, the anchor is placed at the right edge instead of left.
Note that although the float is in place, the div still remains as high as its contents (ie the paragraph 123 123 123...)
Next, you place more content 456 456 456... in this div. Where does that start? At the *
Next, we have a paragraph 789 789 789...
But we did one more thing, we added style="clear: left" to it. What does that mean? The float area is cleared. The * starts BELOW the float's bottom edge, at the left edge of the div.
NOTE CAREFULLY that if you just had 123 and 456 paragraphs, the div will end before the float's bottom edge. The divs do not stretch like tables. People use this all the time for layouts, but usually forget it when emulating a table layout using CSS. Thats why I used to say burden of the (table) history.
That did it, nkaisare. I changed the Table to a div (changing from 33% to 28% to allow for the margins established earlier). I also needed CLEAR, since only floats were in the division. It's beautiful! It's reusable!
but now i see why i was so confused to begin with:
did you know that this displays completely differently on IE (5.0) and Mozilla/Netscape?
CSS (positioning) is proving quite mind-boggling for me (despite the intense tutoring that i get here )
i really gotta go through some of my more recent posts where many of these guys gave me solutions that i should save as templates.
i'll just have to learn by what works, before i try to figure-out how to make something work.
i'm probably frustrating the crap out of these guys....
but it's been no picnic for me either.
Reply With Quote
I'm trying to use CSS correctly... so I won't have to unlearn bad habits later.
k
Bookmarks