Need help controlling page layout with jquery gallery

HTML & CSS
1

Hi all,

I’m afraid I’ve hit a bit of dead end with my site. I appropriated a JQuery gallery for my portfolio page and gradually through trial and error I’ve managed to mould it into the simple style I’m after. However, there’s some elements I can’t control. I’ve taken a still of my gallery page below. I can move and manipulate everything except the ‘this picture 6’ element (which is where I’ll title my images), and the ‘NEXT/PREVIOUS’ element which seemed to have a mind of their own no matter what I do. I was hoping maybe someone could tell me how to free them from whatever it is constraining them so I can position them using simple ‘padding’ commands. I’ve spent hours changing and moving stuff around to no avail.

I just wanted to check first though that I’m in the right section to ask this question, and if its okay for me to copy and paste the html for my gallery and CSS pages?

Thanks. Paul

2

It shouldn’t be hard at all, but please post a live link for us. Bits and pieces of code are pretty useless with this sort of thing.

3

Thanks Ralph.

I know this is a stupid question, but what exactly is a ‘live link’? I haven’t got this up and running as website, I’m just constructing this on my desktop at the moment. What’s the best way to show the code?

4

If you have some webhosting space somewhere, upload it to there (even a test folder on your own site). Then you can give us a link to that page. That’s the best way for us to test it. Otherwise, you could reconstruct your code on a site like JSFiddle, but I don’t like debugging those much.

Another option would be to zip up your files and upload them here—but with images involved, that may not be very practical, as the file size might be large.

5

Hi Ralph

I can zip it up into a file that’s 2.8mb (that’s the full site, but it’s small, only 4 pages), is that too big? Or I think i might have some web space that comes with my Virgin Media broadband.

6

That would be better … 2.8 mb is too much. (sounds like a lot of data for 4 pages. Are those images optimized?)

But presumably you are going to put this online, so maybe you could organize that hosting now …

7

i don’t think the main images are optimized.

I’ve got some webspace, just trying to work out how to load my files.

8

At last managed to find some FTP software that would connect to me webspace and upload my files :slight_smile:

here goes:

www.ptaplin.webspace.virginmedia.com

9

forgot to mention, you’ll see from CSS sheet that some of the commands I inherited from the jquery gallery I have deactivated because I felt I didn’t need them. You’ll also see I’ve tried to identify what controls what.

Thanks. Paul

10

You could do something like this:

.picture-slides-fade-container {
  min-height: 560px;
}

.picture-slides-image-text {display: none;}

.navigation-controls {padding: 0; text-align: center;}

.picture-slides-previous-image, .picture-slides-next-image {padding-left: 10px;}

.picture-slides-previous-image {padding-right: 10px;}

… but really, you whole page layout needs to be structured properly first. You need to start from basics with this, and work out a width for your design, set set up a container div that is centered and that can move with the browser window. Some of the styles you deleted would have been good to keep.

11

Thanks Ralph, I guess I need a container div for every page, which means setting it up at the beginning of my style sheet.

Is all that explained in chapter 4 (shaping up with CSS) in the Sitepoint book?

12

Not sure which book you mean, but any book on CSS is sure to mention it.