Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#16 2015-02-13 22:40:03
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: css image alignment
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.
Offline
Re: css image alignment
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)
Offline
Re: css image alignment
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 <p> after <p id="single-photo">, I think. Can not think of a better solution right now, sorry.
Offline
Re: css image alignment
OK. I can follow that.
But when you say “It should be put in a separate <p> after <p id=“single-photo”>”
- what exactly is the code for that?
If that works, it seems the problem is solved.
Offline
#20 2015-02-15 18:10:01
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: css image alignment
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.
Offline
Re: css image alignment
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?
Offline
#22 2015-02-15 20:42:57
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: css image alignment
It seems to me that we are not talking about the page of your initial question. Or which text needs its own paragraph?
Offline
Re: css image alignment
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 <p> to separate the text from the photo. I don’t know how to do that.
Offline
#24 2015-02-16 16:39:07
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: css image alignment
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.
Offline
Re: css image alignment
jameslomax wrote #288299:
According to etc it seems that somewhere in there, I need to insert a <p> to separate the text from the photo. I don’t know how to do that.
Sorry for the long silence. This is on txp (not css) side. You seem to use an article per photo, could we see the corresponding article form?
Offline
Re: css image alignment
Yes, thank you. Here’s the photo article form:
<!--start photo_article form template -->
<div class="post">
<txp:if_individual_article>
<txp:body />
</txp:if_individual_article>
<txp:if_article_list>
<txp:body />
</txp:if_article_list>
<span id="title"><txp:permlink><txp:title /></txp:permlink></span>
<span id="date"><txp:posted /></span>
<div class="clear"> </div>
<center><span class="copyright"><a href="/about/">James Lomax</a> <a href="/copyright/">© 2005 • all rights reserved</a></span></center>
<center>
<a href="http://www.photoblogs.org">Photoblogs </a> /
<a href="http://www.photoblogs.org/profile/jameslomax.com/">Vote for me</a></center>
</div> <!-- end post -->
<!--end photo_article form template -->Offline
Re: css image alignment
And this form is called photo_front. I should emphasise that I didn’t write this stuff, so I myself don’t really understand it –
<txp:hide>
<div class="prev-next">
<p class="prev"><txp:link_to_prev>← Previous</txp:link_to_prev></p>
<p class="next"><txp:link_to_next>Next →</txp:link_to_next></p>
<div class="clear"> </div>
</div>
</txp:hide>
<div id="photo_wrapper">
<p id="single-photo"><txp:chh_if_data><a href="<txp:link_to_prev />" class="prev_photo_link" title="← <txp:prev_title />"> </a></txp:chh_if_data><txp:chh_if_data><a href="<txp:link_to_next />" class="next_photo_link" title="<txp:next_title /> →"> </a></txp:chh_if_data><txp:etz_striptags><txp:body /></txp:etz_striptags></p>
</div>
<p id="single-title"><a href="<txp:permlink />" title="Permanent link to “<txp:title />”"><txp:title /></a></p>
<p id="single-date"><txp:posted /></p>
<div class="clear"> </div>
<txp:output_form form="current_article_timestamp" />Offline
Re: css image alignment
And this one is called photo_single –
<txp:hide>
<div class="prev-next">
<p class="prev"><txp:link_to_prev>← Previous</txp:link_to_prev></p>
<p class="next"><txp:link_to_next>Next →</txp:link_to_next></p>
<div class="clear"> </div>
</div>
</txp:hide>
<div id="photo_wrapper">
<p id="single-photo"><txp:chh_if_data><a href="<txp:link_to_prev />" class="prev_photo_link" title="← <txp:prev_title />"> </a></txp:chh_if_data><txp:chh_if_data><a href="<txp:link_to_next />" class="next_photo_link" title="<txp:next_title /> →"> </a></txp:chh_if_data><txp:etz_striptags><txp:body /></txp:etz_striptags></p>
</div>
<div class="clear"> </div>
<p id="single-title"><txp:title /></p>
<p id="single-date"><txp:posted /></p>
<div class="clear"> </div>
<txp:output_form form="current_article_timestamp" />Offline
#29 2015-02-23 18:17:49
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: css image alignment
Can you give us the link to the page of this screenshot, so we can see the context.
Offline
Re: css image alignment
GugUser wrote #288522:
Can you give us the link to the page of this screenshot, so we can see the context.
Here we go.
Seemingly, it must be photo_single form, but I don’t understand where the image comes from, etz_striptag should remove it… James, could you check please which form is used by the article with ID=2718? And what is in its body?
Offline