close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Making changes to CSS on products_detail.php page

Thread began 7/07/2015 2:35 pm by Charles | Last modified 1/27/2016 10:29 pm by Ray Borduin | 2586 views | 11 replies |

Charles

Making changes to CSS on products_detail.php page

I successfully generated products_results and products_detail pages using DA. I've made manual changes to the /style section of those pages to make them look better and work in the design - mostly with good results. But I can't figure out how to move the right side black border to the left so it lines up with the navigation vertically and how to create some space between the top Nav and the Details container. Can you point me to the right place in the page code to make those adjustments?
You can see the page at http://outofchaos.net/gsc/www/products_detail.php?ID=4
and the products_detail.php file is attached. Thank you!

Attached Files
products_detail.php
Sign in to reply to this post

Ray BorduinWebAssist

First it looks like you have to add:

#Details_Basic_Default_ProgressWrapper {
clear: both;
}
#mainnav {
float:right;
}
#Details {
margin-right:0;
}


Then update your footer class to use: width:auto; (main.css line 35)

Sign in to reply to this post
Did this help? Tips are appreciated...

Charles

Took your suggestions and it worked perfectly and looks great! Thank you. This was extremely helpful.
However, just noticed now the Footer is blown out to the right on the non-product pages, Looks fine on product_details and product_results but check out http://outofchaos.net/gsc/www/index2.php So I changed the main.css footer class back to '893' from 'auto' and it's still blown out to the right - weird. Was not misaligned before. Scratching my head. What do you suggest?

Then I realized I had the same initial right-alignment issue with the products_results.php page. So I tried using the same /style code there you recommended above. It actually corrected and vertically-aligned the right side of the box - good. See http://outofchaos.net/gsc/www/products_results.php?Category_ID=32
But I'd like the left side of the Results container to vertically align with the left side of the logo the way it now does on the updated Details page (http://outofchaos.net/gsc/www/products_detail.php?ID=4 ). Can you suggest a code adjustment to make that work? Attached is products_results.php file.
Thank you again!

Attached Files
products_results.php
Sign in to reply to this post

Ray BorduinWebAssist

It looks like you need:

#Results_Compact_Default_ProgressResultsWrapper {
clear:both;
}



then you just need to add the auto width back to the footer.

Sign in to reply to this post
Did this help? Tips are appreciated...

Charles

That worked - great!
Still had the problem that the change to 'width: auto' in the main.css expanded the footer beyond the frame on all but the product pages, So I restored my old main.css and that fixed the alignment on all the non-product pages but shrunk the footer too far on the product pages. So I added the' width:auto' to the style section of the product pages only - not main.css and voila - all pages are aligned now.
Now the only small issue I have left on this: some weird stray stuff at the top left(under the logo) on http://outofchaos.net/gsc/www/products_results.php?Category_ID=32 - see attached where I highlight it. It's nice and clean on http://outofchaos.net/gsc/www/products_detail.php?ID=4 which is how I'd like it to be on the products_results.php
Can you spot what could be causing that?

Thank you again - your support has been awesome.

Attached Files
Products-reults-strays-7-9-15.pdf
Sign in to reply to this post

Ray BorduinWebAssist

Add this to your CSS:

ul {
list-style: none;
}

Sign in to reply to this post
Did this help? Tips are appreciated...

Charles

Perfect. That worked. Thank you.

Sign in to reply to this post

Charles

Probably simple but I'm stuck. Got the products_detail page looking just the way it should except for top left of the product container is overlapped by the logo. See http://outofchaos.net/gsc/www/products_detail.php?ID=2
What change to /style would you suggest so we can move the product container down and clear of the logo?
Thank you.

Sign in to reply to this post

Ray BorduinWebAssist

I'd just add a margin to the div to push it down.

#Details_Basic_Default_ProgressWrapper {
margin-top: 72px;
}

Sign in to reply to this post
Did this help? Tips are appreciated...

Charles

That worked just fine. Thank you!

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...