Solved

Text align

Posted on 2016-09-21

CSS
HTML

3 solutions

31 Views

Last Modified: 2016-10-10

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

Comment

Question by:Nur Amirah Roslan

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

6 Comments

LVL 17

Expert Comment

by:bigeven2002

ID: 418100542016-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

Assisted Solution

by:D Patel

D Patel earned 75 total points (awarded by participants)

ID: 418100612016-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;
}

Author Comment

by:Nur Amirah Roslan

ID: 418101512016-09-21

bigeven2002, below 9.30 AM

LVL 3

Assisted Solution

by:pradeep kumar

pradeep kumar earned 75 total points (awarded by participants)

ID: 418101842016-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 57

Accepted Solution

by:Julian Hansen

Julian Hansen earned 350 total points (awarded by participants)

ID: 418101982016-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

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PowerShell dynamic web interface

Article by: Serge

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…

Beginner's Guide to HTML and CSS

Article by: Experts Exchange

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)