sanity penguin
Member
Posted 3 years ago #
Yesyes, many have already made a topic about this issue but all related to previous wordpress versions and believe me, I've tried the answers given.
I've added pieces of code to the css, as well as copying the original image coding from the kubric theme into the css, nothing works.
I do believe it is a theme issue since the alignment works when viewing the default theme.
my site is http://www.sp-renders.net/blog
(as you can see in the bottom of the css, that's the snippet from the default theme but it didn't fix anything)
Hope someone can help me with this, thanks in advance :)
Michaël
Nice site - which image are you trying to center?
sanity penguin
Member
Posted 3 years ago #
Sorry, thought that was clear :)
When you check a post (e.g. http://sp-renders.net/blog/?p=170) the image in there aren't centered, although they all have the centered alignment tag in them.
(also, thanks on the comment ;))
I just viewed source on your code, and while I do not have the answer, I'm curious:
<h3>Completed vexel</h3>
<p><img class="aligncenter" title="SuperWinnie" src="http://www.sp-renders.net/images/vexeltut/completed.png" width="271" height="357" alt="SuperWinnie" /><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br><br />
<br />
</br></p>
<p></br><br />
<br />
</br><br />
<br />
</br></p>
What's with all the line breaks?
Also, you might try going to html view and doing this:
<p class="aligncenter">
on the paragraph tag that contains your image. But really, the best thing you could do is to stop using whatever it is that puts all those breaks in there - if you're pasting from Word, paste it into Notepad first then into WordPress, and use the toolbar buttons on the editor for any formatting.
When you post only an image, without any text, into a post and aligning it center, does it work?
sanity penguin
Member
Posted 3 years ago #
I need the line breaks so that my text comes underneath the images and not next to them.
I need to make everything in Html since using the WYSIWYG editor does no good.
aligning doesn't work (added those html tags before)
it centers in the WYSIWYG editor but when I click publish, it's simply up to the left so I assume it has to do with the skin's CSS somehow.
You should get them right if you're going to use them - a line break is written as <br />, not as </br>.
That accounts for only a few of the 35 errors you get at the w3.org validator. If you clean up your code, you have a better chance of spotting what's wrong.
In your theme you have a directory called "css" and in that directory is a style sheet called layout.css. Open that and find the following:
div.comment img{float:left;padding:4px;border:#DDD 1px solid;margin:5px 20px 15px 0;}
Change it to the following:
div.comment img{padding:4px;border:#DDD 1px solid;display:block;margin-left:auto;margin-right:auto;}
See if that helps.
Actually, the tag using the forward stroke is only required when used in a document using an XHTML doctype. Otherwise, the standard "br" minus the forward stroke will suffice.
I can't write those tags in this post, for some reason it's not showing up, even with the code tag. However, br is never written as </br> .
sanity penguin
Member
Posted 3 years ago #
Well, the code by figaro worked (and now I can delete the br's as well since I have huge gaps now :P)
One thing is off though, the thumbnails that I have on my index are also centered now and I don't quite know how to get them on the right again...
(They are used as extra field to a post)
sanity penguin
Member
Posted 3 years ago #
And on taking a second look, it also centers images that I had set to align to the left, so that may be why my thumbs are also centering?
perhaps an edit to that former code by Figaro is needed?
Maybe delete that line entirely, so you can align images within the post?
sanity penguin
Member
Posted 3 years ago #
No, can't do that since that removes the lines that come around the images then.
It does bring the thumbs back to the left of course, but the text doesn't auto-wrap around them either then. So deleting the line isn't an option :)
Thanks for the input though!
if you want to align an image to the left or right, then use float:left; or float:right; on the container of the image. if you want to center an image, then you should use margin:0 auto;
why don't you define a few basic classes in your stylesheet like:
.left{float:left}
.right{float:right}
.center{margin:0 auto}
then you just need to add the class to whatever you want to float or center
sanity penguin
Member
Posted 3 years ago #
So I just add those to the bottom of the Css?
And what html do I use then? (<div align="center"> or something else?)
sanity penguin
Member
Posted 3 years ago #
Also, dunno if it helps, but for the thumb to show up on the main index, I used this code in the main index page
<div class="entry-thumb">
<?php $key="thumb"; echo get_post_meta($post->ID, $key, true); ?>
</div>
And the this is the Css for it
/* thumb */
.content .two .entry-thumb {
width:150px;
height:150px;
padding:6px;
background:#dcd8c5;
border:1px solid #bcb99e;
float:left;
}
.content .two .entry-thumb img {
width:150px;
height:150px;
padding:0;
}
in css a . means a class and a # is an id, so in my example above you would need to add class="center" to the div that holds the thumb. since you have a class already it would look like this:
<div class="entry-thumb center">
sanity penguin
Member
Posted 3 years ago #
Seriously love you now! ^^
Just one more tiny winie thing. As you can see on the main page now, the texting is like really close on the image, how do I fix that?
Is it something with padding?
just use some margin on the div, like
.left{margin:0 10px 10px 0}
those 4 numbers after margin refer to the four sides of the div starting with the top and then going clockwise around, so you need to adjust it for .right and .center
sanity penguin
Member
Posted 3 years ago #
Fantastic, learned a lot about Css by these few tips :)
I'm reading up on this as I have the same problem. Why on earth was the css written like that? Very frustrating for those who don't know where to look and how to fix it. I was using tables to try and sort the matter out but I'll try what's listed above to fix it.
Mine is at http://thedaringwomenscommunity.com/dare-to-join/inner-circle-membership/ and I'm progressing slowly.
