PDA

View Full Version : Image banks


paul-chambers
08-22-2012, 03:55 PM
Hi,

Just joined the forum so hopefully I will be able to get a few handy tips.

I am currently deisgning a site which has bucket loads of images, 2000 approx and I'm using lightbox to display each individual pic when selected, anyway, the image box/table is 4 cols by 20 rows, each containing thumbnails linked to the original image and when importing the thumbs I find I am having to adjust each thumb to fill each image box either by decreasing width and increasing height. Is there a way to 'snap' the pictures inserted to the width of the image table. The table sits inside as apDIV.

thanks

gentleone
08-22-2012, 04:23 PM
Welcome to the forum, Paul!

Not sure why you even need to adjust the width and height of the thumbs and if I read table and apDIV i get the shiver ;)

Is the website online somewhere... can you post a link?

paul-chambers
08-22-2012, 04:34 PM
HI gentleone, site is not online as yet, only local on my pc. The image table isn't looking to shabby to be honest, it would just make life hell of a lot easier if they snapped to the width of the table, thumbs are 150/112 pxs, the original jpegs are not all the same size so the software has just downed the size of the originals using the same format for all the pics if that makes sense. Is there an easier method you would reccomend?

gentleone
08-22-2012, 04:57 PM
...snapped to the width of the table,...
I assume you mean table-cell?

...thumbs are 150/112 pxs, the original jpegs are not all the same size so the software has just downed the size of the originals using the same format for all the pics if that makes sense.
No, it doesn't make sense to me at all :)
If the thumbs are all 150/112 px, then the container (in your case the non semantic table-cell) which holds them will just stretch along with the thumbs if you had not defined a width and height for the table-cells.
Which software?
Originals? You mean the bigger images?
What do you mean with 'format'?

Is there an easier method you would recommend?
Yes, don't use tables and absolute positioned divs (APdivs). If you would have used a div tag that holds all the thumbs you only had to position them with some margin.


<div class="thumbs">
<img src="photos/thumb-01" width="150" height="112" alt="" />
<img src="photos/thumb-02" width="150" height="112" alt="" />
<img src="photos/thumb-03" width="150" height="112" alt="" />
<img src="photos/thumb-04" width="150" height="112" alt="" />
<img src="photos/thumb-05" width="150" height="112" alt="" />
<img src="photos/thumb-06" width="150" height="112" alt="" />
</div>


This will space them out a bit from each other.
CSS:
.thumbs img { margin: 10px }

paul-chambers
08-22-2012, 05:05 PM
Originals are the original jpeg images that I have linked to the thumbs.

The software I used was Easy Thumbnails which can convert batches of (original) jpegs into thumbs.

When I say format, what I mean is that some images are full screen and others are tall and thin with a border on either side.

So, if I just create a div on the page and insert the above code, relative to my root folder (images) of course, this should do the trick instead of using a table of rows/columns and drag/dropping images into the table?

gentleone
08-22-2012, 05:15 PM
Well at least it's easier to maintain and to update, but it's just an example to show you how simple it can be instead of using a table with table rows and table cells as a container. Tables are meant for tabular data and not for a thumbnail gallery.

Do you work in design voew?

paul-chambers
08-22-2012, 05:20 PM
yes I always work in design view, the reason I chose the table was to give the page a structured view with a nice border etc. Do I need to apply the margin to each individual thumbnail in the code?

domedia
08-22-2012, 05:21 PM
That's what the good man said, it takes but a few seconds to try out :)

paul-chambers
08-22-2012, 05:25 PM
Each image also has to be linked to it's original, this will show in lightbox

gentleone
08-22-2012, 05:40 PM
...the reason I chose the table was to give the page a structured view with a nice border etc.
To give structure to your page that's where div tags are for. Div stands for division and you can give them a border too. :) All you need to learn is how to position them where you want them with CSS. This is (still) mainly a combination of using the CSS properties: position, margin, padding and float.

paul-chambers
08-22-2012, 05:46 PM
Thanks again, I really appreciate your help, I have created a div and I am inserting the images with the css rule of margin 10px, it's a pity I couldn't send you a screendump of how it looks. I have 1 div which up till now includes 8 images, thumbnails look messy and I am still having to resize each one so that they look 'in-line' from row to row

gentleone
08-22-2012, 05:54 PM
Why do you need to resize them? You said they are all the same size (150px by 112px). Or do you mean it looks messy, because it's mix of thumbs in portrait and landscape?

paul-chambers
08-22-2012, 05:59 PM
Why do you need to resize them? You said they are all the same size (150px by 112px). Or do you mean it looks messy, because it's mix of thumbs in portrait and landscape?

Exactly, but maybe I just have to live with it, not a lot I can do about that really to be honest, may not look so bad in the end.

paul-chambers
08-22-2012, 06:11 PM
this is a link to what I am looking to do:

http://www.dutchimports.co.uk/category/animals.htm

gentleone
08-22-2012, 06:12 PM
Yes, I also find a mix of portrait and landscape thumbs ugly. What I do in these cases is make a square crop of the image and use that as a thumb. You will have then the exact same size of thumbs which looks way much better. I mean if it's a thumb it doesn't really matter much. They will see the original portrait or landscape image when they click on the thumb.

But you have 2000 photos and doing this manually would be crazy. I don't think this is possible with that piece of software you've used to do it all in once (the crop), but it is possible with an automated batch processing in Photoshop.

http://graphicssoft.about.com/od/photoshop/ss/basicaction.htm

paul-chambers
08-22-2012, 06:25 PM
I agree, it does not look nice at all but that is the style (menu) they were looking for, I was looking for an easier way to do it eg snapping the pics to a table inside a div tag to cut out the resizing of the images (portrait/landscape) to make it better!

I'm now going to shoot the person who took the pics :evil: lol

I will mess about with the settings that you have mentioned, I have now created these.

One final question, can I apply a CSS rule to all the thumbs in a div, do I just ctrl select them all and apply the rule?

thanks

gentleone
08-22-2012, 06:39 PM
It's also possible to create thumbnails on the fly server-side (with PHP).
http://phpthumb.sourceforge.net/
But this would be a bit too much of a learning curve for you :)

can I apply a CSS rule to all the thumbs in a div, do I just ctrl select them all and apply the rule?
I don't know how that works in design view. It's been ages since i've been there :-) Just try it out. There's always ctrl-z to the rescue.

paul-chambers
08-22-2012, 06:49 PM
ctrl z...best invention since slice bread !

I will try it out, it works with centering etc so should work with the application of css rules (he says with confidence)

Well many thanks for your help on my question, it is really appreciated, btw I had a look at your link...very impressive, love the look of it!!!

I am implementing your suggestions on the site as we speak.

Regards

Paul

gentleone
08-22-2012, 07:37 PM
You're welcome, Paul... and thanks for the compliments about my site. Just leave the tables for what they are meant for and keep on learning, trying, make mistakes, try again... it's all part of the process.

paul-chambers
08-23-2012, 10:29 AM
Now I just need to insert the text for the images under each thumb?

gentleone
08-23-2012, 11:45 AM
Then you need to change the HTML a bit and use an unordered list so that list items serve as container. Something like this:

<div class="thumbs">

<ul>

<li>

<img src="photos/thumb-01" width="150" height="112" alt="" />

<p>caption text 01</p>

</li>
<li>

<img src="photos/thumb-02" width="150" height="112" alt="" />

<p>caption text 02</p>

</li>
<li>

<img src="photos/thumb-03" width="150" height="112" alt="" />

<p>caption text 03</p>

</li>
<li>

<img src="photos/thumb-04" width="150" height="112" alt="" />

<p>caption text 04</p>

</li>
<li>

<img src="photos/thumb-05" width="150" height="112" alt="" />

<p>caption text 05</p>

</li>
<li>

<img src="photos/thumb-06" width="150" height="112" alt="" />

<p>caption text 06</p>

</li>
<li>

<img src="photos/thumb-07" width="150" height="112" alt="" />

<p>caption text 07</p>

</li>
<li>

<img src="photos/thumb-08" width="150" height="112" alt="" />

<p>caption text 08</p>

</li>

</ul>

</div>

In the CSS you need to give the li a float: left or even better a display: inline-block and move the margin you had on the img thumb to the CSS for the li, but there are a host of other things you might have to do in the CSS to align things properly.

To be honest I think you really need to take some steps back and start learning the basics of HTML & CSS, because otherwise you just copy/paste things without even knowing what everything means and does.
You need to understand the normal flow of a document, the CSS box modal, CSS positioning and the difference between inline and block-level elements. If you get these, then it will be a lot easier for you to understand what an element does by default when you insert it in the HTML.

I know you only work in design view, but just start to work in split view and look to the code what's changing when you insert an element.

The basics of HTML and CSS is really not that difficult and a good place to start with it is HTML dog.
http://htmldog.com/

paul-chambers
08-25-2012, 10:35 AM
Thanks for the reply, I am just inserting the descriptions of each from within the lightbox caption options as the images are pretty self explanotary really so not going to double my work load. I have applied a border css style and am having to add this to each individual image from within the div, I have tried to select multiple images but dosen't seem to like that, any ideas?

gentleone
08-25-2012, 01:29 PM
Sorry, but i can't help you with how things goes in design view. I told you it's been ages (DW MX2004) since I've been there. Perhaps someone else can help you with that.

Basically you need to add something like this to your CSS. This will give all your thumbnail images a solid white border of 5px width.

.thumbs img { border: 5px solid #FFF }

paul-chambers
08-25-2012, 01:34 PM
Thanks gentleone, I have added a nice effect to the borders of the thumbs already, mousehover with a delay of 0.5 sec and glows a nice yellow from grey.

As always, I appreciate your help.

paul-chambers
08-25-2012, 01:51 PM
I did take your advice about split mode so now amending the code manually which makes thing a lot faster.

gentleone
08-25-2012, 04:15 PM
I did take your advice about split mode so now amending the code manually which makes thing a lot faster.
Good stuff! I'm glad to hear that. Keep on going with that, learn HTML & CSS along the way and before you know it, you're doing everything in code view. ;).

paul-chambers
09-05-2012, 02:14 PM
gentleone, getting to grips with things now. Site is almost complete, just a few things I need to do.

I know you gave me an example of how to put a caption under a thumb, here is the current code for 1 thumbnail with lightbox refs also.

Where would I insert the text field or the code for the caption?


<p class="thumbsmargin"><a href="Site images/Statues/855.jpg" title="SN: 855
AB: 18
Qty Per Box: 1
Approx. Size:
Description:
Statue" rel="lightbox[statues]"><img src="Site images/Statues - thumbs/tn_855.jpg" width="130" height="112" class="thumbsborder"/></p>

paul-chambers
09-05-2012, 02:24 PM
forgot to add, this is an image intensive sit, has 4 images along the top

image 1 image 2 image 3 image 4
(caption1) (caption2) (Caption3) (caption4)

image 5 image 6 image 7 image 8

and so on. Each page has around 28 images on average

gentleone
09-05-2012, 02:45 PM
I don't know how the rest of your HTML is, but if you want the thumb with a caption underneath then they both need to be placed in an element that serves as a container. If you take a look at the previous example I gave you there I used the 'li' as container.

Why did you placed the thumbs in a p tag? Images are not paragraphs. If you want to layout a grid of thumbnails (w/ captions if you like), then a n unordered list (ul tag) like in my example is the best option you would have.

EDIT: There is actually a better element to use but it's not officially a standard yet (the figure tag and the figcaption tag), but now I think you could also use a definition list (dl tag). You can have more captions with that such as price or something.

gentleone
09-05-2012, 02:50 PM
give me some time and I will make an example for you with your lightbox thumbs.

gentleone
09-06-2012, 01:23 AM
okay... here's a thumbnail gallery with caption and description (if needed... otherwise delete the dd's). If you have questions, just let me know.

Example: http://dabblet.com/gist/3638399

The CSS (w/ comments):

/* Agressive CSS reset just for demostration purpose only.
It's recommended to use normalize.css as reset
(http://necolas.github.com/normalize.css/)
*/
* {
margin: 0;
padding: 0}
/* end CSS reset */

body {
font-family: helvetica, arial, serif;
font-size: 100% /* = 16px = 1em */}

#products {
width: 636px;
margin: 0 auto 20px;
padding: 20px 20px 0 20px;
background: #eee;
overflow: hidden;
/* 'display: inline-block' adds aproximately 4px space after the element you've set it on.
In our case .item. This is a natural behavior, cause it's now an inline element and
therefore it adds the letter-spacing after the element. So we have to get rid of that
space somehow. There are a few ways to do that and I use setting a negative letter-spacing
of -.25em. Why -.25em and not -4px? Cause you should set all your font-sizes in em :)
*/
letter-spacing: -.25em /* = -4px */}

.item {
display: inline-block;

/* The following two properties are needed to bring 'inline-block' support to IE7. */
*display: inline;
*zoom: 1;
font-size: 1em; /* = 16px (1 x 16px) */
/* setting the letter-spacing back to normal otherwise it would inherit the negative
letter-spacing from the parent (#products) which would give squeezed unreadable text
*/
letter-spacing: normal;
vertical-align: top;
border: 1px solid #ccc;
background-color: #e5e5e5;
width: 122px;
padding: 10px;
margin: 0 20px 20px 0}

/* The following nth-child pseudo selector is a CSS3 selector which doesn't work in IE8 and
below. If you want support for these older browsers then you will need a javascript
polyfill such as selectivizr (http://selectivizr.com/). IE9 and the other browsers do
support CSS3 selectors.
So... what I do below is I remove the right margin from every fourth item (4, 8, 12, 16, etc.)
otherwise the space after the 4th items would be 40px.
Of course you could give every fourth item an extra class name and use that to reset the
right margin to '0' then you will have support all the way down to IE6 too without loading
a javascript polyfill, but this is more CMS (Content Management System) proof :)
You can't expect from your clients to add class names to your tags/elements. Even with the
help of that CMS.
*/
.item:nth-child(4n+4) { margin-right: 0 }

.item dt {
font-size: 1.25em; /* = 20px (1.25 x 16px) */
font-weight: bold;
line-height: 1.5em /* = 24px (1.5 x 16px) */ }

.item dt img { border: 1px solid #000 }

.item dd { line-height: 1.5em /* = 24px (1.5 x 16px) */ }

The HTML:

<body>

<div id="products">

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>A very long description here to test multiple lines. If I had used 'float: left" to align the items horizontally this long description would have broken the layout.</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Using 'display: inline-block' instead, we don't have that problem, but it needs some extra properties as well for it to work and to support IE7.</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>
<dl class="item">

<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>

</dl>

</div>

</body>

paul-chambers
09-07-2012, 11:37 AM
HI again, with regards to the <p> tag, i just created the div tag and dropped in the images, applied the border css rule and resized all images, Not sure why it has stuck them in as a paragraph. I have copied some more code, maybe the way the div has been set up ?

</div>
<div id="imagecontain">
<p class="thumbsmargin">&nbsp;</p>
<p class="thumbsmargin"><img src="Site images/misc - thumbs/tn_2357.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2345.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2279.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2278.JPG" width="130" height="112" class="thumbsborder" /></p>
<p class="thumbsmargin"><img src="Site images/misc - thumbs/tn_2241.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2184.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2181.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2175.JPG" width="130" height="112" class="thumbsborder" /></p>
<p><img src="Site images/misc - thumbs/tn_2172.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2169.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2168.JPG" width="130" height="112" class="thumbsborder" /> <img src="Site images/misc - thumbs/tn_2167.JPG" width="130" height="112" class="thumbsborder" /></p>

paul-chambers
09-07-2012, 11:48 AM
I have placed 4 images in a row x 7 columns, it has grouped each one in a <p> tag, not sure why? Everything is working as it should though, all looks nice and neat etc but just needs a little caption under each so does that mean I'd have to redo the code.

Sorry for all the questions, still learning.

Thanks again for responding

gentleone
09-07-2012, 01:07 PM
...it has grouped each one in a <p> tag, not sure why?
Probably because you gave a hard return in design view and started to insert your images.

Everything is working as it should though, all looks nice and neat etc...
At the front maybe, but your source is messy and non-semantic. For instance an id of 'imagecontain' and a class name of 'thumbsmargin' say perhaps something visually, but it doesn't say anything about the content. Take my example; the id of the container i called 'products' and the class name for the container that holds the thumbs, title and description, I called 'item'. And I used a definition list (dl) as element, because the image, title and description are related to each other, so its perfectly okay to use it for this purpose. Why is semantics so important? I'd recommend to read this:
http://www.vanseodesign.com/web-design/semantic-html/

...but just needs a little caption under each so does that mean I'd have to redo the code.
I could probably add some tag to your code and give some css so that you will have a caption, but then I would build upon the messy code and teach you bad practices. So yes... I want you to recode the thumbnail gallery and I gave you a semantic example on which you can build upon further. Just copy/paste it... I gave comments to explain what certain CSS properties do and it will definitely need some adjustments to fit in your layout, but I can help you with that as long as I know how your complete HTML and CSS is. If you can't put it online somewhere, you can use Dropbox for that. I explained another member how to do this.
http://www.dreamweaverclub.com/forum/showpost.php?p=205976&postcount=4

Sorry for all the questions, still learning.
No props and I know you're still learning and all this might be an overkill of information, but I just want to teach you stuff the right way, so that you will get better and develop conform web standards.

paul-chambers
09-07-2012, 02:30 PM
https://dl.dropbox.com/u/103611791/animal1.html

see if this works, just a sample page off the site

gentleone
09-07-2012, 05:28 PM
https://dl.dropbox.com/u/103611791/animal1.html

see if this works, just a sample page off the site
Now, that works beautifully isn't it? :)

While I was looking at the page and it's code I thought... "What the heck did I started?" But... I said that I will help you, so I will ;)

Before we even can get to the thumbs there has to change a lot.
The layout like you have now is not going to work. You have probably a nice monitor with some high resolution and it fits probably all nicely, but you make this website not only for your screen resolution, you make it for a lot off different screen resolutions. Not to mention mobile devices.
I for instance have a screen resolution width of 1440px, so I have this ugly horizontal scrollbar at the bottom, cause the layout is to wide for my screen.
So you will have to reduce the width. What a common wide to develop for is... well there is actually no common wide anymore. Fixed width websites is a thing of the past, the web of today is fluid (phone, tablet, desktop and TV) and therefore your website actually needs to be fluid as well.

But... you're a newbie, so lets stick to fixed widths. Defining a width for your layout depends on the target audience of the website/business. I see it's an antique website, so you probably might have quite some elderly users (tell me if I'm wrong) with old systems with 1024px/768px monitors, so I say the layout should not be wider as 960px.

Secondly you don't build layouts with APdivs. You use the normal flow of a HTML document where possible. So instead of inserting APdivs you insert div tags and position them with floats, margin and/or padding inside a wrapper div of 960px wide.

So we have to fix this first, because I don't think your client will be happy with a website like this. To be honest you're sooooo not ready to do clients work yet.

paul-chambers
09-07-2012, 06:49 PM
Well I thank you for the advice and your honesty, it is appreciated and I'm always learning.

Yes the site is an antique site, imports mainly, mixed ages really with regards to target audience.

I used the 'draw ap div' to insert the div where I wanted it on the page via design view and dropped in the images and applied the css rule (thumbsborder) to each one. Left of the page I have the spry menu, middle of page I have a description of the business and to the right I have the image banks, this I have applied to all pages, 66 of them :confused: each linked to their original jpeg image and applied the lightbox feature. Each page duplicated from the original which I thought looked ok, then updated with new images to reflect the different items in each menu or section.

It looks good as I previoulsly said but you will know better than I with regards to the background coding and layout etc.

I will save a page as a test page and apply the changes that you suggest.

Overall page width and how to change it is my 1st question as I do have a 15" monitor

'You use the normal flow of a HTML document where possible. So instead of inserting APdivs you insert div tags and position them with floats, margin and/or padding inside a wrapper div of 960px wide.'

With regards to padding and placing a Div within a page (without using draw ap div), that would be my 2nd question.

Apologies for all my questions but your comments are appreciated.

domedia
09-07-2012, 07:12 PM
paul to be honest, you might want to just pick up a book on web standards. If the basics are not right, it's going to limit everything that derives from it.

gentleone
09-08-2012, 12:14 PM
I used the 'draw ap div' to insert the div where I wanted it on the page via design view...
Yes, I thought you might have done something like that, but that's not the way you should insert a div. Just forget this feature... you won't need that anymore. We don't draw websites :)
If you want to insert a div in design view, you choose in the menu:
insert > layout objects > div tag

If you do that in a blank document and give it the following CSS styles, you will have your wrapper div of 960px wide centered horizontally of the page to hold your content.


<body>

<div id="wrapper">

<!-- your websites' content goes in here -->

</div>

</body>

CSS:

body {
margin: 0 /* reset the default margin set by the browser */
}

#wrapper {
width: 960px;
margin: 0 auto; /* trick to center elements horizontally */
overflow: hidden;
/* we hardly set heights to elements, cause it's recommended
to let the content of an element dictate the height. If you want
to set borders or background colors to a height-less element
you will need the 'overflow: hidden' trick. We also use it to
clear floats.
*/
}

Even if you work in design view you will need to understand the basics of HTML and CSS. If you don't know them, you will have a hard time.
Being a web designer means you are constantly learning... it will never stop. Browser vendors are adding new features and the HTML & CSS specs are changing.

As a newbie I'd recommend to start with the beginners tutorials of HTML Dog (http://htmldog.com/guides/). It's 'code', but this is where you have to be eventually anyways. Building websites only through DW design view is very limited unless you want to keep on pointing and clicking through numerous menu's and dialogs just to get something done. Coding by hand from the start is waaaaaaaay much quicker and you will have full control over what you're doing.

paul-chambers
09-08-2012, 06:16 PM
Hi,

Yes you gave me the link for HTMLdog which I have been looking at and which is pretty good to be honest and it is where I want to be eventually, coding, not design mode, it is easier and much faster.

Your comments were a wake up call really to myself, thought that the site looks great (which it does, clients also happy with it) at the front end but it is the code and the general way I have set it up that I will need to change if I am to have any success. It is a learning curve for me as it is for everybody but you live and learn by errors made, the only way to learn!

Paul

gentleone
09-08-2012, 07:17 PM
...clients also happy with it
Until he calls you up and say: "Hey Paul, I'm here at my mothers showing her my new website on her pretty old computer and half of the website is missing. I only can see it if I use the horizontal scrollbar which I actually don't want there. Can you fix that?"

Oh well... maybe he/she doesn't, but it's tricky :)

Just keep on reading and practicing with the HTML dog tutorials. It's a good place to start.

paul-chambers
09-09-2012, 08:18 AM
Well I have a lot of re-work to do so that it works the way it's supposed to work! I have a couple of tabs to add to the site and will do it your way with the wrapper div etc. Once I have done that I will post the page on dropbox and you can have at look at it. I will then need to apply the same style to the rest of the site. Re HTMl dog, yes I have been reading up on it.


Paul

gentleone
09-09-2012, 01:01 PM
I don't know how deep HTML dog goes into the float property for layouts, then you can read this article on CSS-Tricks.
http://css-tricks.com/all-about-floats/

Using floats for layouts is actually a hack, but you will find out for yourself if you have to create complex layouts. I myself use more and more 'display: inline-block' cause support for IE6 is pretty much gone. You're still working in the normal flow of a document like this, so elements below gets pushed down the natural way.

When the CSS3 Flexible Box Layout Module becomes a standard (which is still going to take a couple of years), we finally have, after all these years of the Internet, a robust tool to lay out web pages. But we need then also a JavaScript polyfill such as http://flexiejs.com/ to support IE9 and below (http://caniuse.com/#feat=flexbox).

mediaad
09-10-2012, 01:29 AM
Thanks!!!!!!!!!!!!!!!!!!!!!!!!!

paul-chambers
09-10-2012, 12:34 PM
Re-arranging pages on the site so that it fits on the page. Removing the vertical spry to a horizontal and resizing page by page, also resized the thumbs so they are smaller

Anybody had any problem with HTML dog, those that use it, dosen't seem to be working so don't know if site is down?

paul-chambers
09-10-2012, 04:37 PM
If I change the width to % instead of a pixel value in the CSS of the container div, would this solve the problem of screen resolution eg if i set width to 100% and leave the height value as it was in pixels?

gentleone
09-10-2012, 04:58 PM
If I change the width to % instead of a pixel value in the CSS of the container div, would this solve the problem of screen resolution...
Yes, flexible layouts in percentages is actually the way to create layouts these days, but it's much more difficult to work with then a pixel based layout. You want from drawing APdivs to flexible layouts? :) In my opinion this would be too much for you. Not only your layout (and margins) needs to be in percentages, but also your images (through css) if you want the best result. And there is a lot more to tackle.

...and leave the height value as it was in pixels?
The wrapper div don't need a height value. A lot of elements in your layout don't need height values. Like I said let the content and its margin and padding dictate the height.
If you set a height on your wrapper div and on another page the content is less then you will have this large gap underneath that page. Unless you give the wrapper div for that page another height value in your CSS to lose that gap. On another page you will have to do it again different, so as you see this is cumbersome work. If you don't set heights, you don't have this problem.

paul-chambers
09-10-2012, 05:31 PM
Ok, I have the div, I will take out the height values in there and the rest should hopefully take care of itself as you said.

I did mess around with the general layout of a page, changing widths of the current divs eg content, to make the page smaller so I decided to make the width 100% and left the height as it was (in pixels) which I will now remove, this will aid the natural flow of the page which I understand.

I decided on the width of 100% of the image container div hopefully for a quick win on the resolution problem which you pointed out, given the amount of pages that I have.

At this point I am not to worried about the captions on thumbs, I can remedy this at a later date as each menu is self explanatory really.

Once the layout is as it should be and the code is tidied up then I will sort out captions. Important things first.

Thanks

paul-chambers
09-18-2012, 04:56 PM
I have gotten my pages down to roughly 960px wide and applied external css to each layout. For some reason I have a css class attached to one div on one page and won't let me change it. The thumbsmargin style that has been applied to individual thumbs has actually attached itself to the div, changing it manually to 'none' does not work as it reverts back to class thumbsmargin after I try to change it. Any ideas as to why this would happen and how I can change this?

Forgot to add that the borders do not show around the thumbs when in live view but in all other screens they do except one.

gentleone
09-20-2012, 01:38 PM
Is this all happening in design view, Paul? If so, I can't help you with that.

paul-chambers
09-20-2012, 03:05 PM
I have checked the code and the class id is not there.
I have changed class id out of curiosity and it does change it in the code on the page I'm having the problem with.

In design view it has it listed as having class="thumbsmargin" attached to the div but in the actual code I have <div id="birdbathcontain">

Hmm I will keep on looking to see if I can fix it.

paul-chambers
09-25-2012, 01:45 PM
hmmm still not found the culprit on above. Site is more or less complete but I have a problem with spry in IE, when site is opened to test in IE the browser asks to show blocked content (lightbox script) and I say yes, it then dumps the spry menu across the top of the page and behind the div?

gentleone
09-25-2012, 02:13 PM
Paul, upload everything to Dropbox and share the link.

paul-chambers
09-26-2012, 11:37 AM
here is the code for the spry css, there are no submenus:

ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: small;
position: static;
text-align: left;
cursor: pointer;
background-color: #FFFF99;
background-image: none;
color: rgba(255,255,153,1);
-moz-border-end-color: rgba(255,255,153,1);
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
z-index: 1020;
cursor: default;
width: auto;
left: -1000em;
top: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
width: 8.2em;
}

/************************************************** *****************************

DESIGN INFORMATION: describes color scheme, borders, fonts

************************************************** *****************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
border: 1px solid #CCC;
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #FF9;
padding: 0.5em 0.75em;
color: #336;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #FF9;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
-moz-border-end-color: rgba(51,153,255,1);
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #FF9;
color: #000;
}

/************************************************** *****************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

************************************************** *****************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}

/************************************************** *****************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

************************************************** *****************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

paul-chambers
09-26-2012, 11:51 AM
White space errors upon checking browser compatibility

</div>
<h1 align="left">&nbsp; </h1>
<ul id="MenuBar" class="MenuBarVertical">
<li> <a href="index.html" target="_self" class="MenuBarActive">Home page</a> </li>
<li> <span class="MenuBarActive"><a href="animals.html" target="_self">Animals</a></span> </li>
<li> <span class="MenuBarActive"><a href="decorsmalls.html" target="_self" class="MenuBarActive">decor small</a></span> </li>
<li> <span class="MenuBarActive"><a href="gardenfurniture.html" target="_self">Garden Furniture</a></span> </li>
<li> <span class="MenuBarActive"><a href="gazebosarches.html" target="_self">Gazebos &amp; Arches</a></span> </li>
<li> <span class="MenuBarActive"><a href="indoorfurniture.html" target="_self">Indoor Furnishings</a></span> </li>
<li> <span class="MenuBarActive"><a href="lampposts.html" target="_self">Lamp Posts &amp; Mail</a></span> </li>
<li> <span class="MenuBarActive"><a href="lightmetalware.html" target="_self">Light metal ware</a></span> </li>
<li> <span class="MenuBarActive"><a href="#" target="_self">Marble &amp; Stone</a></span> </li>
<li> <span class="MenuBarActive"><a href="mirrorsandwindows.html">Mirrors &amp; Windows</a></span> </li>
<li> <span class="MenuBarActive"><a href="misc.html">Misc Items</a></span> </li>
<li> <span class="MenuBarActive"><a href="statues.html">Statues</a></span> </li>
<li> <span class="MenuBarActive"><a href="marblestoneterracotta.html">Terracotta Items</a></span> </li>
</ul>