• 0

styling text in a text box


Question

Posted · Report post

I have a design to work to for the title part of this site but I can't get the styling to work. The client thinks there is too much white space/padding around the 'Welcome'  and the body copy and wants this all tightened up:  http://oraclecancertrust.org.gridhosted.co.uk/

 

This is the html I've used in the Text Content field of the textbox:

 

<h2><span style="color: #009089;">Welcome</span></h2><strong>At Oracle Cancer Trust we aim to maintain and improve the best survival rates and ensure our treatments and clinical practices preserve the senses.</strong>
<p>The Head & Neck Cancer Unit at the RMH was the first multidisciplinary unit in the country established in the 1960s, and is dedicated to the investigation and treatment of head and neck cancer. The Unit is also the largest centre dedicated to the management of head and neck tumours in the UK with around 400 new patients being referred each year.</p>
 
Padding to set to 0px 0px and the Textbox font size isn't selected. What's the best way to fix this, it should be easy...

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

HI,

 

Are you referring to the space between the Welcome header and the text below ?

 

If so, first you have the following HTML, which doesn't appear to be doing anything: http://d.pr/i/4EiN

 

<p><strong></strong></p>

 

So you should remove this, as there isn't any point to it.

 

Secondary, if it is the space between the Welcome header and the text below, the gap/space is created by the headers margin, you will simply need to remove the bottom margin.

 

You can do this by using one of the utility classes and add it to the header via class. For example:

 

<h2 class="zmb">Welcome</h2>

 

The .zmb class stands for zero margin bottom, you can see more info here - http://docs.pagelines.com/tutorials/html-css-utilities

 

Also if you view your sites code in Google Chrome, when you hover over elements you can differentiate between margin and padding by the color, in Chromes web dev tool Margin is orange and padding is green.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny -  I added both  zmt and zmb which did the trick. 

 

The strong tag is wrapped around the first paragraph and works ok, maybe it's my dirty html!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

All that counts is that it works.

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