Try adding:
.post .cform {margin:10px 30px 0 10px;}#
to the bottom of style.css. That should align your form to the left and let you add a right-aligned image to the page.
esmi, you’re a true wizard – thanks. Can you explain how this solved it?
Also if I want an image (approx. the same size as the contact box) in the right-hand side, how do I do that? Can I put a one-image Slideshow Pro album on the right-hand side perhaps?
thanks again
p
Cform was adding CSS to center all of it’s forms. The CSS I suggested simply took precedence and forced the form to align left.
To add the image, I’d suggest editing the page and inserting the image – right aligned – before the Cform code. In theory (and assuming the image isn’t too wide), the image should then drop to the right of the form. I’ve not used Slideshow Pro, so I’m not sure how that’s implemented but, again in theory, it should be possible to float it to the right of the form.
Ah I see, there’s a hierarchy at play, style.css being the top dog or something?
I tried inserting the image into the page, above the Cform code, and right-aligning the image. That put the image above the Cform though. The image shouldn’t be too wide, it’s only 300px and Cform is 450: the inner container is 950.
When I instead put in the SSP one-image album, the page looked like before.
Is there perhaps another way to edit a WP page and insert an image?
Cheers
p
there’s a hierarchy at play,
Yes
style.css being the top dog or something?
No. CSS stands for Cascading Style Sheet. The heirarchy is built into CSS itself. The further down the file (often called “the sheet”), or the more specific, the class declarations are in style.css, the greater the chance of them being implemented on the final page. Declarations that are near the top of the sheet,or that are very generic, stand a greater chance of being over-ridden by those lower down (0r more specific).
CSS Tutorials
Learning CSS
That put the image above the Cform though
Does your stylesheet include the .alignright, .alignleft, .aligncenter and .alignnone classes?
Thanks for the explanation re CSS and pointing me to those tutorials.
The stylesheet has the below code, which seems to include what you refer to, right? Does that help me?
Million thanks
p
/* **************************** FLOATS & IMAGES ***************************** */
.right { float: right; }
.left { float: left; }
.middle {margin: 0 auto;float:left;}
.clear { clear: both; }
img.centered{display: block;margin-left: auto;margin-right: auto;}
img.alignright{padding: 4px;margin: 3px 0 2px 10px;display: inline;}
img.alignleft{padding: 4px;margin: 3px 10px 2px 0;display: inline;}
.alignleft{float: left;}
.alignright{float: right;}
.aligncenter,div.aligncenter {display: block;margin-left: auto;margin-right: auto;}
.wp-caption {border: 1px solid #ddd;text-align: center;background-color: #f3f3f3;padding-top: 4px;margin: 10px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}
.wp-caption img {margin: 0;padding: 0;border: 0 none;}
.wp-caption p.wp-caption-text {font-size: 11px;line-height: 17px;padding: 0 4px 5px;margin: 0;}
.thumbnail {width:310px;height:150px;background:#eee url('images/x.png') no-repeat center;max-width:310px;max-height:150px;overflow:hidden;}
Thanks esmi.
It’s odd though because it seems cForms is taking over the layout.
If I add the following to the Page in WordPress:
<!--cforms name="contact"-->
<img class="alignright" title="something" src="http://philipus.com/wp-content/uploads/2010/01/something.jpg" alt="text" />
then the image doesn’t show up at all. It doesn’t make a difference if I place the cforms code after the image code.
But if I remove the cforms bit, then the image appears, aligned to the right. So the image insertion seems to work.
Following your example above, I tried adding another class to style.css and placing it at the very end, after the class you suggested. I gave it a specific name (aligncontactimageright) and defined the precise location I want the image. Then i added it into the page with class=aligncontactimageright. But the image nevertheless ends up being invisible, with the cForm aligned nicely to the left.
I think I did something wrong with the new class because if I remove the code, the image doesn’t align right.
Am I doing something wrong or does aligning code, such as cforms, play according to different rules?
Thanks for your time and help
P
I’ve not used Cforms but, from what I can see, it uses a different shortcode form than the type I’m used to working with. Try leaving a single blank line between <!--cforms name="contact"--> and your image markup.
Amazing, I don’t know how you do it. That single blank line allowed the image to reappear on the right. I should be OK now.
Thanks a million for your input and your patience!
/p
