Jump to content


Photo
- - - - -

CSS for warping text around image in Text box widget


  • Please log in to reply
4 replies to this topic

#1 f451

f451

    Advanced Member

  • Members
  • 41 posts
  • LocationInverness Florida
  • Country: Country Flag

Posted 25 March 2012 - 01:22 AM

If you would to help me with some CSS code please.

Here is a pic of the text box in my sidebar.
Posted Image
URL of page

Please Login or Register to see this Hidden Content


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.

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


#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15680 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 March 2012 - 09:44 AM

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.

Please Login or Register to see this Hidden Content



#3 f451

f451

    Advanced Member

  • Members
  • 41 posts
  • LocationInverness Florida
  • Country: Country Flag

Posted 26 March 2012 - 04:08 PM

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

Please Login or Register to see this Hidden Content


sidebar first text.
Posted Image

Here is the code.

Please Login or Register to see this Hidden Content


Yes I spent a lot of time in firebug still can't figure out what is different.

#4 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 26 March 2012 - 04:54 PM

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.


#5 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 26 March 2012 - 07:01 PM

@gyoery is right; definitely use the vertical-align property over HTML align. Make sure you visit

Please Login or Register to see this Hidden Content

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!