css image alignment

jameslomax · 2015-02-10 12:23:59

Can anyone see how I need to add or change the css for photos like this so they are centered?

http://www.jameslomax.com/photos/2730/maiden-moor-to-newlands-valley

- the rest of the photos have to stay the way they are.

I guess the css has to be specific for those panorama photos in some way, but I don’t know how you do that.

As I recall – but I may be wrong – all the photos appear in some kind of ‘container’ which means this one fills the container and then overflows to the right.

Thanks!

alivato · 2015-02-10 12:57:05

p#single-photo {
  width: 796px;
  height: auto;
}
#thumbs a img {
}
p#article-image img { 
}

Last edited by alivato (2015-02-10 12:57:39)

Bloke · 2015-02-10 13:08:25

You could tweak your markup, because the fixed-width container is scuppering things.

Failing that, although not ideal, to get you closer you can remove the three rules from inside the following CSS blocks:

div#page {
   width: 820px;
}

and:

div#wrapper {
   width: 726px;
   margin: 0px auto;
}

then add a new rule block:

div#thumbs {
   width: 726px;
   margin: 0 auto;
}

But if you do that, your text between the top pic and the thumbnails will spill out full width so you’ll probably need to wrap a new div around those and set it to have the same width as div#thumbs to rein it in a bit. You might have to rethink the floats too, they’ll probably depend on your position:relative settings.

Fixed-width designs tend to have annoyances like this, but it’s difficult to simulate in the browser’s inspector without the markup actually being changed. But I’m sure someone else can come up with something better.

EDIT: like alivato for instance :-)

gaekwad · 2015-02-10 13:32:53

Here’s how I do centered images without breaking too much inherited stuff: display:block;margin-left:auto;margin-right:auto;.

jameslomax · 2015-02-10 14:55:44

Thanks. Tried inserting both alivato and gaekwad code – no joy.

Then tried deleting what I thought (guessed) needed deleting in existing css (‘container’ etc) – no joy.

Might try again later. Or if anyone has a view minutes and could insert the code I need into the style appropriately – so I can just insert it into txp – that would be great.

Incidentally, and this may change things, I’ve wanted to style the text below the photos for a long time (as bloke refers to) but didn’t know how to do it.

gaekwad · 2015-02-10 14:59:18

Resize the image? It’s a fixed-size layout, so that’ll help.

etc · 2015-02-10 17:18:18

Try this old trick, who knows…

#single-photo {
    left: 50%;
    margin-left: -100%;
}

jakob · 2015-02-10 20:01:02

etc’s makes it nice and wide over the whole width. If you want it as wide the upper menu width, use alivato’s css suggestion with one small modification (the img in the wrapper should be targeted):

#single-photo img {
  width: 796px;
  height: auto;
}

If you want the image as wide as the grid of thumbs, use width:698px; instead.

gaekwad · 2015-02-10 21:25:20

…or set it as the background to a div instead of an img.

jameslomax · 2015-02-13 10:46:55

Hi folks. None of this has worked / I don’t quite know how to do it. To clarify: what I want is the long photo displayed 100% but centered.

Is it possible to remove the ‘container’ in some fashion, so all the photos ‘float’ on the page and can then be told to center?

More to the point – would that be easier to define in the css?

gaekwad · 2015-02-13 10:50:11

Try:

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

GugUser · 2015-02-13 11:51:44

Hi James

I don’t understad your question. 100% and centered in relation to what?

See this image.

etc · 2015-02-13 12:04:53

jameslomax wrote #288238:

Hi folks. None of this has worked / I don’t quite know how to do it. To clarify: what I want is the long photo displayed 100% but centered.

Is this what you need? That’s done with what I suggest above. Tested in recent firefox and chrome on w7, maybe you have another setup.

jameslomax · 2015-02-13 20:18:56

Thank you for your patience.

Yes! – that’s what I want etc.

I tried inserting that code but it didn’t work. If you could perhaps specify where it goes, and what it should delete, it seems the problem is solved for the image. Although I’m not sure if it will alter the text underneath the photo, which is not what I want.

(This is not a “language” I can speak. I’m basically guessing).

etc · 2015-02-13 20:57:42

jameslomax wrote #288249:

If you could perhaps specify where it goes, and what it should delete, it seems the problem is solved for the image. Although I’m not sure if it will alter the text underneath the photo, which is not what I want.

You should add these rules after (or at the end of) your css p#single-photo block, or append !important to make sure they are not overwritten:

#single-photo {
    left: 50% !important;
    margin-left: -100% !important;
}

The text will not be concerned, it is contained in a separate div. If you are comfortable with dev tools, click “Inspect element” and add these rules in the css pane, just to check if it works in your browser. Hope that helps.

Textpattern CMS

Textpattern CMS support forum

#1 2015-02-10 12:23:59