Jump to content

Text alignment problem


Noz03
 Share

Recommended Posts

I am using wordpress for my first site, am quite new but trying to learn as I go, but unfortunately I wasn't able to do this on my own. So what I am trying to do is align the top line of text which I put into the caption box for under images to the right, and leave the rest of the caption centered. I've tried many codes to align, I guess the best one would be this one:

<p align="right"><span style="color: #808080;">©Yajico </span></p><p>Curries in Hyderabad</p>

It works but it creates unwanted spaces above and below the text in the caption cell. I think it is to do with the p tag but am not sure what else I can use? Can anyone help?

Link to comment
Share on other sites

.img_caption {width: 300px;text-align:center;}.img_caption span { display:block;}.img_caption .caption_r {color: #808080; text-align:right; }

<p class="img_caption"><span class="caption_r"style="">©Yajico </span><span>Curries in Hyderabad</span></p>

The span are within a P element, so using single paragraph margins, instead of two, if you want space at top and bottom of this parargraph smaller adjust the top/bottom margins for this paragraph.

Edited by dsonesuk
  • Like 1
Link to comment
Share on other sites

Sorry for

.img_caption {width: 300px;text-align:center;} .img_caption span { display:block;} .img_caption .caption_r {color: #808080; text-align:right; }

<p class="img_caption"><span class="caption_r"style="">©Yajico </span><span>Curries in Hyderabad</span></p>

The span are within a P element, so using single paragraph margins, instead of two, if you want space at top and bottom of this parargraph smaller adjust the top/bottom margins for this paragraph.

Sorry for late reply, had to stop staring at this site for at least the weekend haha. And thanks so much I think I am starting to understand this stuff now. I used your code, also added margin-top: -8 and got rid of most of the spaces, but for some reason the bottom one is still there! caption_bottom_space.jpgTried adding hight: ***px after the width but nothing happened, also tried making margin-bottom -20, nothing happened. How can I get rid of this final space?? :(
Link to comment
Share on other sites

.image_box {border: 1px solid #ccc; width: 316px;}.image_box img {width:300px; height: 225px; border:none; margin:8px auto 2px; display: block;}.img_caption {text-align:center; margin:2px 18px;}.img_caption span { display:block;}.img_caption .caption_r {color: #808080; text-align:right; }

<div class="image_box"><img src="../images/myimage.png" /><p class="img_caption"><span class="caption_r"style="">©Yajico </span><span>Curries in Hyderabad</span></p></div>

  • Like 1
Link to comment
Share on other sites

Thank you so much!! It finally works! Seriously took about a week just for this tiny thing haha... I guess at least I am learning a lot from this time though.One last question, the way I got it to work was to put the code in manually to the html editor of the page. Would it be possible to put the image_box class directly into the [caption] short code so I wouldnt have to do it for every picture manually?

Link to comment
Share on other sites

??? I don't understand what you mean, the minimum code you could have is

<p class="img_caption"><img src="../images/myimage.png" alt="" title="" /><span>©Yajico </span>Curries in Hyderabad</p>  

.img_caption { border: 1px solid #ccc; width: 300px;  text-align:center; padding: 8px 8px 2px;}.img_caption img {width:300px; height: 225px; border:none;margin:0 auto; display: block;}.img_caption span {color: #808080;margin:2px 9px;display:block; text-align:right;}

Edited by dsonesuk
Link to comment
Share on other sites

Well the way I made it to work was to insert the image, fill in all the details (title, caption, etc.) on the wordpress image settings, then goto the html editor and paste the div tag just before the img code already there, remove the caption i wrote and put the p html code with the /div in its place. Is there any easier way than this using short codes and so on? I have more than 100 images on the site already and planning to upload 1000s over the next few months.

Link to comment
Share on other sites

Well I was hoping just to put the div code directly into the [caption] shortcode, but anyway I have an even bigger problem... I just noticed while your code works, for some reason after I use it every time I go from the html editor to the visual editor it adds a line break above and below the <p class="img_caption"><span class="caption_r">Yajico</span><span>Indian curries</span></p> code! The damn spaces are attacking back :/ Any ideas how to stop this? Jeez I cant believe how hard it would be just to do some basic text font for the caption on wordpress :(

Link to comment
Share on other sites

Hmmm, I did what it says line now says

function wpautop($pee, $br = false) {

but it still puts the linebreaks in :( Also I noticed it automatically removed the div code you gave me :(This is what the code will look like when I first put it in:

[caption id="attachment_148" align="alignright" width="300"]<div class="image_box"><img class="size-medium wp-image-148 " title="Cows in Haridwar Market" src="http://localhost/wp-content/uploads/2013/02/India01-300x225.jpg" alt="Cows in Haridwar Market" width="300" height="225" /><p class="img_caption"><span class="caption_r"style="">McKay Savage</span><span>Hyderabad market</span></p></div>[/caption]

Then after I look at visual editor one time:

[caption id="attachment_148" align="alignright" width="300"]<img class="size-medium wp-image-148 " title="Cows in Haridwar Market" src="http://localhost/wp-content/uploads/2013/02/India01-300x225.jpg" alt="Cows in Haridwar Market" width="300" height="225" /> <br /><br /><p class="img_caption"><span class="caption_r">McKay Savage</span><span>Hyderabad market</span></p> [/caption]

Div is gone and linebreaks appear :'(

Link to comment
Share on other sites

  • 2 weeks later...

Hey, Im back haha. Sorry for the really late reply again. I downloaded the ultimate tinyMCE plugin, and it really is awesome... but my wordpress still keeps putting extra p tags in and also deleting the div tag :facepalm:I enabled the options "Disable wpautop" & "Remove p and br quicktags", disabled the original text editor and am only using the MCE html editor... but still no luck. Any more suggestions? Sorry if you are getting so sick of me and my stupid problem, you can only imagine how close I am to throwing my computer against the wall right now haha.

Link to comment
Share on other sites

Listen very carefully i shall say this only once. amend these in style.css

.wp-caption {    background: none repeat scroll 0 0 #FFFFFF;    border: 1px solid #F0F0F0;    max-width: 96%;    padding: 5px 3px 0;  /*amended by dsonesuk*/    text-align: center;}.wp-caption .wp-caption-text, .gallery-caption {    font-size: 11px;    line-height: 17px;    margin: 0;    padding: 0 4px 0; /*amended by dsonesuk*/}

and add this

.wp-caption-text span {display:block; text-align:right;} /*new by dsonesuk*/

when you look at the html code the html is as follows

<p class="wp-caption-text">©Yajico Curries in Hyderabad</p>

to change this so the new css will work go to edit image, and under caption insert <span>©Yajico </span>Curries in Hyderabad update/save and the stacking with required alignment should be working now, as the html code should show and stay as

<p class="wp-caption-text"><span>©Yajico </span>Curries in Hyderabad</p>

  • Like 1
Link to comment
Share on other sites

Thanks, it worked quite well, no more <p>s randomly adding and so on :) Still has a bit of a gap under it though, I tried to change the code to

padding: 5px 3px -5px;

but it seems it doesnt allow negative values. Any way around that?

Link to comment
Share on other sites

padding does not allow negative values, you should have very little gap between bottom caption text and border because of, .wp-caption { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #F0F0F0; max-width: 96%; padding: 5px 3px 0 ; /*amended by dsonesuk*/ text-align: center;}.wp-caption .wp-caption-text, .gallery-caption { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 0; /*amended by dsonesuk*/} IF you are talking about gap between the border and text OUTSIDE of the caption box container you need to adjust .wp-caption.alignleft { margin: 5px 20px 20px 0;}

Link to comment
Share on other sites

No I mean inside the caption box. With the bottem padding set to 0 it is much better than before, but still quite a large gap. Is there any way to make the caption box boarder come to just a few pixels under the text? Right now it is I guess almost 10 pixels gap under.

Link to comment
Share on other sites

Look i'm not a mind reader, what i get is about 2px space, no large gap, use web development tools to look through each element to identfy where the margin, or padding or whatever is causing this gap, other than that give us a link so we can do it ourselves, just saying' is there any way to fix this' is not helpful, give us something to work with here, else the only answer we can give is, have you tried sitting on you thumb, and spinning on it, that might work! but more likley not!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...