Web Analytics Made Easy -
StatCounter Adjusting Spacing Equally Between Differently Sized Objects - CodingForum

Announcement

Collapse
No announcement yet.

Adjusting Spacing Equally Between Differently Sized Objects

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adjusting Spacing Equally Between Differently Sized Objects

    I am struggling with a fluid CSS design. Or even a somewhat fluid design (with a min/max).

    I want to be able to have evenly spaced objects (the objects may form a row of images or even a row of text). I want the spacing between the objects to change in width based on how wide the width of the user's browser is.

    If I give each object padding, it is a fixed width. I can give each object a percent width, but seems difficult when the objects are different widths and seems impossible when they are unknown sizes (i.e. the objects may change).

    The closest I came to solving this was having a 'spacer div' between each object. Then I would give the spacer div some tiny width percent. It looks good around 800px wide and does increase the spacing as I make it wider but doesn't seem to increase it enough as I make it wider. But if I increase the percent percent width of it, it looks too wide around the 800px width.

    Ack!

    I can better get what I can to happen using tables, but I'm hoping there is a CSS method for this, more because I don't like giving up than I'm anti-tables.

    Any ideas?

    BTW, I'm a newbie here and ready for any poo if this is just a basic question. Actually I hope it is a basic question...any feedback is welcome.

  • #2
    Welcome to the forums...

    Well, first I would suggest solidifying exactly what the finished content is going to be. If you think purely visually at first, you'll end up adding unneeded elements when you might already have plenty to work with.

    For example, if you were going after, say, a row (or rows) of thumbnails for an image gallery, the markup could be:
    Code:
    <ul>
    	<li><img src="images/thumbnail.gif" alt="thumbnail" width="50" height="50"></li>
    	<li><img src="images/thumbnail.gif" alt="thumbnail" width="50" height="50"></li>
    	<li><img src="images/thumbnail.gif" alt="thumbnail" width="50" height="50"></li>
    	<li><img src="images/thumbnail.gif" alt="thumbnail" width="50" height="50"></li>
    	<li><img src="images/thumbnail.gif" alt="thumbnail" width="50" height="50"></li>
    </ul>
    ...giving you a few block level containers to work with. You could style these like so:
    Code:
    ul	{
    	min-width: 400px;
    	}
    
    li	{
    	list-style: none;
    	width: 20%;
    	float: left;
    	text-align: center;
    	}
    There's one example for you... I meant to post this example online for you, but my server's down. Ah well...

    Hope this helps...
    drums | web

    Comment


    • #3
      Thanks for the response rmedek. Here's some more details and why I said the objects are differently sized.

      The first is a a tab navigation. The tabs are designed to be images which are not a uniform width. But, I do know what the widths are and do not expect them to change. I am supposed to make the spacing between these tab images change with the browser width.

      Below the tabs is second level navigation. Basically it is a horizontal list of text. I was asked if it's possible to have the spacing between the text increase and decrease as the window is resized. There will be five sets of this second level navigation (one for each tab). This second level text of course varies in size (length of text) and will most likely change somewhat regularly.

      Any ideas?

      Comment


      • #4
        What do you have so far? Can you provide a screenshot or a link?
        drums | web

        Comment


        • #5
          Hmm...I'll have to find out if I can do that. I know it's stupid--I work for a university around here doing some Web work. This project is a website designed by an outside vendor for an office here (the outside vendor basically drew a picture of how it should look)...so, I'm not sure how that works if I can just post it online or what.

          But even in general, I'm perplexed how to do this.

          I've attached a lame drawing to explain what I'm basically trying. The green lines are where I want the space to adjust. Yeah, I'm weird.
          Attached Files

          Comment

          Working...
          X