New div class for one page

  • 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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.