Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 04:15 PM
Fraggle
Guest
 
Posts: n/a
Default Flowing things to width of screen

I am not sure if this is possible, and i cannot get google to tell me,
so i am trying here!

I wish to display a list of addresses, probably about 20, and i want
them to be in a grid formation. However i want the number of
addresses accross the screen to be decided by the browser (depending
on the width of the window being used) so a hard coded table is not
great.

I am fairly sure i have seen a solution somwhere, but now i cannot
locate it :(

I assume that any solution would work with screenreaders/phones etc
simply by having one long list of addresses.

Hmm hope that description is clear, here is some ascii art to help
you!

O <- this is a block of text representing one address

| <- left of screen(or browser window (or whatever)) |
| right of screen(or browser window (or whatever)) -> |

example with wide screen
|OOOOOOO|
|OOOOOOO|
|OO |

Example with narrow screen
|OO|
|OO|
|OO|
|OO|
|OO|
etc etc


any hints and tips gratfully recieved

Fragg
  #2  
Old July 20th, 2005, 04:15 PM
Jim Dabell
Guest
 
Posts: n/a
Default Re: Flowing things to width of screen

Fraggle wrote:
[color=blue]
> I am not sure if this is possible, and i cannot get google to tell me,
> so i am trying here![/color]

When talking about presentation,
<URL:news:comp.infosystems.www.authoring.styleshee ts> is usually a better
choice. Followups set.

[color=blue]
> I wish to display a list of addresses, probably about 20, and i want
> them to be in a grid formation. However i want the number of
> addresses accross the screen to be decided by the browser (depending
> on the width of the window being used) so a hard coded table is not
> great.[/color]

Float the elements to the left and set a width. It's come up a few times in
ciwas lately in the context of thumbnails for a picture gallery, so check
Gooja.

[color=blue]
> I assume that any solution would work with screenreaders/phones etc
> simply by having one long list of addresses.[/color]

Yup, all you want is simple, meaningful markup:

<ul class="address">
<li>Address 1</li>
<li>Address 2</li>
<li>Address 3</li>
<li>Address 4</li>
</ul>

..address, .address li {
display: block;
margin: 1em;
padding: 1em;
}

..address li {
float: left;
width: 10em;
border: medium solid black;
}

--
Jim Dabell

 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles