Status: Solved
Priority: Medium
Security: Public
Views: 38
Last Modified: 2016-10-10

Text align

hi experts,
i have a situation where i have to display data from database to my system. The problem is each of sentence will have a point icon and the second line of the sentence is place under the point icon. i want the second line of the sentence placed under the first word of the first line.
I have attached image for the situation below
Here is my code:

<table>
<tr>
<td valign="top"></td>
<td valign="top">   <img src="diari/oren.png" width=10> <%=rs_event("masa_mula")%> - <%=rs_event("tajuk")%><%=rs_event("tempat")%></td>
</tr>
</table>

I hope you can help me on this. Thank you.
Capture.PNG

Nur

Asked: 2016-09-21

Advertise Here

CSS
HTML

3 Solutions

LVL 17

bigeven2002Commented: 2016-09-21

Hello,

Thanks for the screenshot. So referring to that, are you wanting "D37" to appear directly below "Mesyuarat" or "9:30 AM"?

Based on your HTML, both 9:30 AM and Mesyurat... are in the sam table cell.

LVL 7

D PatelD Patel, Software EngineerCommented: 2016-09-21

list-style-position is the property you are looking for. It works in all browsers. (see MDN for more details)

ul {
list-style-position: outside;
/* You may want to add an additional padding-left: */
padding-left: 1.5em;
}

NurAuthor Commented: 2016-09-21

bigeven2002, below 9.30 AM

LVL 3

pradeep kumarSr. UI Developer Commented: 2016-09-22

You can just add id on table and add this properties:

<table id="alingtext">  --- add id to table
#alingtext img{margin-left: -20px;} == add css

Open in new window

LVL 63

Julian HansenCommented: 2016-09-22

Some notes on your markup

1. Tables for layout is not considered good practice and in this case they are limiting you.
2. The tag has been deprecated - you should be using CSS to style your elements.

You probably want to be using <li> for this as it handles automatic indenting of your content when the line wraps.

Take a look at the code below for a comparison between your code and using <li> and CSS

<!doctype html>
<html>
<head>
<style type="text/css">
ul.event-list {
  list-style: none;
  margin: 0 0 0 15px;;
  padding: 0;
}
ul.event-list li {
  background: url(images/oren.png) no-repeat left top;
  font-family: Arial;
  font-size: 13px;
  font-weight: bold;
  padding-left: 15px;
}
ul.event-list li span {
  font-family: Verdana;
  font-size: 10px;
  color: #008000;
}
</style>
</head>
<body>
<table>
  <tr>
    <td valign="top"></td>
      <td valign="top"><br/>
        <font face="arial" size="2">&nbsp;&nbsp;<img src="images/oren.png" width=10>&nbsp;<b>9:30 AM - Mesyuarat Jawantankuasa Sidang Pengarang Sains ke-40 - Telesidang</b>
        <b><font face="Verdana" size="1" color="#008000">bilik mesyuarat D37</font></b></font>
      </td>
  </tr>
</table>
<ul class="event-list">
  <li>9:30 AM - Mesyuarat Jawantankuasa Sidang Pengarang Sains ke-40 - Telesidang <span>bilik mesyuarat D37</span></li>
</ul>
</body>
</html>

Open in new window

Working sample here

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Text align

Join & Write a Comment Already a member? Login.

Featured Post