garyc

#6499

Hi

I’ve put some new content into the middle section of http://www.hackneytools.com, and would

like to style this slightly differently to the blog pages and other pages.

I’ve moved the posts to ‘blog’ page and the new front page is now to sell tools, and is therefore

a page made up mainly of one long html document. I’m not even sure this is the way to go

with this, but I’m just making mstakes as I go along, and we’ll see how it goes!

I’d like to make a new div class in my child theme, and have highlighted the present div,

thinking I could make a start by copying that chunk, but using Firebug, the box seems

to be either ‘clearfix’, or ‘post 1072’??

Really all I want to do is:

1. Make groups of pics on horizontal lines (so far I’ve tried various ‘clear’ and ‘float’ combinations,

with no success.

2. Sort out the spacing, so that the copy for each entry sits close to each picture group, and

not to the pic group below.

3. Work out how (when you click on an image), the ‘Lighbox’ plugin only lets you click through

that small group of images in the set, and not through all the images on the page???

If you can help with any of these queries, I’d really appreciate it. It would be easier if I had

posts on this page I think, but my posts page is now elsewhere you see, so I somehow have

to format a whole long page, or maybe I’m missing something? (very likely)

Thank you

Gary

[Mod]

Kenneth John Odle

#34574

Float is not an easy concept to figure out.

Something like this in the html editor:

<div class="hackneyfrontpage">

<div class="picture">stuff for the image, caption, etc.</div>

<div class="picture">stuff for the image, caption, etc.</div>

<div class="picture">stuff for the image, caption, etc.</div>

<div style="clear:both;"></div>

<div class="picture">stuff for the image, caption, etc.</div>

<div class="picture">stuff for the image, caption, etc.</div>

<div class="picture">stuff for the image, caption, etc.</div>

</div>

And in the css:

.hackneyfrontpage {style elements here;}

.picture {float: left;}

You probably want to choose a more descriptive class name that “picture”, however.

This should give you three pictures in each of two rows.

You can learn more here:

<div class=”img”></div>

Click on the “Try it yourself” button to figure it out. I’ve learned lots that way.

See this if you need a better example: http://pastebin.com/jj08JYM5

garyc

#34575

Ah, thanks John. I’ll get back on this in the afternoon. Your code looks full of promise!

I’ve managed to get Lightbox firing multiple images from one thumbnail, YAY! However, when

the images come up, because images are all on the same page, the second set start from

‘4-6’, and also scroll through the first set, ‘1-3’. This really is doing my head in. I’m a total

newbie, and doing my best, but I can’t see a way out, unless I dump Lightbox, which

I really don’t want to do.

Keeping thumbnails small means I can get loads of sales pics on the page, and zooming

in on them for a close view is really useful for people buying these types of tools.

Slightly confused about best way forward, but will try your code for layout and go from there

Thanks John

best

Gary

garyc

#34576

Sorry, ‘Kenneth’, not ‘John’!

garyc

#34577

Hi Kenneth

Ok, I stripped everything out as you said and used this code.

http://hackneytools.com/

Lightbox now recognises groups of images as groups, (when I worked out what the ‘rel’

tag was for). I can now scroll through sets of only 3 or four, numbered properly. GOOD!

Images are now in horizontal rows, rather than stacked vertically. GOOD!

Only thing is, I now have text wrap on each group of pics. I thought I could use ‘clear:right’

in the css for the pics within this special div, but having tried that, nothing got forced

round? Am I doing something wrong? I wonder if I need a special tag for the last pic

in the row, as presumably ‘clear:right’ on all pics would stack them vertically again?

Also, my right sidebar has now been forced down to the bottom, for some reason?

Thanks Kenneth.

best

Gary

[Mod]

Kenneth John Odle

#34578

Quote:

I thought I could use ‘clear:right’

in the css for the pics within this special div,

Try applying that to the special div in the css:

.hackneyfrontpage {clear:right;}

Quote:

Also, my right sidebar has now been forced down to the bottom, for some reason?

Did you remember to close the main <div class="hackneytools"> with a closing </div>?

garyc

#34579

Ok, sidebar has popped back up, so you’re right about those closing div tags, I must

have deleted them by accident.

Still got text wrap around the groups of images though. Frustrating. This is what had

me stumped first time round. Any more ideas, Kenneth?

Thanks for your help.

Gary

http://www.hackneytools.com

garyc

#34580

Hi Kenneth

I sort of fixed it so it works, but it’s the only way I could make it happen. I added a

.hackneyforsale p

specification under the css for the main .hackneyforsale div, and gave the ‘p’ a width

of 380px. This seemed to push everything down under each group of pics, and achieved

what I’m looking for. There are no doubt better ways to achieve it, but it seems to work?

Gary