www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Positioning inline without Tables

  1. #1
    Join Date
    May 2003
    Location
    Oklahoma
    Posts
    116

    Positioning inline without Tables

    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.

    <FONT class="label">Member Number:</FONT>&nbsp;N23123123
    <FONT class="label">Eff:</FONT>&nbsp;06/01/03
    <FONT class="label">Exp:</FONT>&nbsp;07/01/03<BR/>
    <FONT class="label">Member Name:</FONT>&nbsp;Johnson, Jerome
    <FONT class="label">Member Since:</FONT>&nbsp;06/01/03<BR/>

    Desired layout (approximately):
    Member Number: N23123123&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eff: 06/01/03&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Exp: 07/01/03
    Member Name: Johnson, Jerome&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Member Since: 06/01/03

    There is text above and below these lines that does not require inline spacing.

    I'm concerned that & nbsp may be the only option for inline spacing with CSS.
    Last edited by moreta; 06-06-2003 at 08:47 AM.

  2. #2
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    Try this link to help you on your way:
    http://www.thenoodleincident.com/tut...son/boxes.html

    Havik

  3. #3
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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).

  4. #4
    Join Date
    May 2003
    Location
    Oklahoma
    Posts
    116
    Try this link to help you on your way:
    http://www.thenoodleincident.com/tu...sson/boxes.html
    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.

  5. #5
    Join Date
    May 2003
    Location
    Oklahoma
    Posts
    116
    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.

    Thank you!
    Moreta
    Last edited by moreta; 06-06-2003 at 03:20 PM.

  6. #6
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    Moreta,
    Didn't my example work for you?

    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.

  7. #7
    Join Date
    May 2003
    Location
    Oklahoma
    Posts
    116
    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....


    Moreta

  8. #8
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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)

  9. #9
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    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)

    k

  10. #10
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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).

  11. #11
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    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
    Code:
    =========================
    Lets say we next add a para 123 123 123...
    Code:
    =========================
    123 123 123...
    *========================
    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.
    Code:
    =========================
    123 123 123...
    ----------*==============
    ----------
    ----------
    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 *
    Code:
    =========================
    123 123 123...
    ----------456 456 456...
    ----------*==============
    ----------
    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.
    Code:
    =========================
    123 123 123...
    ----------456 456 456...
    ----------
    ----------
    *========================
    The above was result of "clear". The paragraph gets placed as:
    Code:
    =========================
    123 123 123...
    ----------456 456 456...
    ----------
    ----------
    789 789 789...
    =========================
    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.

  12. #12
    Join Date
    May 2003
    Location
    Oklahoma
    Posts
    116
    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!

  13. #13
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    hi moreta...

    would you mind posting the working version (some of us here.... okay, me... remain pretty clueless).

    i'd really like to see how this worked (especially since it's "reusable" )

    thanks..
    k

  14. #14
    Join Date
    May 2003
    Location
    Oklahoma
    Posts
    116
    would you mind posting the working version
    I can't provide a URL. Our test site is intranet only, and the code would fail without the CGI databases to draw on.

    Here is the code (minus CGI lookups). Hope it helps.
    Code:
    .
    .
    .
    #main {
    margin:0 3em 0 3em;
    border:1px solid navy;
    padding:1px;
    }
    #main #section {
    background:navy;
    color:white;
    font:bold 12pt Tahoma, Arial;
    text-align:left;
    padding-left:5px;
    }
    </* 50% width too much... maybe because 
    of margins set in parent divisions */>
    div.2coltable div {float: left; width: 45%; text-align: left}
    div.2coltable span {font:bold 10pt;}
    
    </* 33% width too much... maybe because 
    of margins set in parent divisions */>
    div.3coltable div {float: left; width: 28%; text-align: left}
    div.3coltable span {font:bold 10pt;}
    
    .
    .
    .
    <div id="main";>
    
    <!-- form policy -->
    <div id="section">
    Policy
    </div>
    
    <!-- Visual division of line into 3 parts of equal size -->
    <div class="3coltable">
    <div><span>Policy Number:</span>&nbsp;N35341257</div>
    <div><span>Effective:</span>&nbsp;12/29/02</div>
    <div><span>Expiration:</span>&nbsp;06/29/03</div>
    </div>
    
    <!-- Visual division of line into 2 parts of equal size -->
    <div class="2coltable">
    <div><span>Insured:</span>&nbsp;MARTIN, KENNETH</div>
    <div><span>Endorsement Date:</span>&nbsp;05/12/03</div>
    </div>
    
    <!-- Header bar with reversed colors. Needs CLEAR to 
    prevent preceding floating text from displaying reversed. -->
    <div id="section" style="clear:left">
    Endorsement
    </div>
    .
    .
    .
    </div>

  15. #15
    Join Date
    Jan 2003
    Location
    Jersey Girl
    Posts
    1,198
    thanks moreta...

    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.

    thanks for posting your code though.

    i'll stop rambling now...
    k

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles