Another Adventure Into Web Design
Dreameweaver Widget ClearBox-LightBox and CSS
I built a website for a tattoo shop located here in Pensacola FL for Dirty South Ink that I ran into design issues on. You can view the functioning ClearBox – LightBox that I will be writing about at their website DirthSouthInk.com. The specific pages are here and here.
Find out where your website ranks with your chosen keywords in Google, Yahoo and Bing.
14 day free trial. No credit card required.
I ran into a second issue using the ClearBox-LightBox, widget for Dreamweaver. To see the other issue click here.
Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership
Recommended Dreamweaver Courses
Master Dreamweaver the fast and easy way!
Building Websites with Dreamweaver CS6
Learn Adobe Dreamweaver CC – For Absolute Beginners
Image Alignment Mess
This issue was I had created a container to place the light box into. The container and all the elements, jquery, javascript, css, html etc are automatically generated by the widget.
The issue I ran into was when placing the image thumbnails into the area designated by clear box-lightbox, the images would not stack right. Here are 2 examples:
First Half of the Fix and Dreamweaver’s CSS Rule Editor
The container I made was smaller than the container that lightbox made. Also Lightbox didn’t specify any image size in the CSS. The actual clearbox editor kind of sucks so you will need to go to the .container CSS that clearbox-lightbox made and adjust the box container size to no bigger than your container size. Dreamweaver has a CSS rule definition editor that makes this easy: My container was 452px. The clearbox container was 500px. So I originally made clearbox container the same width and eventually reduced that. I’ll explain the extra reduction in a moment.
Premium WooCommerce Extensions, WordPress Plugins & Themes Only $10 or Free with Membership
New Problem Image Overflow
But I created an overflow problem when I did this.
ClearBox-LightBox Doesn’t Include CSS Rules for Image Sizing
Then I had to tell clearbox what size I needed for the thumbnail images. Each thumbnail is placed in its own container as well between. Don’t forget to add for padding and margins. I forgot to at first. Unfortunately because clearbox didn’t generate a CSS rule for the html for the thumbnail I had to insert it into the .item a img CSS rule. I learned this on Adobe’s site as well. Dreamweaver will allow to to go directly to the code by right clicking on the CSS rule in the navigation pane and selecting “go to source code. So I inserted:
width: 150px;
height: 160px;
Left Aligned When I Wanted Center Aligned Issue
Well that fixed the screwed up alignment problem, but caused a new problem. All images lined up in two rows to the left and I couldn’t figure out how to make both rows line up in the center of my container. The only solution I had tried that I found online lined them up in a single row. I need both rows. The fix was simple.
The Center Align Fix
I reduced the width of the clearbox container even more. As you will see, I reduced it to 336 px which was still wide enough for my images. The container centered automatically when I did this. Problem solved!
(1421)
