No replies
srinivasc_it
srinivasc_it's picture
Offline
newbie
Last seen: 5 years 31 weeks ago
Timezone: GMT-8
Joined: 2015-01-09
Posts: 1
Points: 2

Hi,

I am trying to fix two things with CSS but so far no luck (Screen shot attached):

1.I want the 2nd td(projectText) in every row to start at same vertical position as of 1st td(projectImages).Currently the anchor tag text in 2nd td(projectText) is positioned above the 1st td. How to style the 2nd td such that horizontally both TDs are in a straight line. That is text(2nd TD) for the images(1st TD) should start next to the image.

2.The text in the 2nd td is of varying length also, the images dimensions are few pixels different(minor difference), because of that all 5 rows are not symmetrical aligned. How can I make all 5 rows text and images exactly align next to each other, Irrespective of image and text varying length?

<style type=text/css>
.projectImages {
  height: 80px;  
}
 
.projectImages img {
  border:1px solid #497253;  
}
 
.projectText {
  line-height: 14px;
}
 
.projectText a {  
  color: #497253 !important;
  text-decoration: underline !important;  
  font: bold small arial !important;
}
 
.projectText p {
   margin-top: 2px;
   font: arial;
} 
</style>
 
<div class="PanelContent">
<table class="tblRightNav"><tbody>
<tr>
  <td class="projectImages"><img src="../img/myImage1.png" alt=""/></td>
  <td class="projectText"> <a href="../Pages/project1.aspx">
    project1</a><p>
    The project of blah blah blah bla bla blabla bl bla blab.</p></td>
</tr>
<tr>
  <td class="projectImages"><img src="../img/myImage2.png" alt=""/></td>
  <td class="projectText"><a href="../Pages/project2.aspx">
    project2</a><p>Understanding blahblahb blabla bl bla blablabla 
    bla bla blabla bl blabl blablablt.</p></td>
</tr>
<tr>
  <td class="projectImages"><img src="../img/myImage3.png" alt=""/></td>
  <td class="projectText"><a href="../Pages/project3.aspx">
    project3</a><p>bla blab bl blablabl bla blablabl bla obl blablab.</p></td>
</tr>
<tr>
 <td class="projectImages"><img src="../img/myImage4.png" alt=""/></td>
 <td class="projectText"><a href="../Pages/project4.aspx">
    project4</a><p>blablablabla bl blablaa blablab blablabl blablabl bla 
    blablablab.</p></td>
</tr>
<tr>
  <td class="projectImages"><img src="../img/myImage5.png" alt=""/></td>
  <td class="projectText"><a href="../Pages/project5.aspx">
    project5</a><p>blablabla blablablabla bl blablabe the blablabla 
    blabl.</p></td>
</tr>
</tbody></table>
</div>

AttachmentSize
Panel.JPG27.55 KB