Images not aligned.
-
Is there any way of altering the position of images? If I knew HTML would I be able for example to shift an image slightly up and to the left to line up with another image? It seems a matter of luck where the images land.
If you can be bothered…under ME >>> Gpas little book. I have managed to get two images of each side of the book, but they are far apart and slightly out of line with each other.
It would be great to be able to adjust these things. At least I got them the same size! And conquered the thumbnails-every-time problem.
I like things neat though!
I would be grateful for help here. Thanks. -
There are various ways of altering the positioning of images. Absolute control possible only via HTML.
In your case (assuming you want the left image flush left):
– You should have inserted them the one after the other, without hitting return after inserting the first.
– The alignment of the first one should be left, not right.
– The slight vertical misalignment is probably due to the fact that the originals are very different; you can correct it by adding some margin to the right image.Instead of reworking it, it will be easier for you to switch the editor to HTML and paste this in place of the original image code:
<a href="http://juliamatcham.files.wordpress.com/2011/02/87-plus-back-e1296995633757.jpg"><img class="alignleft size-medium wp-image-652" title="87 plus back" src="http://juliamatcham.files.wordpress.com/2011/02/87-plus-back-e1296995633757.jpg?w=218&h=300" alt="" width="218" height="300" /></a><a href="http://juliamatcham.files.wordpress.com/2011/02/87-plus.jpg"><img style="margin-top:4px;" class="alignnone size-medium wp-image-649" title="87 plus" src="http://juliamatcham.files.wordpress.com/2011/02/87-plus-e1296995465647.jpg?w=222&h=300" alt="" width="222" height="300" /></a> -
Right. I will try that (mild panic!) but how can I find out the stuff I need to know in the future about moving images? The Poetry section has explained text control and HTML but images are another story. Where would you point me to for a BEGINNERS info. This has become a way of life!
Thanks a lot! I will let you know how it goes. J -
scroll down in this post:
http://wpbtips.wordpress.com/2009/04/01/codes-useful-for-text-widgets/the code here will also apply to image alignment:
Formatting text pt. 1: blank lines, alignment, wrap-around, two columns
-
That’s wonderful …apart from the front cover coming second but that really doesn’t matter. It could even have been intended. What I want is to be able to do that myself. I can’t keep asking you or others to make up for my ignorance.
THANKS!!! -
-
Tables are also a good way to go with getting text and images to stay where you want them:
http://onecoolsitebloggingtips.com/2010/03/24/align-images-html-tables-for-wordpress-blogs/Yes, it is a learning curve, but if you are motivated you’ll be surprised how quickly you can learn.
One tip is to save code snippets which you can then copy, paste, then fill in the specifics. I keep a div code with background-color, padding, alignment, color, hidden link to my blog. It’s the basic format for most of my posts. I also keep a table code with the color, alignment, borders, etc. so I can then easily insert text and images without having to figure out the code each time.
-
You’re welcome.
You hadn’t mentioned you wanted the order reversed as well! Replace the above with this:
<a href="http://juliamatcham.files.wordpress.com/2011/02/87-plus.jpg"><img class="alignleft size-medium wp-image-649" title="87 plus" src="http://juliamatcham.files.wordpress.com/2011/02/87-plus-e1296995465647.jpg?w=222&h=300" alt="" width="222" height="300" /></a><a href="http://juliamatcham.files.wordpress.com/2011/02/87-plus-back-e1296995633757.jpg"><img style="margin-top:4px;" class="alignnone size-medium wp-image-652" title="87 plus back" src="http://juliamatcham.files.wordpress.com/2011/02/87-plus-back-e1296995633757.jpg?w=218&h=300" alt="" width="218" height="300" /></a>As for the rest:
I don’t know where to direct you for “a beginner’s info”: arranging groups of images satisfactorily is often tricky, i.e. not beginners stuff. As Tess said, one good way is the HTML for tables. Unfortunately in your case it would be unnecessarily complicated: you’d have to add lots of extra code to eliminate the borders and the bad alignment your theme imposes. But you’ve seen that here you’ve got people eager to help; so yes, keep asking (and study replies to other similar questions too): that’s how all of us started learning. -
To other things to note:
a) Avoid using generic file names that end with a number. When you re-upload a file with the same name, it gets an extra number at the end to distinguish it from the previously uploaded one: “pic.jpg” re-uploaded will become “pic1.jpg” etc. So the system may confuse an actual “pic31.jpg” with a copy of a previously uploaded “pic3.jpg”.
b) On that page of yours you needed thumbnails that link to larger originals. When you don’t need that, better downsize copies of the originals to the desired size (in an image editing application) and upload those copies. This way you save storage space and you get better quality too – see here:
-
You have no idea how confusing it is. I am still at a loss to understand that eg 600 x 800 pixels can stll have an almighty file size in MBs. I have read about optimising and so on, experimented with the Save as…panel…
Ideally it would be good to upload from Picasa at between 600 and 800 pixels but that doesn’t seem to reduce the file size enough (often). I stagger on uncertainly! A lot has been achieved by emailing myself the images from Picasa and then saving the attachments which are probably a bit too low on file size. And uploading them. I did that with Screen Prints. Inventive anyway!
Re that page, I wanted the book to more interesting than it would have looked on thumbnails…that’s why I did it like that.
I thought I HAD got them the right way round…but I was probably so relieved to have got them at all that I didn’t notice!
Thanks very much for your help yet again. J -
I have no idea how confusing it is? I wasn’t born experienced, you know! A few years ago I was also at a loss how to arrange images (and I viewed HTML as an undecipherable maze).
The important thing about file size isn’t the dimensions alone, it’s the resolution: all the images you upload must be at a resolution of 72 (that’s what browsers display, so anything above that is just wasted storage space and loading time).
I think the first thing you must clear up is the effect of the standard alignment options you get when inserting an image. Selecting “Center” does what it says but also means no wrap-around: the rest of the content, if any, will start below the image. Selecting align “Left” means wrap-around: the rest of the content (including other images) will start next to the image, if there’s room enough. So the simplest way to insert a row of images is to insert them as I already pointed out: the one after the other, without hitting return after inserting each one, all aligned left (or the last one aligned none). Complication: if there’s room enough to the right of that row of images, as in your page, and you want more text after the images, the text will start next to the images (because of the wrap-around effect). When you don’t want that, you add this after the last image code:
<br style="clear:both;" /> -
Sorry I will stop whingeing! That is reassuring. Thanks again…I will do a bit of practice on a spare page as it were, tomorrow. Funny really, all my ink jet prints have been made through photoshop where the resolution has either been 300 or 350 and has printed just fine so I am a bit shocked to find myself so ignorant!
Anyway time for a large scotch and tele. Must try harder! Goodnight. Cheers. J -
I would like to weigh in with something I think is a related issue.
I am trying to format a header for my page, consisting of a pair of images flanking two lines of text.
Problem is, the alignright image floats away and the text is crowded so instead of two clean lines, both of them wrap.
I tried to format a table and that forced the right image into position, but the center text still wrapped. I am alternating back and forth between html and visual editing but the visual editor will not accept my attempts to stretch the table, and even tho I specified a table width of 2000px, it refuses to expand more than 963px.
Why 963px? I am stuck! Nothing I do seems to be able to escape this constraint.
-
We need a link to the blog you are talking about. We can’t really help if we cannot see it.
-
Secondly in using such a wide table, you are forcing your visitors to scroll a long ways horizontally, and that is the #3 out of top ten things people on the web dislike most.
Consider the following web monitor usage statistics on monitor resolution.
1 — 1024×768 — 40.28%
2 — 1280×1024 — 16.97%
3 — 1280×800 — 16.89%
4 — 1440×900 — 7.71%
5 — 1680×1050 — 4.28%
6 — 800×600 — 4.01%Over 78% are on monitors with 1280px width or less. Only loonies like me have monitors that are over 1680px wide.
-
I suppose then that i ought to try making it fit by resizing the elements.
Noob that I am it didn’t occur to me that the onscreen size would be an issue. but then I have a nice monitor too….
I”ll post again Monday and let you know.
BTW- my page is not and will not be a blog and what I have is probably not visible without a password since I am still developing it. More later.
-
As a general rule, I always design for a maximum outer width of 990px. That gives room for the browser margins and scroll bar, with a browser maximized on a 1024px wide monitor. If I need that full 990px width, then I dump the sidebar and/or go with a theme that has bottom sidebars so I have that full width clear.
-
Well turns out that what worked is to specify ” white-space:nowrap;” in the <span> statement for the longer text line. I also formatted the table to be 1000px, the text cell to be 700px and the fllanking image cells to be 150px each. Looks good now and I didn’t have to reduce the font size. (I tried that first but it had no effect anyway. Go figure.) This keeps the math easy for any future tinkering.
Now on to the body of the page where I will have to learn how to do CSS boxes properly, so let me ask for opinion on a basic idea:
Is it better to have an enveloping box for a two-column format, or is it just as good to have an alignleft and alignright pair?
- The topic ‘Images not aligned.’ is closed to new replies.
WordPress.com Forums 