Jump to content
Sign in to follow this  
f451

CSS for warping text around image in Text box widget

Recommended Posts

f451    0
f451

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
Danny    1,327
Danny
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/

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
f451    0
f451
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.

gyoery    2
gyoery
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.

Jenny    33
Jenny
@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!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

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  

×