Dear experts,

 

I have this sentence that runs to the second line but the word doesn't align up the first word on top.

 

>>> How to make your child

study better?

 

The word study I would like it to fall just nicely underneath How?

 

Hope some one can tell me how to.

 

Many thanks.

 

Below is my css codes:-

 

#right-column{

float:left;

width:285px;

padding:0;}

 

#right-column p{

margin:5px 0;

padding-right:5px;

float: left;

color:#000;

font-size:13px;

font-family:"veranda", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;;

border: #EE82EE}

 

a.foo {

color: black;

text-decoration: none;}

 

<div id="right-column">

<p><img src="arrow.gif" alt="How to make your child study better?"><a class="foo" href="article140610.html"> How to make your child study better? Read on.</a></img></p>

 

Hope to hear the experts' advise. Tks.

Hi

It's a bit difficult to answer your question without seeing the webpage or all the code for the webpage.

Text aligns differently in different screen sizes, and if you don't have Mozilla Firefox web developer addon, there are plenty of websites which will do this

http://www.yournew.com/resolution_test.cfm

 

If you know the screen size (but don't forget all the ipod users, so you need to test for those too)

you can put the text where you want it to go, but again, different browsers will display it differently.

 

You can insert extra spaces into the text. Spaces in html default to a single space, so if you want more, insert some  

You could experiment with paragraphs too.

It really depends on the structure of the rest of your site but you could do it something like this

 

 

<p class="arrows">How to make your child<br />study better?</p>

 

 

.arrows { padding-left:15px; background-image:url(arrows.gif); background-repeat:no-repeat}

 

So instead of your arrow image being contained within the html it is in the css, if you change the padding to be slightly larger than the width of your arrow it will mean that the text will start just after where the arrow image is and then the next line of text will start inline with the H of how.

 

I hope that makes sense

It really depends on the structure of the rest of your site but you could do it something like this

 

 

<p class="arrows">How to make your child<br />study better?</p>

 

 

.arrows { padding-left:15px; background-image:url(arrows.gif); background-repeat:no-repeat}

 

So instead of your arrow image being contained within the html it is in the css, if you change the padding to be slightly larger than the width of your arrow it will mean that the text will start just after where the arrow image is and then the next line of text will start inline with the H of how.

 

I hope that makes sense

Actually the study better will automatically flow to the 2nd line but I just want it to fall nicely underneath How. This sentence is under the left column block and the css is already defined. So, just want to know how it will show off nicely in a block ...thanks.

Actually the study better will automatically flow to the 2nd line but I just want it to fall nicely underneath How. This sentence is under the left column block and the css is already defined. So, just want to know how it will show off nicely in a block ...thanks.

 

Change the CSS to:

 

#right-column p{
margin:5px 0;
padding-right:5px;
padding-left:50px;
float: left;
color:#000;
font-size:13px;
font-family:"veranda", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
border: #EE82EE;
background-image:url(arrow.gif);
background-repeat: no-repeat;
}

 

and change the paragraph to:

 

<p><a class="foo" href="article140610.html"> How to make your child study better? Read on.</a></p>

 

You will have to change the padding-left value to whatever it takes to clear the background-image arrow.gif

Change the CSS to:

 

#right-column p{
margin:5px 0;
padding-right:5px;
padding-left:50px;
float: left;
color:#000;
font-size:13px;
font-family:"veranda", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
border: #EE82EE;
background-image:url(arrow.gif);
background-repeat: no-repeat;
}

 

and change the paragraph to:

 

<p><a class="foo" href="article140610.html"> How to make your child study better? Read on.</a></p>

 

You will have to change the padding-left value to whatever it takes to clear the background-image arrow.gif

 

It doesn't work........the arrow won't show up.......

Have a look at this:-

http://www.wickham43.com/forumposts/tan100708.html

 

I had to use my image which is 16*16px but you can see that the second line of the link text is indented.

 

Both the image and the text are separate links to the same url.

 

Be careful with widths when you edit the code. The #right-column is 285px wide but the two floated p tags should be the image width for .left1 and the second p tag .left2 should be 285 less image width less 2*5px side padding ( = 259px for my image 16px).