close ad
Help us test the new Databridge BETA with MySQLi support
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

DataAssist - Product Catalogue - page structure

Thread began 12/15/2012 4:07 pm by thehalpeen319342 | Last modified 12/21/2012 12:44 pm by thehalpeen319342 | 1206 views | 18 replies |

thehalpeen319342

DataAssist - Product Catalogue - page structure

Dear Jason, I’m building a shopping cart. I’m familiarising myself with the Product Catalogue built with 'Data Assist Pages'.

Firstly, I’m finding it difficult to get to get to grips with the structure of the page - ie the div and classes, the tables (what is containing what?) – to such an extent and cannot figure out why there is no margins appearing around the individual products, even though I’ve inserted margins on the CSS called ‘.WADAResultsEntry’

I’ve attached a screenshot of the results page. As I said, I’ve made a few adjustments to the CSS – a red border, 700px width, etc (see attached 'ZIP' for all the adjustments I made).

In addition, I’ve added
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
To the .WADAResultDescription. I’ve added a WADAResultDescription:hover{
text-overflow:inherit;
white-space: wrap; overflow:visible;
background-color: #C90;
width: 120px;
height: 150px;
z-index: 2000; }

After I hover over ‘description’ – the hover gives me an orange box (expected) which the overflow text is supposed to wrap into (not happening), but the text is running to the right (not expected). In addition, the overflowtext is running under the photo (not expected) in the box on the right – (see attached ZIP).

Can you advise where I’m going wrong?


Additional Problem
I'm getting errors on the page when I move to see more records by pressing the navigation arrow '>>' - see attached pdf called 'Results Page error'

Attached Files
Product Results Page.zip
Results Page error.pdf
Sign in to reply to this post

Jason ByrnesWebAssist

Fire Bug is a good tool that you can use for digging into the design of page, see our "Streamline your web development with Firebug" road map article for details:

roadmap_10.php


can you send a link to your results page so i can see it in the browser, troubleshooting css is next to impossible without being able to see it.

as for the error you are getting, make sure you are using the new Data Bridge 1.1.0 update, i believe this is an issue that was addressed in that update.

Sign in to reply to this post

thehalpeen319342

Link: products_results.php

I'll have a look at Firebug.

I've extension 1.0.9 - I'll upgrade.

Sign in to reply to this post

Jason ByrnesWebAssist

  to such an extent and cannot figure out why there is no margins appearing around the individual products,  



padding is not supported on table cells. try editing border-spacing to the #WADAResultsTable selector instead.


white-space: wrap; is not valid, try adding

white-space: normal;

instead.

Sign in to reply to this post

thehalpeen319342

Ok Jason, I've tried both of your suggestion, nut with limited results. The normal wrap is showing me all the text - I only want to see one line for each product when you land on the page and then when you hover over the line of text it unwraps. The hover bit now is working.

I've adjusted the margins around via #WADAResultsTable - but I'm not getting a margin between each of the red boxes that surrounds each product.

Sign in to reply to this post

Jason ByrnesWebAssist

it doesn't look like the changes where uploaded?
it's imposible to trouble shoot css issues without being able to see the problem.

Sign in to reply to this post

thehalpeen319342

Jason, I have now uploaded the revised page with the margins adjusted in #WADAResultsTable.

Sign in to reply to this post

Jason ByrnesWebAssist

you changed the whitespace attribute in the .WADAResultDescription selector, my suggestion was to change it in the .WADAResultDescription:hover selector.

in the .WADAResultDescription selector keep white-space: nowrap;

in the .WADAResultDescription:hover selector use white-space: normal;

you had been using white-space: wrap; which is not valid.

i dont seer that you have added the border-spacing the #WADAResultsTable selector that i had suggested:

#WADAResultsTable {
margin: 5px;
padding: 20px;
}



change that to:

#WADAResultsTable {
margin: 5px;
padding: 20px;
border-spacing: 5px;
}
Sign in to reply to this post

thehalpeen319342

Jason, great, that worked. I need to review the process again to see how the page was produced - what divs controlled the various design/layout on the page. I've never seen that css element before called ' border-spacing:' - it's not part of the elements in Dreamwevers Css pop-up editor. It's a little confusing, in that the '.WADAResultsEntry' is controlling the boder style, but the '#WADAResultsTable' controlls the space on the outside each border.

There is one little issue - when I hover over the description, it expands (perfect), but the pictures in the other products move down (must be aligned centre). Can I align everything so that it align to the top (I need to know which id/class controls this?), so that the border is the only thing that moves in these other products when you hover - see attached pdf

I'm still left with the problem that I posted on my first tag:

Additional Problem
I'm getting errors on the page when I move to see more records by pressing the navigation arrow '>>' - see attached pdf called 'Results Page error'

Note: I've uploaded the new product results page

Sign in to reply to this post

Jason ByrnesWebAssist

add vertical-align: top; to the .WADAResultsEntry selector

send a copy of the results page so i can look into the other problem.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...