aligning images and text within a two column layout

  • 1
  • Question
  • Updated 9 years ago
  • Answered
is there any way to position an image accurately inside a two column layout? Using the two column layout causes problems with aligning text and images. Is there any way that the images or text can be made to align with out having to use the text widgets as spacers.

I'm told by Glen that using these spacers is affecting the way that diferent browsers see my webpages for more on this please visit this link http://getsatisfaction.com/SynthaSite...
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
IE7 reads borders and spaces slightly different to Firefox and Chrome.
When you click on the image you want to align you should get this in the properties of the content sidebar;


you can normallly use the pic's or texts properties to align things rather than put in an empty text widget. Sometimes IE7 ignores empty boxs even if border properties are set.

Please provide more specific info. many thanks. Lee.
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
Hi Lee

I made some screen shots so I can show you what my problem is...

this is IE8 perfect alignment of images and text

this is IE7 text and images moving away from each other

Further down the page in IE7 the text and images are parting company even further

and finally this is what happens when I try to put an image widget into a two column layout and go to properties to try align the image.... i get the word null when I mouse over the boxes

hope this helps to explain
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
dont belive i forgot the screen shot!
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
Hi again Lee if you are still reading,

I found what the problem was with the null thing in the screenshot above. It was simply that the page was running slow and it seemed as though I couldn't enter any values....doh!

I think I've been a bit slow the last dew days, but I've learned a few things including I need to do a rebuild of a few pages but they will be better for it!

Thanks for the help

ps I see there is still no image for " I feel like a moron!" LOL
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
Hi Kenny,
I see that you removed the images and text, you must be working on it. Please let us know if you have further questions... and please let us have a look when you are done! It is a great looking site!
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
Hi Emmy your right I was working on it, I'm hoping to launch it in a couple of days now that I think I've finally got the ecommerce sorted out, I Will be sure to make a post here with a link so that you can have a look.

Thanks to everyone that has offered advice on the forums... couldn't have done it without you!
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
Hi Guys

just to let you all know that I finally published my site this morning www.chilliz.co.uk it still has quite a lot of work that needs to be done but the bare bones are working. I would be very interested to hear any comments....also if you have any trouble finding the navigation page!

Thanks to all here who gave me advice :-)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
kenny your site looks great - and i LOVE chilliz!
you should add favicons - click an empty pat of the page (in your editor) and in the properties content side bar goto 'favorite icon' and add an image - i chilli would be cool looking

good luck Lee.
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Hi Kenny

The easiest way to ensure that your image will always line up with your text would be to use 6 individual two-column widgets one one top of each other for that page.

Place the image on the left and the Paypal widget on the right for each item and in a new two-column widget.

This will always ensure that your images and content are in perfect alignment regardless the browser that is used.

Happy site building
Ed
http://pagepeel.synthasite.com/
http://honeybearplayhomes.com/
http://honeybearplayhomes.synthasite....
Photo of Guido Graphics

Guido Graphics

  • 558 Posts
  • 41 Reply Likes
A good little trick for aligning several 2 colunm widget center bars is to set the first one, then put a post it note on the monitor to mark the location. Adjust all the other center bars to the post it. I also use that trick from one page to another for spacing by making some pen marks on it and scrolling the space in question into place to check it.
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Guido,

That's brilliant. There's a 101 uses for this trick..... amazing!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Kenny,

Your site looks HOT !!
Nice of you to dedicate it to my favorite fruit too.

I noticed that your back button at the bottom of your page's go to a navigation page. You most probably want it to work like that, but I thought I would just add that if you wanted, you could also use the following link code:

javascript:history.back()

The viewer will then go to the previous page they were on - like hitting the back button on your browser.
Photo of Kenny

Kenny

  • 140 Posts
  • 3 Reply Likes
Hi Guys and thanks for the encouragement!

Lee is the favicons to make a button to let people add me to their faves? that would be cool, I'll take a look tomorrow but for now I'm all webbed out!

Ed thanks forthe advice, much appreciated.

Boomer, thanks, I do know about the links and may change then at some point but with so many pages still under construction it makes sure that people find the navigation page as it might not be obvious to people to click the chillis on the index page. The buttons at the bottom of the chilli kits pages do take you back just one page though ;-)

Cheers Guys