Hello everyone,
I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).
What I need is a table that with two sides: the left is headers, and
the right is information, like so:
Product number: 123456789
Product name: Lawnmower
Colour: Fire engine red
etc. etc.
However, I need to include an inset of the picture of the product in
the right-top corner. However, the product picture could be any size,
so it might span down three TDs, four TDs, all TDs. So I can't make a
third TR that spans any specific number of TDs. Also, there is a
product description and some reviews of the product that could stretch
those TDs to any length, making the prediction of any ROWSPAN even
more impossible. How do I do this?
I've seen this done on other sites, but their code is so disorganized
that reading it for clues gives me headaches. 17 1671
Liam Gibbs wrote:
Hello everyone,
I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).
You cannot do it with a table, the inset into "reviews" cell. Shouldn't
use a table anyway...can be done with divs and floated image.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
In article
<5b**********************************@a1g2000hsb.g ooglegroups.com>,
Liam Gibbs <li*******@sympatico.cawrote:
I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).
What I need is a table that with two sides: the left is headers, and
the right is information, like so:
Product number: 123456789
Product name: Lawnmower
Colour: Fire engine red
etc. etc.
However, I need to include an inset of the picture of the product in
the right-top corner. However, the product picture could be any size,
so it might span down three TDs, four TDs, all TDs. So I can't make a
third TR that spans any specific number of TDs. Also, there is a
product description and some reviews of the product that could stretch
those TDs to any length, making the prediction of any ROWSPAN even
more impossible. How do I do this?
Will this do you? Shout if you need anything in it explained:
<http://dorayme.890m.com/alt/productTableWithImage.html>
--
dorayme
Will this do you? Shout if you need anything in it explained:
>
<http://dorayme.890m.com/alt/productTableWithImage.html>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>You cannot do it with a table, the inset into "reviews" cell. Shouldn't use a table anyway...can be done with divs and floated image.
Okay. How do you do it in divs?
Liam Gibbs <li*******@sympatico.cawrites:
>Will this do you? Shout if you need anything in it explained:
<http://dorayme.890m.com/alt/productTableWithImage.html>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>>You cannot do it with a table, the inset into "reviews" cell. Shouldn't use a table anyway...can be done with divs and floated image.
Okay. How do you do it in divs?
http://www.bsb.me.uk/testing/products.php might be a starting point.
Most of the issues will be about browser support for CSS so
comp.infosystems. www.authoring.stylesheets is probably a better place
(unless you have questions about the markup, of course).
--
Ben.
Liam Gibbs wrote:
>Will this do you? Shout if you need anything in it explained:
<http://dorayme.890m.com/alt/productTableWithImage.html>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
>You cannot do it with a table, the inset into "reviews" cell. Shouldn't use a table anyway...can be done with divs and floated image.
Okay. How do you do it in divs?
Here are two examples http://www.littleworksstudio.com/tem....20080609.html
Semantically I prefer the second, but current Firefox has a problem with
lists wrapping around a float, but it is fixed in FF3 that is soon to
be release.
You cannot have the grid lines for each section will out a bit of fuss.
You could use HRs after each sub DIV in the first example if you must
have horizontal lines.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
In article
<88**********************************@l64g2000hse. googlegroups.com>,
Liam Gibbs <li*******@sympatico.cawrote:
Will this do you? Shout if you need anything in it explained:
<http://dorayme.890m.com/alt/productTableWithImage.html>
Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though.
You want that the table wraps underneath the image where there is room?
I must have been thinking to save you space by messing about with the
shrink wrapping power of floats.
Come to think of it, I guess my above is no better than a
straightforward extra column with the image aligned to the top.
This may not be so possible with a table given you want the same layout
for all such tables with quite different sized images.
Frankly, I would simply design to bypass the problem. Take a look at the
same url and see what you think now.
<http://dorayme.890m.com/alt/productTableWithImage.html>
--
dorayme
Thanks, everyone. Finally got the problem solved by getting tips from
every example. Thanks!
Jonathan N. Little wrote:
Liam Gibbs wrote:
>> A picture of the layout I need can be found at http://www.altmarvel.net/Liam/WHATINEED.jpg
Shouldn't
use a table anyway...
Why not? It looks like tabular data to me.
--
Berg
now killing all posts from google groups
why not to nest tables ? You can insert a table within a table cell, do
you know?
e.g.
cell1 cell2 cell3
cell1 -table with N rows
cell2 your image
cell3 -table with M rows
Hello everyone,
I'm having a problem with a site I'm building. It uses tables, but
it's really tricky. A picture of the layout I need can be found at http://www.altmarvel.net/Liam/WHATINEED.jpg (sorry for the all-caps in
the filename).
What I need is a table that with two sides: the left is headers, and
the right is information, like so:
Product number: 123456789
Product name: Lawnmower
Colour: Fire engine red
etc. etc.
However, I need to include an inset of the picture of the product in
the right-top corner. However, the product picture could be any size,
so it might span down three TDs, four TDs, all TDs. So I can't make a
third TR that spans any specific number of TDs. Also, there is a
product description and some reviews of the product that could stretch
those TDs to any length, making the prediction of any ROWSPAN even
more impossible. How do I do this?
I've seen this done on other sites, but their code is so disorganized
that reading it for clues gives me headaches.
--
ø¤º°`°º¤ø,¸¸,ø¤º°`°º¤ø,¸¸,ø¤º°`°º¤ø,¸¸,ø¤º°`°º¤ø,¸ ¸,ø¤º°`°º¤ø,¸ http://www.HyperPublish.com Catalogs, CD and sites with 1 tool http://www.EasyWebEditor.com Create a nice Web site with ease http://www.1site.info A professional Website quickly http://www.EBooksWriter.com Discover the artist inside you! http://www.PaperKiller.com Manuals, HTMLHelp, CHM quickly http://www.CdFrontEnd.com Create autorun CD presentations
Visual Vision - http://visualvision.com http://visualvision.it
leader in hypertext authoring [ASP members, ESC members]
VisualVision wrote:
why not to nest tables ? You can insert a table within a table cell, do
you know?
e.g.
cell1 cell2 cell3
cell1 -table with N rows
cell2 your image
cell3 -table with M rows
You missed the point, OP said that the number of rows that the image may
span could vary. Nested tables is no better than spanned rows, just messier!
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
In article <44**************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
OP said that the number of rows that the image may
span could vary.
If one of the rows contains a cell with a review or a description with
lots of lines of text, the image could get floated into this cell, the
horizontal spnned number of cells is likely known in advance. This would
be the simplest cross browser solution with not much wasted space.
--
dorayme
dorayme wrote:
In article <44**************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
>OP said that the number of rows that the image may span could vary.
If one of the rows contains a cell with a review or a description with
lots of lines of text, the image could get floated into this cell, the
horizontal spnned number of cells is likely known in advance. This would
be the simplest cross browser solution with not much wasted space.
Actually I would use a combination TABLE and DIV http://www.littleworksstudio.com/tem....20080611.html
Another way
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
In article <c1***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
dorayme wrote:
In article <44**************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
OP said that the number of rows that the image may
span could vary.
If one of the rows contains a cell with a review or a description with
lots of lines of text, the image could get floated into this cell, the
horizontal spnned number of cells is likely known in advance. This would
be the simplest cross browser solution with not much wasted space.
Actually I would use a combination TABLE and DIV
http://www.littleworksstudio.com/tem....20080611.html
Another way
I would want to see the whole job that needs tackling. If it is scores
of products and all of them had reviews or descriptions of length, I
like simple table idea, with something like the incredibly beautiful:
<http://dorayme.890m.com/alt/productTableWithImage.html>
This could be adapted and could actually be made a bit cleverer with
some server side to make the pic small in a top row and repeated full
size in the review row.
Or we could compromise here. A table with a template set 4 rows for prod
num, col, $ and in stock. Three cols as I have them, with the third col
(containing pic) spanning all these 4 rows. Underneath, two more rows
with the spiel spanning the two right cols. Like so:
<http://dorayme.890m.com/alt/productTableWithImage2.html>
--
dorayme
dorayme wrote:
In article <c1***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
>dorayme wrote:
>>In article <44**************************@NAXS.COM>, "Jonathan N. Little" <lw*****@central.netwrote:
OP said that the number of rows that the image may span could vary. If one of the rows contains a cell with a review or a description with lots of lines of text, the image could get floated into this cell, the horizontal spnned number of cells is likely known in advance. This would be the simplest cross browser solution with not much wasted space.
Actually I would use a combination TABLE and DIV
http://www.littleworksstudio.com/tem....20080611.html Another way
I would want to see the whole job that needs tackling. If it is scores
of products and all of them had reviews or descriptions of length, I
like simple table idea, with something like the incredibly beautiful:
<http://dorayme.890m.com/alt/productTableWithImage.html>
This could be adapted and could actually be made a bit cleverer with
some server side to make the pic small in a top row and repeated full
size in the review row.
Or we could compromise here. A table with a template set 4 rows for prod
num, col, $ and in stock. Three cols as I have them, with the third col
(containing pic) spanning all these 4 rows. Underneath, two more rows
with the spiel spanning the two right cols. Like so:
<http://dorayme.890m.com/alt/productTableWithImage2.html>
All depends on the product image and how much it may vary in height. If
not more than the product details then your simple table is the ticket.
But his mock up image showed a much taller product image and my table &
div combo would allow the image to extend into the description and
review area if necessary. Just depends on the real data...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
In article <5d**************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
dorayme wrote:
In article <c1***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
dorayme wrote: In article <44**************************@NAXS.COM>, "Jonathan N. Little" <lw*****@central.netwrote:
OP said that the number of rows that the image may span could vary. If one of the rows contains a cell with a review or a description with lots of lines of text, the image could get floated into this cell, the horizontal spnned number of cells is likely known in advance. This would be the simplest cross browser solution with not much wasted space.
Actually I would use a combination TABLE and DIV
http://www.littleworksstudio.com/tem....20080611.html
Another way
I would want to see the whole job that needs tackling. If it is scores
of products and all of them had reviews or descriptions of length, I
like simple table idea, with something like the incredibly beautiful:
<http://dorayme.890m.com/alt/productTableWithImage.html>
This could be adapted and could actually be made a bit cleverer with
some server side to make the pic small in a top row and repeated full
size in the review row.
Or we could compromise here. A table with a template set 4 rows for prod
num, col, $ and in stock. Three cols as I have them, with the third col
(containing pic) spanning all these 4 rows. Underneath, two more rows
with the spiel spanning the two right cols. Like so:
<http://dorayme.890m.com/alt/productTableWithImage2.html>
All depends on the product image and how much it may vary in height. If
not more than the product details then your simple table is the ticket.
But his mock up image showed a much taller product image and my table &
div combo would allow the image to extend into the description and
review area if necessary. Just depends on the real data...
Yes, ok, but just one little caveat to your remark "If not more than the
product details": So if a few of them were a little taller, the world
would not cave in and no big wasted space problem would emerge.
Frankly, I would any day trade a bit of *vertical* space on a web page
for functional and design simplicity. Let's call this the "11th Law of
web design"
--
dorayme
dorayme wrote:
Frankly, I would any day trade a bit of *vertical* space on a web page
for functional and design simplicity. Let's call this the "11th Law of
web design"
Oh, we are not in disagreement here. I was just responding to the OP's
request:
"Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though."
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO http://www.LittleWorksStudio.com
In article <ce***************************@NAXS.COM>,
"Jonathan N. Little" <lw*****@central.netwrote:
dorayme wrote:
Frankly, I would any day trade a bit of *vertical* space on a web page
for functional and design simplicity. Let's call this the "11th Law of
web design"
Oh, we are not in disagreement here. I was just responding to the OP's
request:
"Close, but I can't leave the image in its own column like that. Too
much screen space wasted. :( Thanks, though."
Yes, I know you were. So was I.
--
dorayme This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: dracolytch |
last post by:
Good day all,
Ok, I have a pretty tricky problem that I need some help with.
I pass around search query information a fair amount (specifically
WHERE statements). Normally, I just rawurlencode()...
|
by: Bung |
last post by:
Hi,
I have a tricky sql statment I have to write (tricky for me) and I am
stuck. I'm having trouble with the following problem.
Table1 (Column a, Column b, Column c)
Table2 (Column a, Column...
|
by: Angel Cat |
last post by:
I have 2 tables joined together by the IDs, People and the pets they
own
PEOPLE
ID NAME
1 JohnSMith
2 JaneDoe
PETS
ID PET
|
by: Martin |
last post by:
Dear Group
I wonder whether you can push me in a direction on how to design the
following statement. I'm looking for a SELECT with some tricky ORDER
BY.
The database table looks like this:
...
|
by: scott |
last post by:
Hello, I'm trying to find the most optimal way to perform a tricky
query. I'm hoping this is some sort of standard problem that has been
solved before, but I'm not finding anything too useful so...
|
by: Pea |
last post by:
I'm working with a system usage database. I want to filter out
repetitive logins. The query I have retrieves data like this:
USER_DATE USER_TIME1 USER_USERID USER_ACCOUNT...
|
by: Johnny Ljunggren |
last post by:
Hello all
I've got this tricky situation that I would like to solve in SQL, but
don't know how to do. This is the table:
Id = 3, VId = 2, Time1 = 10:00, Time2 = 14:00
Id = 4, VId = 2, Time1 =...
|
by: MorrganMail |
last post by:
Or at least I find it tricky. :-)
Assume we have three tables A, B and C. Table A contains a path and the
distance for traveling that path:
A (PathId, NodeId, Dist (from previous node))
1, 1,...
|
by: Kelii |
last post by:
I've been trying to get this piece to work for a few hours, but have
given up. I hope someone out there can help, I think the issue is
relatively straightforward, but being a novice, I'm stumped....
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |