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 10 of 10

Thread: Display tag

  1. #1
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display tag

    Hi,

    I am converting my site to css layout rather than using tables. Everything so far is going very nicely, thanks to all the trhreads and FAQs I have read in this forum and the links out.

    My current question is this: how do you use css to imitate a table containing 4 rows, each row containg 5 cells? The current table is used to display small images in a grid.

    I notice that the css style "display" has many table elements - should I use those? If so, can anyone give me an example?

    Thank you!

    Diane

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table display

    The various table display values would be very useful in some cases, if it weren't for the most ubiqitous browser -IE- not supporting them, which sadly limits their usefulness.

    An alternative approach for your table would be to float all the images; if they all have the same dimensions, or one of a limited set of known dimensions, margins could be used to make them take up all the same space.
    Suppose you float them all left, they will line up next to eachother until horizontal space runs out; the next image will line up to the left on the next "row", and so on.

    If you can give some more info on the image sizes, or a link to the current page, I can give you an example of the CSS and markup involved.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It depends on what the content is.

    Remember, the purpose of CSS instead of tables is so that the HTML properly marks up the content within. What are the images that are in a grid? If it's a table of some sort to begin with, then use a table.

    If it's a list of images, such as an image gallery, for example, you could do something like this: http://css.maxdesign.com.au/floatuto...torial0407.htm

    To help you out a little more we'll need to know a little more about what the info-- and not just the design-- is.

    Edit: Whoops... beat me to it

  • #4
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys.

    Okay, (gulp), here's the urls:

    http://www.webdesign4schools.co.uk/navigation.html (current site)
    http://www.test.webdesign4schools.co.uk/navigation.html (css version under development)

    and

    http://www.webdesign4schools.co.uk/backgrounds.html (current site)
    http://www.test.webdesign4schools.co...ckgrounds.html (css version under development)

    The first page's table is to give examples of Flash buttons, which are different sizes. The second page's table is to show background images.

    I got into web design as a teacher when I was asked to do my school's website. I then did a site for my husband's school and then my son's. Things have sort of gone from there.

    Edited to add: the link to the float tutorial looks excellent - I'm experimenting now!
    Last edited by Diane; 03-01-2005 at 11:50 AM.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Wow. Thats a nice site!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    List...?

    Hmmmmm... I'm tempted to say: "leave it as is", but tables aren't really the best solution in the semantic sense of the way; I think an unordered list would do nicely here, which gives you a nice set of container elements to style, and a container around them at the same time.

    I would certainly advice to get rid of the inline styles, especially in the second example; things like width, margins and repeat settings can be covered in one single style rule; all the background images though would have to be set individually, which can be accomplished via ids. This doesn't seem a whole lot more efficient, but it does respect the seperation concept.

    Start with whipping up an unordered list and see if you can work out the style rules; if you run into a snag, we'll glad to help you along.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you Dan - I really appreciate that! I feel so inferior compared to the true "professionals" and very shy/embarrased to expose my work when everyone else is so good at what they do.

    Well, I think I'm getting there - still very untidy, but getting there...

    http://www.test.webdesign4schools.co...vigation2.html

  • #8
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ronald, I think we both clicked "submit" at the same time! Okay, I'll try a list style approach and see what happens. Thanks.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nice site indeed

    By the way: that site does look pretty good. We'll have you on the rack for the coding some more , but the visual design and layout is really promising.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #10
    New Coder
    Join Date
    May 2003
    Location
    South Wales, UK
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you! I love improving my skills and having new challenges with coding - gives me focus! I've finished tidying up http://www.test.webdesign4schools.co...vigation2.html and it looks okay I think. It would be nice to actually get the pseudo-table in the centre of the page now, so I'm going to have another browse through all these threads to see if I can find how to do this.

    Edited to add: the backgrounds page is done now and seems to works well. I will experiment with unordered list approach too to see which works best. I put a container around the "tables" and used
    .container {
    width: 700px;
    left: 50%;
    margin-left: -350px;
    position: relative;
    }
    to try and centre the "tables". I only have an old monitor set at 800x600 - does the layout work in higher resolutions with the container style?
    Last edited by Diane; 03-01-2005 at 02:16 PM.


  •  

    Posting Permissions

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