Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > HTML & CSS column question

Reply
Thread Tools

HTML & CSS column question

 
 
Er
Guest
Posts: n/a
 
      12-01-2003
Hi all,

I am writing a PHP catalog of products type script, and I need to list a
whole bunch of products on each page.

I would like to have the number of columns to be dynamic, that is, if you
have a narrow browser window, you end up with two columns and if you are
maximized, for example, you have four or five columns of products.

Can this be done automatically (ie. change the number of columns on a
resize-browser window) or do I have to see how wide the browser window is on
load-up, and keep refreshing the page?

I tried doing it with tables but they always seem to want to stay on the
same line just adding a horizontal scroll bar to the browser window.

Thanks,

Erwin



Narrow:

-------- --------
| pic | | pic |
| | | |
-------- --------
Prod 1 Prod 2

-------- --------
| pic | | pic |
| | | |
-------- --------
Prod 3 Prod 4


Wide:


-------- -------- -------- --------
| pic | | pic | | pic | | pic |
| | | | | | | |
-------- -------- -------- --------
Prod 1 Prod 2 Prod 3 Prod 4



 
Reply With Quote
 
 
 
 
Toby A Inkster
Guest
Posts: n/a
 
      12-01-2003
Er wrote:

> I would like to have the number of columns to be dynamic, that is, if you
> have a narrow browser window, you end up with two columns and if you are
> maximized, for example, you have four or five columns of products.


<style type="text/css" media="screen,projection">
#productlist {
margin: 0;
padding: 0;
list-style: none;
border: thin dotted black;
}
#productlist li {
margin: 1em;
padding: 1em;
list-style: none;
border: thin dotted blue;
width: 180px;
float: left;
}
#productlist li p {
font-size: 85%;
}
</style>

<ul id="productlist">
<li>
<h3>Product One</h3>
<img src="product1.png" alt="" height="100" width="100">
<p>Short description of product one.</p>
</li>
<li>
<h3>Product Two</h3>
<img src="product2.png" alt="" height="100" width="100">
<p>Short description of product two.</p>
</li>
<li>etc</li>
</ul>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132

 
Reply With Quote
 
 
 
 
Leif K-Brooks
Guest
Posts: n/a
 
      12-01-2003
Er wrote:
> I am writing a PHP catalog of products type script, and I need to list a
> whole bunch of products on each page.
>
> I would like to have the number of columns to be dynamic, that is, if you
> have a narrow browser window, you end up with two columns and if you are
> maximized, for example, you have four or five columns of products.
>
> Can this be done automatically (ie. change the number of columns on a
> resize-browser window) or do I have to see how wide the browser window is on
> load-up, and keep refreshing the page?
>
> I tried doing it with tables but they always seem to want to stay on the
> same line just adding a horizontal scroll bar to the browser window.



Try using the CSS float property:

<div class="product">
<img src="product1.png" alt="">
<p class="caption">Product 1</p>
</div>
<div class="product">
<img src="product2.png" alt="">
<p class="caption">Product 2</p>
</div>
<div class="product">
<img src="product1.png" alt="">
<p class="caption">Product 2</p>
</div>
<div class="product">
<img src="product1.png" alt="">
<p class="caption">Product 2</p>
</div>
<div class="product">
<img src="product1.png" alt="">
<p class="caption">Product 2</p>
</div>

And style them like:

..product {
float : left;
width : 100px; /* Or whatever the width of the images is */
}
..caption {
text-align : center;
}

 
Reply With Quote
 
Er
Guest
Posts: n/a
 
      12-02-2003

"Leif K-Brooks" <(E-Mail Removed)> wrote in message
news:eQNyb.342$(E-Mail Removed)...
> Er wrote:
> > I am writing a PHP catalog of products type script, and I need to list a
> > whole bunch of products on each page.
> >
> > I would like to have the number of columns to be dynamic, that is, if

you
> > have a narrow browser window, you end up with two columns and if you are
> > maximized, for example, you have four or five columns of products.
> >
> > Can this be done automatically (ie. change the number of columns on a
> > resize-browser window) or do I have to see how wide the browser window

is on
> > load-up, and keep refreshing the page?
> >
> > I tried doing it with tables but they always seem to want to stay on the
> > same line just adding a horizontal scroll bar to the browser window.

>
>
> Try using the CSS float property:
>
> <div class="product">
> <img src="product1.png" alt="">
> <p class="caption">Product 1</p>
> </div>
> <div class="product">
> <img src="product2.png" alt="">
> <p class="caption">Product 2</p>
> </div>
> <div class="product">
> <img src="product1.png" alt="">
> <p class="caption">Product 2</p>
> </div>
> <div class="product">
> <img src="product1.png" alt="">
> <p class="caption">Product 2</p>
> </div>
> <div class="product">
> <img src="product1.png" alt="">
> <p class="caption">Product 2</p>
> </div>
>
> And style them like:
>
> .product {
> float : left;
> width : 100px; /* Or whatever the width of the images is */
> }
> .caption {
> text-align : center;
> }
>


This works great! Thanks!

Er


 
Reply With Quote
 
 
 
Reply

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 On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: correction: A question about css (was: A question about css) richard HTML 12 03-09-2010 08:52 PM
How to tell VS to wite HTML element's styles in the CSS file automaticly instead of in the body of the HTML file. oranmeir@gmail.com ASP .Net 1 06-09-2006 06:53 AM
CSS question - can I make CSS Cascade sideways? Bill_W_Stephens@yahoo.com HTML 6 03-18-2006 06:02 PM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM



Advertisments