• 0
Sign in to follow this  
Followers 0

CSS for warping text around image in Text box widget

Question

Posted · Report post

If you would to help me with some CSS code please. Here is a pic of the text box in my sidebar. 00000001.png URL of page http://www.planetstewards.com/curators/ Here is the code in the box below. What I want is to have the text without a title start at the top. Tighten up the padding in box and put a 3 pt colored border if possible. PS_logoFood64.png

At first we are focusing on Aquaponics - The Food revolution - Nutrtarian - Permaculture - CSA At first we are focusing on Aquaponics - The Food revolution - Nutrtarian - Permaculture - CSA At first we are focusing on Aquaponics - The Food revolution - Nutrtarian - Permaculture - CSA At first we are focusing on Aquaponics - The Food revolution - Nutrtarian - Permaculture - CSA

Share this post


Link to post
Share on other sites

4 answers to this question

  • 0

Posted · Report post

Hi, I recommend you use Firebug or the developer tools in Chrome and inspect the text widget, then alter the padding or margin to get the style you wish. If you wish to hide the title, identify the ID of the text widget and then use display: none to hide the title. I have provided you with a link to the W3schools CSS help page. http://www.w3schools.com/css/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok I have solved a lot of it but I can't seem to get the first text to start at the top like following two. Could you please help me out here. I am trying to get the text in the first image to go to the top. page is http://www.planetstewards.com/aquaponics-association-conference-interviews-2011/ sidebar first text. [img]http://content.screencast.com/users/mdcosmo/folders/Jing/media/93f389ab-090a-4d5b-a004-acd951182803/00000003.png[/img] Here is the code. [code]

In-depth coverage of Green Technology Energy Planet Stewards. At first we are focusing on Aquaponics - The Food revolution - Permaculture - CSA

In-depth coverage of Green Technology Energy Planet Stewards. Practical and energy saving tools and systems that can be implemented now. More..

in-depth coverage of Green Technology Shelter Planet Stewards. Bioshelters - Zero footprint energy homes - Green Materials more.. [/code] Yes I spent a lot of time in firebug still can't figure out what is different.

  • 0

Posted · Report post

why did u use html align? why arent you using css vertical-align:top property? don't know if this will work, since I am doing it out of my head, but I strongly recommend using css aligning. The easy way would be to use since you have inline elements. The other way, would be to float and

left, within while specifying the width: a style="width:100%;" img style="width:20%; float:left;" p style="width:80%;float:left;" (or float right, doesnt make a difference) careful, if you have borders, this can mess up your design. In that case you have to "leave room" for them by taking only 19% and 79% eg.

  • 0

Posted · Report post

@gyoery is right; definitely use the vertical-align property over HTML align. Make sure you visit [url="http://w3schools.com/css/default.asp"]W3Schools[/url] for everything about CSS. They even have examples for image alignment with text. If you need further assistance with this, please let us know. Otherwise if you consider this topic resolved, please accept an answer. Thanks!

Share this post


Link to post
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
Sign in to follow this  
Followers 0