Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    creating a flow layout with tables

    When I code multiple small tables the browser (IE and NS6) force a break so the tables line up vertically instead of horizontally.
    How can I stop the horizontal lineup from happening?
    I want to basically display something like the explorer Large Icon view.

    I don't want to enclose this in a larger table since that would fix the rows and columns. I want the displayed icons to be able to flow/wrap based on the page size. This is something that tables can't do.

    Any ideas?
    Wayne Christian

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    One possibility...



    <table border="1" style="position:absolute;left:0;top:100;border:1 solid green"><tr><td>Table 1</td></tr></table>
    <table border="1" style="position:absolute;left:100;top:100;border:1 solid red"><tr><td>Table 2</td></tr></table>
    <table border="1" style="position:absolute;left:200;top:100;border:1 solid blue"><tr><td>Table 3</td></tr></table>


  • #3
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That's a possibility, but I also need the display to wrap when the page is not wide enough. So initially there might be 5 images/text with 3 on the first line and 2 on the 2nd, but when the user reduces the width of the page, there might be 3 rows with 2 on the first and 2nd row and 1 on the 3rd.
    Wayne Christian

  • #4
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    why do you want use tables? there are other ways of accomplishing this.

  • #5
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, that's why I'm posting here. What other way do you suggest? I cannot use active X or IE propietary methods. This has to be able to work in both NS6+ and IE5.5+
    Wayne Christian

  • #6
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by wac
    This has to be able to work in both NS6+ and IE5.5+
    naturally

    i was thinking just using a <span> and customizing it to look like a button, much easier than tables

    for instance this would look like a form button ( i think )


    <span style="background-color:#c0c0c0;color:black;border:3px outset #c0c0c0;">
    button
    </span>

  • #7
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't see how I can get something like the explorer Large Icon view this way? I don't want to use buttons, rather, I'd like the icon over the text, although I could deal with the icon to the left of the text, which might make this easier to implement using span,
    but I wouln't get the things nicely lined up as I could when using table.
    Wayne Christian

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the site template I'm working on now: www.klproductions.com/TemplateT4.html - "as fluid as it gets" layout with css (and some javascript help). Works with IE5+ and Gecko browsers. Not only you can line everything up, you can create overlapping effects and have different style sheets.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    One possibility (part 2)
    I have managed to some extent create the effect you are after by adding the width attribute and using a percentage value.

    The image sizes I used were 45 x 45 pixels.

    The image size attributes are not used in the img tag.

    The tables are set with a row of 3 images and a row of 2 images.
    Reducing the size of my window created the effect you stated.

    Positioning of the tables may have an overall impact on the effect.


    <table border="1" style="position:absolute;left:0;top:100;border:1 solid green;width:21%"><tr><td>
    <img src="pic1.jpg"> <img src="pic2.jpg"> <img src="pic3.jpg">
    <img src="pic4.jpg"> <img src="pic5.jpg">
    </td></tr></table>

    <table border="1" style="position:absolute;left:200;top:100;border:1 solid red;width:21%"><tr><td>
    <img src="pic1.jpg"> <img src="pic2.jpg"> <img src="pic3.jpg">
    <img src="pic4.jpg"> <img src="pic5.jpg">
    </td></tr></table>

    <table border="1" style="position:absolute;left:400;top:100;border:1 solid blue;width:21%"><tr><td>
    <img src="pic1.jpg"> <img src="pic2.jpg"> <img src="pic3.jpg">
    <img src="pic4.jpg"> <img src="pic5.jpg">
    </td></tr></table>


  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Vladdy
    Here is the site template I'm working on now: www.klproductions.com/TemplateT4.html - "as fluid as it gets" layout with css (and some javascript help). Works with IE5+ and Gecko browsers. Not only you can line everything up, you can create overlapping effects and have different style sheets.
    Another completely fluid layout, validating to XHTML 1.1:
    www.jasonkarldavis.com

    Unlike Vladdy's example however (no offense intended ), every browser uses the same stylesheet (am I misreading, or does http://klproductions.com:8080/Client.../KL_Scripts.js serve up Opera its own stylesheet?)
    To be fair, I serve IE an extra stylesheet, but with only one rule via a conditional comment because IE has some issues with relative font-size's that standards-compliant browsers such as Mozilla or Opera 7 don't have.

    As long as you write "good" markup, use the proper tags, and have intelligent stylesheets, it is hard to make anything but a fluid layout.
    Just remember to use % for width measurements, some relative unit for font sizes, and only resort to px for things such as border-width's.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jkd,

    as I mentioned this site is still under construction. I'm moving the "custom stylesheet" functionality to the server side.
    The reason is mostly my "scroll content div only" layout that depends on javascript for moving navigation around and fixing IE rendering of absolutely positioned elements.
    When JS is disabled and/or non compliant browser is used the stylesheet that uses "scroll all the canvas" layout will be served.

    The remaining code in determineStyleSheet() will be for the compliant browsers and will select stylesheet based on resolution and ultimately have random themes.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #12
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What I'm really talking about is the flowing of the Large Icon view, as explorer does. Flowing text is not a problem. What I'm having is when I combine text and icon in a vertical format that's equally spaced (screams table to me, but I'm a novice). If I use a table, then the number of columns don't change when I expand/shrink the window. I need something like java's FlowLayout which wraps items onto the next line when they can't fit on the current line.

    The effect that Mr J.s answer has in a single table is what I'm after. I'll see if I can expand on it to do what I want when there's an image and text involved.
    Wayne Christian

  • #13
    bk1
    bk1 is offline
    New Coder
    Join Date
    Nov 2002
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here's an article/tutorial that I think explains what you're trying to do:
    http://www.alistapart.com/stories/practicalcss/

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In your example of "Large Icon View" the number of items in a row changes depending on container width. Something that is easily achieved with setting display property of an element to inline, but not with the "tables" layout.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #15
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes! the response by BK1 is exactly what I'm looking for. I'm not wedded to tables. I'm perfectly willing to do without them. However, since I'm an HTML/CSS newbie, I didn't see a way to exist without them. I'll also look into the display:inline style that Vladdy suggested
    Wayne Christian


  •  

    Posting Permissions

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