css image alignment

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.

GugUser · 2015-02-13 22:40:03

I think it would be better if you rethink the structure of the page. Your main container, #page, is 820 pixel width. #wrapper and #photo-wrapper are 726 pixel width, but the inside #single-photo is 1226 pixel width. It would be better if your main container had at least this 1226 pixel width and then you organize the other divs according to this width.

This in case that you want to work with fixed widths.

jameslomax · 2015-02-14 13:36:09

OK thanks, done that and it seems to solve the image alignment. However, when there’s text underneath a photo this is now what happens

Last edited by jameslomax (2015-02-14 13:57:56)

etc · 2015-02-14 17:28:04

jameslomax wrote #288268:

OK thanks, done that and it seems to solve the image alignment. However, when there’s text underneath a photo this is now what happens

Ah, this text. It should be put in a separate  after , I think. Can not think of a better solution right now, sorry.

jameslomax · 2015-02-14 21:03:09

OK. I can follow that.

But when you say “It should be put in a separate after ”

- what exactly is the code for that?

If that works, it seems the problem is solved.

GugUser · 2015-02-15 18:10:01

The image given in your post doesn’t allow us to see your HTML.

And don’t forget: Your brain can learn, don’t limit yourself to constant asking and asking and copy codes you don’t understand.

jameslomax · 2015-02-15 19:47:07

I’ve been trying (and posting here) for 10 years ;-)

I’m happy to provide HTML or anything else if I can. I thought this was about the css, which can be seen in a browser?

GugUser · 2015-02-15 20:42:57

It seems to me that we are not talking about the page of your initial question. Or which text needs its own paragraph?

jameslomax · 2015-02-16 13:32:14

Correct. I provided a screen shot showing the problem.

This is the code I’m using:

div#photo_wrapper {
text-align:center;
}

p#single-photo {
margin: 25px auto 0 auto;
text-align: justify;
position: relative;
display: inline-block;
overflow: hidden;
}

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

According to etc it seems that somewhere in there, I need to insert a to separate the text from the photo. I don’t know how to do that.

GugUser · 2015-02-16 16:39:07

The help of etc is an instant solution, but it’s better, not to take out the #single-foto from your main wrapper, see here.

Can you show the code you’re working on. It seems to me that we are not talking about your initial example.

Textpattern CMS

Textpattern CMS support forum

#13 2015-02-13 12:04:53

Re: css image alignment

jameslomax wrote #288238:

#14 2015-02-13 20:18:56

Re: css image alignment

#15 2015-02-13 20:57:42

Re: css image alignment

jameslomax wrote #288249:

#16 2015-02-13 22:40:03

Re: css image alignment

#17 2015-02-14 13:36:09

Re: css image alignment

#18 2015-02-14 17:28:04

Re: css image alignment

jameslomax wrote #288268:

#19 2015-02-14 21:03:09

Re: css image alignment

#20 2015-02-15 18:10:01

Re: css image alignment

#21 2015-02-15 19:47:07

Re: css image alignment

#22 2015-02-15 20:42:57

Re: css image alignment

#23 2015-02-16 13:32:14

Re: css image alignment

#24 2015-02-16 16:39:07

Re: css image alignment

Board footer